使 fullcalendar 事件过滤在重新渲染之间保持不变

Question

我有一个最初显示所有事件的完整日历，但我使用 select 来过滤事件，过滤器工作正常，但是当 callendar 重新呈现时，因为我移动到下个月它再次显示所有事件。这是我的 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();

这是我的日历过滤：

        $('#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);

       })

Answer 1

使用全日历方法 getEventSources() 我得到了原始来源然后我把它放在一个变量中 let sources = calendar.getEventSources(); 然后我调用了变量上的 remove() 方法现在我只有一个来源所以每次重新渲染时只使用最后一个来源。

let events = calendar.getEvents();
events.forEach(event => { event.remove()});
let sources = calendar.getEventSources();
sources[0].remove();
calendar.addEventSource(source);

使 fullcalendar 事件过滤在重新渲染之间保持不变

Make fullcalendar event filtering persistant between re-renderings

javascript

jquery

fullcalendar