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()
});