5

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.

ADyson
  • 57,178
  • 14
  • 51
  • 63
Jason Williams
  • 163
  • 1
  • 1
  • 8
  • 1
    getEventSource**s** - clue's in the name, it's a plural. It returns an array (the [documentation](https://fullcalendar.io/docs/Calendar-getEventSources) says this, very clearly!) containing all the event sources currently loaded. If you know you'll only have one event source, then you can reference the first element of the array directly: `var eventSources = calendar.getEventSources() eventSources[0].remove();` should do the job. If you don't know how many sources there will be, then loop through them – ADyson Jun 18 '19 at 12:45

4 Answers4

10

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.

Adrian Mole
  • 49,934
  • 160
  • 51
  • 83
Jason Williams
  • 163
  • 1
  • 1
  • 8
10

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();
     });
});
Dandin Sanjeev Rao
  • 71
  • 8
amine
  • 373
  • 1
  • 5
  • 12
5

Version 5.4.0

Event-Remove

$('#calendar').fullCalendar('removeEvents');
double-beep
  • 5,031
  • 17
  • 33
  • 41
Ashok Parmar
  • 336
  • 4
  • 4
  • Please add some explanation too. Also please add ``` around your code like this: ``` code ``` to give `code`. – Sabito stands with Ukraine Dec 10 '20 at 21:16
  • 1
    Your link is for the event remove function (not for removing all events on the calendar) and your example uses jquery which fullcalendar v5 doesn't even use anymore. – akaspick Mar 10 '22 at 13:17
2

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()
});
Adrian Mole
  • 49,934
  • 160
  • 51
  • 83
Rami Baccour
  • 21
  • 2