eventClick with lightBox?

Question

How I can open lightBox in eventClick, I need init a lightBox whe I click in a event.

Thanks!!

Answer 1

I actually ended up using fancybox and the way I managed to get it working was to use the eventAfterRender to bind it up. I didn't have to do anything to the eventClick to prevent url follow, I think fancybox took care of that. It didn't work when I performed this same wire up in the eventClick so you might want to follow this example with lightbox and see if that works for you as well. Here is the relevant part of what I did. Cheers!

$('#calendar').fullCalendar({
    eventAfterRender: function(event, element, view ) { 
        if(event.url) {
            $('a',$(element)).fancybox({
                type: 'ajax'
            });
        }                    
    }    
});

Answer 2

eventClick documentation is located here: http://arshaw.com/fullcalendar/docs/mouse/eventClick/

Within the eventClick function you'll write code to display your lightBox. Are you having any specific issues? You're question is very general.

Answer 3

I was unable to get this to work correctly. Everytime I clicked on any link, not just events, it would display a lightbox. I ended up using the event className attribute to set it to fancybox and that is working for me.

Below is my code:

<script type="text/javascript" src="jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="jquery.fancybox.css?v=2.1.5" media="screen" />
<script type="text/javascript">
    $(document).ready(function() {
        $('.fancybox').fancybox({
            width: 1500,
            midWidth: 900,
            height : 800,
            minHeight: 600
        });
    });
</script>

$('#calendar').fullCalendar({
    events: [
        {
          id: 2,
          className: \"fancybox fancybox.iframe\",
          title: 'Event 1',
          start: new Date(2013, 7, 12),
          url: '../sample.jsp'
        }
    ]
});