I want to remove all events in fullcalendar v5 upon click of a button, the code below works fine

calendar.addEventSource([
    {
      title: 'Business Lunch',
      start: '2020-04-03T01:00:00',
    },
]);

But how can I able to remove/clear/delete all events after button click? The older version of fullcalendar has this method

calendar.fullCalendar( 'removeEvents', []);

How about for v5? I tried the code below but it gives me an error remove is not a function. I even tried calendar.refetchEvents();but nothing works.

$('.button').click(function(event) {
    calendar.remove();
});

I want to remove all events in fullcalendar v5 upon click of a button, the code below works fine

calendar.addEventSource([
    {
      title: 'Business Lunch',
      start: '2020-04-03T01:00:00',
    },
]);

But how can I able to remove/clear/delete all events after button click? The older version of fullcalendar has this method

calendar.fullCalendar( 'removeEvents', []);

How about for v5? I tried the code below but it gives me an error remove is not a function. I even tried calendar.refetchEvents();but nothing works.

$('.button').click(function(event) {
    calendar.remove();
});

• javascript
• fullcalendar
• fullcalendar-5

• 1 Did you check the v5 documentation? fullcalendar.io/docs/v5#toc . It's the same as in v4 anyway as far as I can see. You have to get all the events, loop through them and remove each one. Either that, or if you use event sources, you can remove the event source. – ADyson Commented Apr 14, 2020 at 9:13
• @ADyson I have actually run into this same issue. Something changed to the way those get accessed but I have not figured it all out fully. Works for me in v4, I get the same error as OP in V5 – Induane Commented Aug 12, 2020 at 17:41

3 Answers 3

Fullcalendar v5 remove all events

calendar.removeAllEvents();

Must be called on an Event Source instance. Use getEventSources.

removeEvents = calendar.getEventSources();

removeEvents.forEach(event => {
     event.remove();
});

@tta & @Leandro Lazzaretti:

Great answers! I was looking for this, and both works, but I found out an important diffenrence between them:

calendar.removeAllEvents(); // This will NOT clear the events source array

and

removeEvents = calendar.getEventSources();

removeEvents.forEach(event => {
     event.remove(); // this will clear 
});

You can check it out by doing:

removeEvents = calendar.getEventSources();

removeEvents.forEach(event => {
    event.remove();
});
        
calendar.addEventSource('yourSourceHere');
var e = calendar.getEventSources();
console.log(e);