Search code examples
phpjqueryfullcalendarfacebox

Add Facebox To FullCalendar Events


I have been trying to make the FullCalendar events use Facebox to pop up with information when they are clicked. I have no problem putting the events on the calendar or getting the information that needs to be displayed it is just getting the pop up box to work.

I have tried adding rel="facebox" to both the "span" and the "a" that wraps the event title but neither seem to affect it.

If anyone has tried this before or knows a possible solution I look forward to hearing from you.


Solution

  • I copied and expanded the example from the fullCalendar eventClick document page:

    $('#calendar').fullCalendar({
     eventClick: function( calEvent, jsEvent, view ) {
      var txt = 'Event: ' + calEvent.title + '<br>' +
                'Event Start: ' + calEvent.start + '<br>' +
                'Event End: ' + calEvent.end + '<br>' +
                'Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY + '<br>' +
                'View: ' + view.name;
      // for an image use: jQuery.facebox({ image: 'dude.jpg' })
      // for ajax page use: jQuery.facebox({ ajax: 'remote.html' })
      jQuery.facebox(txt);
     }
    });
    

    Oh, and if you want to get any of the other calEvent objects, look at the fullCalendar event object page. There could be more if you are using the google calendar extension, including description and location