remove all events from calendar

I´m trying to remove all events from my calendar. I´m using full calendar library v4. all my events are added in the calendar with ajax after the calendar is rendered.

in my script, i have this code for create one empty calendar:

var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
    themeSystem: 'bootstrap4',
    headerToolbar: {
        left: 'prev next today',
        center: 'title',
        right: 'dayGridDay dayGridWeek dayGridMonth listMonth'
    },
    locale: config.lang,
    initialView: 'dayGridMonth',
    displayEventTime: true,

    events: dbEvents,

    eventClick: function(event, jsEvent, view) {
      $('#alertNotify').html(alert[event]);
        
        $('#alertNotify').notifyModal({
            duration : -1,
            placement : 'center',
            type : alert['type'],
            icon : true,
            onLoad : function(el) {},
            onClose : function(el) {}
        });
    },
    
  }); // end calendar object

and after I´m using this function to load all my events from one date:

function loadEvents(){

var url = new URL(window.location.href);
var day = url.searchParams.get("day");
var month = url.searchParams.get("month");
var year = url.searchParams.get("year");

console.log(day + "/" + month + "/" + year);

$.ajax({
    url     : 'loadEvents',
    type    : 'get',
    dataType: 'json',
    data    : 'json',
    success : function(data) {    
      dbEvents = data;
      calendar.addEventSource(dbEvents); // add events with ajax data from array;
      dbEvents = [];
    },
    failure: function() {
      alert('there was an error while fetching events!');
    },
    color: 'red',   // a non-ajax option
    textColor: 'white', // a non-ajax option
});
}

I´m using dbEvents that is an array for load events from date.

now I´m not using load events from date, because I want to remove all events before. Why do I want to remove all my events? how I´m saying, I´m loading all my events with ajax, but if I move to next month or the next day, I want to load only events that belong to date. In my controller, I will do a query with this date. why I want to do this? for not overload my website. I think that I should remove all my events before including my news events. Actually, I´m reading on websites that I can use this:

$("#calendar").fullCalendar('removeEvents');

but i have this error en my console:

$(...).fullCalendar is not a function
        at calendarDate (calendarEvents.js:110)
        at HTMLButtonElement.<anonymous> (calendarEvents.js:53)
        at HTMLButtonElement.dispatch (jquery.min.js:2)
        at HTMLButtonElement.v.handle (jquery.min.js:2)

also, I´m reading that I can use this:

calendar.remove();

but remove I´m getting this error:

Uncaught TypeError: Cannot read property 'remove' of null

also i´m reading that i can use this:

calendar.fullCalendar('removeEvents');

but return my first error…

My question is: how I can remove all my events from my calendar?? maybe I´m confused and I would do this in another form, but I don´t know.

I forgot my framework back it´s Laravel 5.8

I appreciate all your help and all your response. I´m here to learn

Answer

Did you already try this method

var listEvent = calendar.getEvents();
   listEvent.forEach(event => { 
   event.remove()
});

Leave a Reply

Your email address will not be published. Required fields are marked *