adding property to eventObject in FullCalendar

Question

I use the json events property of FullCalendar to call a php script which returns a JSON string. The string has the required properties plus some extras like 'description'. The documenation says that you can add properties but there is no information on how to do it.

I looked to see if it gets added automatically by looking at 'event.description' (for example) in the eventRender callback. it was 'undefined'.

If anybody has any experience with this I'd appreciate an example of how to do it.

David

Answer 1

When you create a new FullCalendar event, you could include any additional properties along with the event. FullCalendar will ignore any extra properties, so you will have to write some script to add and display them.

For example, adding an event location or description would be done as follows:

var event = {
 id          : '123',
 title       : 'New Event',
 url         : 'http://thearena.com/',
 start       : "Sun, 18 Jul 2010 13:00:00 EST",
 end         : "Sun, 18 Jul 2010 17:00:00 EST",
 allDay      : false,

 location    : 'The Arena',
 description : 'Big Event',

 editable    : true
};
$('.fc').fullCalendar( 'renderEvent', event, true ) // Add Event to fullCalendar

// Add script here to post the event back to your server

Then make sure when you initialize the calendar script, you have some way to display this extra event information. Here is an example with the event click function showing the data in an alert window (or a facebox lightbox - commented out). And if a url exists it will open that in a new tab/window as well.

$('.fc').fullCalendar({
 eventClick: function(calEvent, jsEvent, view) {
  var event = 'Event: ' + calEvent.title + '<br>' +
   'Location: ' + calEvent.location + '<br>' + 
   'Start time: ' + calEvent.start + '<br>' +
   'End time: ' + calEvent.end + '<br>' +
   'Description: ' + calEvent.description;

  alert(event);
  // jQuery.facebox(event); // this would open the HTML in a facebox popup window

  if (calEvent.url) {
    window.open(calEvent.url);
    return false;
  }
});