FullCalendar如何使用refetchResources实现员工资源外部筛选

实现步骤 #

1. 调整FullCalendar的resources配置，让它动态根据下拉框选中值过滤员工列表

resources: function(dataInfo, successCallback, failureCallback) {
    // 获取多选下拉框选中的用户ID
    const selectedUserIds = $('#user_id').val();
    // 选中"全部"时直接返回所有员工
    if (selectedUserIds.includes('all')) {
        successCallback(data);
        return;
    }
    // 过滤出选中的员工资源
    const filteredResources = data.filter(employee => 
        selectedUserIds.includes(employee.id.toString())
    );
    successCallback(filteredResources);
},

注：这里做了类型转换是因为下拉框的value默认是字符串格式，避免和员工数字ID匹配失败

2. 监听下拉框变更事件，触发日历刷新资源列表

// 监听select2选中变更事件
$('#user_id').on('change', function () {
    // 调用FullCalendar刷新资源的方法
    // 如果你初始化时保存了calendar实例，直接用：
    calendar.refetchResources();

    // ========== 版本兼容调整 ==========
    // 如果是FullCalendar v3及以下旧版本，替换为：
    // $('#你的日历容器ID').fullCalendar('refetchResources');
    // 如果没保存calendar实例，v4+版本可以用这个方式获取：
    // const calendar = new FullCalendar.Calendar(document.getElementById('你的日历容器ID'));
})

可选优化（体验增强） #

可以加全选联动逻辑，避免同时选中「全部」和单个员工的冲突情况：

$('#user_id').on('select2:select', function (e) {
    const selectedId = e.params.data.id;
    if (selectedId === 'all') {
        // 选了全部时清空其他选中项
        $(this).val(['all']).trigger('change');
    } else {
        // 选了单个员工时取消「全部」选中
        const currentVal = $(this).val().filter(id => id !== 'all');
        $(this).val(currentVal).trigger('change');
    }
})

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