Add Facebox To FullCalendar Events

Question

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.

Answer 1

It might have something to do with the way facebox works. I think it might only run on the initial load of the page - so when you add these to new elements the facebox code has already run and the new elements are not recognized.

If you are using this to initiate facebox:

jQuery(document).ready(function($) {
  $('a[rel*=facebox]').facebox() 
})

Then that is the case. You should add something to the eventRender method so that as events are rendered you call the facebox method on then, which instantiates them as facebox elements.

From http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/:

eventRender: function(event, element) {
    element.qtip({
        content: event.description
    });
}

But instead of "element.qTip" you would use "element.facebox" with the proper arguments. You may need to set an href too.

Answer 2

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