FullCalendar事件筛选结果在日历重新渲染时失效问题咨询

你在初始化日历的时候绑定了默认的全量事件源（路由参数为0的请求地址），筛选操作仅新增了指定coach_id的事件源，没有移除默认的事件源。FullCalendar在切换月份、视图触发重渲染时，会加载所有已绑定的事件源，因此默认全量数据会重新展示，导致筛选结果丢失。

方案1：最小改动，替换事件源而非新增 #

直接使用FullCalendar提供的setEventSource方法替换全部事件源，不需要手动删除现有事件，也不会残留默认事件源，修改你的筛选逻辑代码即可：

$('#select_coach').change(function(){
    const coach_id = $('#select_coach').val();
    const source = "{{url('/schedules/show/')}}"+'/'+coach_id;
    // 直接替换所有事件源为新的筛选源，无需手动删除事件
    calendar.setEventSource(source);
})

如果你使用的是v4及更早版本的FullCalendar，setEventSource方法不可用，需要先手动移除所有旧事件源再新增：

$('#select_coach').change(function(){
    const coach_id = $('#select_coach').val();
    const source = "{{url('/schedules/show/')}}"+'/'+coach_id;
    // 移除所有已有事件源
    calendar.getEventSources().forEach(source => source.remove());
    // 添加新的筛选源
    calendar.addEventSource(source);
})

方案2：使用动态events函数（更稳定，推荐） #

将事件请求逻辑改为动态函数，全局存储当前选中的coach_id，每次日历重渲染请求事件时自动携带当前筛选值，从根本上避免筛选条件丢失。

第一步：声明全局变量存储当前筛选值，修改初始化配置 #

// 全局存储当前选中的coach_id，默认0即全量
let currentCoachId = 0;
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函数，每次请求自动带当前coach_id
    events: function(fetchInfo, successCallback, failureCallback) {
        fetch(`/schedules/show/${currentCoachId}?start=${fetchInfo.startStr}&end=${fetchInfo.endStr}`)
        .then(response => response.json())
        .then(data => successCallback(data))
        .catch(error => failureCallback(error));
    }
});
calendar.render();

第二步：修改筛选逻辑，更新筛选值后重新拉取事件 #

$('#select_coach').change(function(){
    currentCoachId = $('#select_coach').val();
    // 重新拉取事件，自动使用新的coach_id
    calendar.refetchEvents();
})

该方案后续新增其他筛选条件时，只需新增全局变量在events函数里拼接参数即可，所有场景下的日历重渲染都会自动携带当前所有筛选条件。

内容的提问来源于stack exchange，提问作者Santiago Ramirez