I have a fullcalendar that initially display all events, but i'm usign a select to filter the events, the filter works well, however when the callendar re-render because I moved to the next month it shows all events again. This is my callendar initialization
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl,{
titleFormat:{
hour12: true
},
locale: '{{ (App::getLocale() == "es") ? "es" : "en" }}',
bootstrapFontAwesome: false,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
eventTimeFormat: {
hour: '2-digit',
minute: '2-digit',
hour12: true
},
events:"{{ route('schedules.show', 0) }}"
});
calendar.render();
And this my calendar filtering:
$('#select_coach').change(function(){
var coach_id = $('#select_coach').val();
source = "{{url('/schedules/show/')}}"+'/'+coach_id;
events = calendar.getEvents();
events.forEach(event => { event.remove()});
calendar.addEventSource(source);
})
With the fullcalendar method getEventSources() I got the original source then I put it in a variable let sources = calendar.getEventSources(); then I called the remove() method on the variable now I only have one source so everytime it re-render only use the last source.
let events = calendar.getEvents();
events.forEach(event => { event.remove()});
let sources = calendar.getEventSources();
sources[0].remove();
calendar.addEventSource(source);