Set events in fullcalendar from array

Question

I'm using fullcalendar, but I want to set events from array, for example:

var countries = new Array();
countries[0] = {'title':'España', 'start':new Date(y, m, d+4, 19, 0), url:'http://google.com/'};
countries[1] = {'title':'Portugal', 'start':new Date(y, m, 22, 22, 0)};

This is a static example, I'll get this array and in each case I'd have 3 or 9 or ... differents events.

But example is:

$('#calendar').fullCalendar({
    editable: false,
    events: [ 
        {
            title: 'example',
            start: new Date(y, m, d+1, 19, 0),
            end: new Date(y, m, d+1, 22, 30),
            allDay: false
        },
        {
            title: 'Click for Google',
            start: new Date(y, m, 28),
            end: new Date(y, m, 29),
            url: 'http://google.com/'
        },         
    ]
});

How can I remove this two example events and set only my array "countries"?

Is it possible?

Solution 1

Removes events from the calendar.

$("#calendar").fullCalendar( 'removeEvents' [, idOrFilter ] )

Dynamically adds an event source.

$("#calendar").fullCalendar( 'addEventSource', source )

From here: https://fullcalendar.io/docs/addEventSource

Solution 2

If you are using fullcalendar v4 there are a bunch of API changes mentioned in a Github issue.

You would need to use the new API to get all of the event objects from the calendar and call the remove method on all of them.

After removing you need to use calendar.addEvent(event) to add all of your events.

We don't want to re-render the full calendar after adding each event so we wrap this into a batch rendering which only causes one re-rendering.

newEvents is the array of the events you want to add.

// batch every modification into one re-render
calendar.batchRendering(() => {
    // remove all events
    calendar.getEvents().forEach(event => event.remove());

    // add your new events
    newEvents.forEach(event => calendar.addEvent(event));
});

Hope this helped someone :)

Solution 3

  calendar.batchRendering(() => {
    // remove all events
    calendar.getEvents().forEach(event => event.remove());
    // add your new events source
    calendar.addEventSource(events);
  });