rerender on fullcalendar.io removeing all events

Question

I am not sure how to approach fullcalender.io. As I will be refreshing the calender, I thought I would return the calendar object like this.

var calendar = function (eventsObj) {
    console.log(eventsObj);
    return new FullCalendar.Calendar(document.getElementById("calendar"), {
        plugins: ['interaction', 'dayGrid', 'timeGrid'],
        defaultView: 'dayGridMonth',
        defaultDate: new Date().getDate(),
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        events: eventsObj
    });
}

I did it this way because I need to refresh all my events inside a bootstrap modal. When Modal is shown I recall this function.

 $("#assignModal").on("shown.bs.modal", function () {
            calendar(globalEvents).rerenderEvents();

Here globalEvents is an array with all the events. I initially render the calendar like this

window.onload = function () {
    calendar(globalEvents).render();
};

Issue is that the calendar renders but It does not have any events whereas if I just render the calendar, it keeps all the events. I checked on their docs, they have different features in different versions. Any ideas? please?

Answer 1

So basically according to the v4 guides.

calendar.getEventSources().forEach(function (item) {
                item.remove();
            });
            calendar.addEventSource(globalEvents);

This is how you would have to remove the events and render new ones. Here globalEvents is just an array I use to keep track of my refreshed events.

Answer 2

you can do something like below just remove old events attach new events and rerenderevents

below is some APIS which will help you

//remove old data
$('#fullCalendar').fullCalendar('removeEvents');

//Getting new event json data
$("#fullCalendar").fullCalendar('addEventSource', response);

//Updating new events
$('#fullCalendar').fullCalendar('rerenderEvents');

//getting latest Events
$('#fullCalendar').fullCalendar( 'refetchEvents' );

//getting latest Resources
$('#fullCalendar').fullCalendar( 'refetchResources' );

here is working example