FullCalendar: How to recreate/reinitialize FullCalendar or batch add multiple events

Question

I am trying to batch add new events to the calendar but failed to find a convenient method to use. So I then decided to just reinitialize the view with new events array. So I tried the following:

var events = [
    {
        title: 'Event',
        start: new Date(y, m, d, 10),
        description: 'long description',
        id: 1
    },
    {
        title: 'background',
        start: new Date(y, m, d, 11),
        end: new Date(y, m, d, 14),
        description: 'long description',
        id: 0,
        color: "#00FF00",
        textColor: "#000000",
        placeholder: true,
    }];
$('#calendar').fullCalendar({
    events: events
});
$('#calendar').fullCalendar();

I can still see those events, meaning that the second initialization call does not actually work. Is there any work around in this case?

Solution 1

You can use addEventSource() like so:

.fullCalendar( 'addEventSource', events )

Source may be an Array/URL/Function just as in the events option. Events will be immediately fetched from this source and placed on the calendar

Solution 2

Just found a walkaround.. You could do

$('#calendar').fullCalendar({
    events: events
});
$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar();

to destroy it and then recreate.

But still, I do not know how to batch-add events.

Comments

[Krishna Mohan]

You saved my day!..Thanks :)

[Venugopal M]

This is the best workaround I saw regarding this issue. Thank you very much.