I'm loading dynamic events from a JSON source, but each time I click a different room, I want to clear all the events prior to fetching the new ones
I have attempted to clear the eventSource but to no avail
var eventSource = calendar.getEventSources()
eventSource.remove();
which results in an error:
Uncaught TypeError: eventSource.remove is not a function
I have previously been using V3, but upgraded to V4 and the documentation is a little hard to follow on how to clear the events.
You are absolutely spot on, I'm having a particularly slow day on picking things up!
var eventSources = calendar.getEventSources();
var len = eventSources.length;
for (var i = 0; i < len; i++) {
eventSources[i].remove();
}
Was the solution, as suggested by ADyson.
You can call removeAllEvents function to delete all the events without refreshing the whole page :
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {/*OPTIONS*/});
$('#button').on('click', function () {
calendar.removeAllEvents();
});
});
Version 5 does not support the removeEvents function. You can loop through the list of events and delete them one by one:
var listEvent = calendar.getEvents();
listEvent.forEach(event => {
event.remove()
});