FullCalendar动态刷新疑问：如何重新绑定日历获取新数据并传参

你的猜测完全正确！当#calendar已经是一个初始化完成的FullCalendar实例时，再次调用$("#calendar").fullCalendar({...})不会重新触发事件请求——FullCalendar会忽略重复初始化的操作，这就是为什么你在网络面板里看不到get_calendar_entries.php的请求。另外你的代码还有一个关键问题：异步数据获取的逻辑错误，导致resource_array并没有拿到你期望的资源数据。

下面分两步解决你的问题：

1. 修复异步资源获取的逻辑 #

get_resources()里的$.ajax是异步操作，你当前的写法无法正确返回资源数据——done()回调里的return data不会让函数返回结果，反而get_resources()实际返回的是一个Promise对象，不是你需要的资源数组。我们需要调整函数，让它直接返回Promise，然后在redrawMe()里等待异步请求完成后再处理日历：

function get_resources() {
    let view_id = $("#view_id").val();
    // 直接返回ajax的Promise对象
    return $.ajax({
        "url" : "/ajax/get_resources.php",
        "data" : { "view_id" : view_id },
        "dataType" : "json"
    });
}

2. 正确刷新已存在的日历实例 #

对于已初始化的日历，我们不需要重复调用初始化方法，而是通过FullCalendar的API更新事件源参数并重新拉取事件。这里有两种常用方案：

方案一：更新事件源并重新获取事件（推荐） #

这种方式不需要销毁日历实例，直接更新事件源的参数后触发重拉：

function redrawMe() {
    get_resources().done(function(resource_array) {
        const $calendar = $("#calendar");
        // 检查日历是否已初始化
        const calendarInstance = $calendar.fullCalendar('getCalendar');
        
        if (calendarInstance) {
            // 更新事件源的data配置
            $calendar.fullCalendar('updateEventSource', {
                url: "/ajax/get_calendar_entries.php",
                data: function() {
                    return { "resources" : resource_array }
                }
            });
            // 强制重新拉取事件
            $calendar.fullCalendar('refetchEvents');
        } else {
            // 未初始化则创建新的日历实例
            $calendar.fullCalendar({
                "cache" : true,
                "editable" : true,
                "events" : {
                    "url" : "/ajax/get_calendar_entries.php",
                    "data" : function() {
                        return { "resources" : resource_array }
                    }
                }
            });
        }
    }).fail(function() {
        // 处理资源获取失败的情况
        console.error('获取资源列表失败，请检查请求');
    });
}

方案二：销毁旧实例后重新初始化 #

如果你觉得更新事件源的方式太复杂，也可以先销毁现有日历实例，再重新初始化：

function redrawMe() {
    get_resources().done(function(resource_array) {
        const $calendar = $("#calendar");
        // 销毁已存在的日历实例
        if ($calendar.fullCalendar('getCalendar')) {
            $calendar.fullCalendar('destroy');
        }
        // 重新初始化日历
        $calendar.fullCalendar({
            "cache" : true,
            "editable" : true,
            "events" : {
                "url" : "/ajax/get_calendar_entries.php",
                "data" : function() {
                    return { "resources" : resource_array }
                }
            }
        });
    }).fail(function() {
        console.error('获取资源列表失败，请检查请求');
    });
}

额外说明 #

• 如果你使用的是FullCalendar v5及以上版本，API语法有变化（比如fullCalendar('method')变成了calendar.method()），需要调整代码：

  // v5+ 获取实例的方式
  const calendarInstance = $calendar.get(0)._calendar;
  // 更新事件源
  calendarInstance.getEventSources()[0].setOption('data', function() {
      return { "resources" : resource_array }
  });
  // 重新拉取事件
  calendarInstance.refetchEvents();
  

• 注意关闭cache: true或者在请求参数里添加时间戳，避免浏览器缓存旧的事件数据。

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