FullCalendar3.9如何在viewRender回调中正常更新events属性

你调用this.setEvents失效的核心原因是FullCalendar v3是基于jQuery封装的版本，所有API方法都需要通过jQuery选择器调用，viewRender回调中的this并不指向FullCalendar实例，无法直接调用实例方法，该更新需求完全可以实现，正确实现方式如下：

实现方案 #

方案1：在viewRender中手动调用API更新 #

按照v3的API规范，更新events的语法为 $(日历选择器).fullCalendar('方法名', 参数)，修改后的viewRender代码如下：

viewRender: function(view, element) {
    if (view.name == 'listDay') {
        showCustomView();
        // 发起接口请求获取新的事件数据
        $.ajax({
            url: '你的业务接口地址',
            type: 'GET',
            // 可传入当前视图的起止时间，只查询对应时间段的事件
            data: {
                start: view.start.format(),
                end: view.end.format()
            },
            success: function(res) {
                // 假设res.data为符合FullCalendar格式要求的事件数组
                const newEventList = res.data;
                // 全量替换现有事件
                $('#request_calender').fullCalendar('setEvents', newEventList);
                // 如果是追加新事件不覆盖原有事件，使用以下写法即可
                // $('#request_calender').fullCalendar('addEvents', newEventList, true);
            }
        })
    }
}

注意事项：

• 不要在更新events后调用会触发视图重新渲染的方法（如goToDate、切换视图等），避免造成请求死循环
• 可以加缓存判断，同一时间段的事件只请求一次，减少接口调用次数

方案2：使用内置的动态events回调（更推荐） #

FullCalendar v3本身支持将events属性设置为回调函数，视图切换时会自动调用该函数获取对应时间段的事件，无需手动监听viewRender事件，更符合官方设计规范，修改初始化代码的events配置即可：

$("#request_calender").fullCalendar({
    // 其他原有配置保持不变
    // 将原来的events: calender_array 替换为以下回调
    events: function(start, end, timezone, callback) {
        $.ajax({
            url: '你的业务接口地址',
            data: {
                start: start.format(),
                end: end.format()
            },
            success: function(res) {
                // 首次加载+视图切换时都会自动调用，返回事件数组即可
                callback(res.data);
            }
        });
    },
    // 其他原有配置保持不变
})

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