Make fullcalendar event filtering persistant between re-renderings-CodePudding

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

       })

CodePudding user response：

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