FullCalendar jQuery Plugin Tips and Best Practices

FullCalendar jQuery Plugin Tips and Best Practices

Last updated:

adding an ID (or other custom Attribute) to Each Event

To add an id (or any other custom Attribute) to an Event, you need to add an id attribute to your event array and customize the eventRender attribute, like this:

$('#calendar').fullCalendar({
    editable: true,
    events: [
        {
            title: 'All Day Event',
            id: 1,   //<- the id attribute
            start: new Date(y, m, 1)
        },
        {
            title: 'Long Event',
            id: 2,   //<- the id attribute
            start: new Date(y, m, d-5),
            end: new Date(y, m, d-2)
        },
    ],
    eventRender: function(event, element) {
        element.attr('id',element.id);
    }
});

basically, what I've done here is add a callback which will add to element (which is the div that wraps the event) an id whose value will be event.id (event has any attribute you've assigned in your events array).

example on the usage of eventRender callback

w.i.p.: This is a work in progress. More content may be added in the future.