Tengo un calendario completo que inicialmente muestra todos los eventos, pero estoy usando una selección para filtrar los eventos, el filtro funciona bien, sin embargo, cuando el calendario vuelve a aparecer porque pasé al mes siguiente, muestra todos los eventos nuevamente. Esta es la inicialización de mi callendar
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();Y este es mi filtrado de calendario:
$('#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); })Con el método getEventSources() obtuve la fuente original y luego la puse en una variable let sources = calendar.getEventSources(); luego llamé al método remove() en la variable ahora solo tengo una fuente, así que cada vez que se vuelve a procesar solo use la última fuente.
let events = calendar.getEvents(); events.forEach(event => { event.remove()}); let sources = calendar.getEventSources(); sources[0].remove(); calendar.addEventSource(source);