本文详细介绍了在使用fullcalendar.io v6时，如何解决两个日历实例之间的数据同步问题。当主日历（calendar）中的事件通过ajax更新后，如何自动触发辅助列表日历（calendar_list）的refetchevents()方法以刷新其显示。核心解决方案在于将目标日历实例声明为全局变量，从而允许在主日历的ajax成功回调中直接访问并调用其刷新方法，确保数据一致性。
在使用FullCalendar构建复杂的用户界面时，开发者常常会遇到需要同时显示多个日历实例的场景。例如，一个页面可能包含一个功能齐全、可编辑的主日历，以及一个辅助性的、仅用于显示事件列表的视图。当主日历中的事件（如创建、更新或删除）发生变化并通过AJAX请求提交到后端后，如何确保辅助日历视图能够即时反映这些变化，是实现良好用户体验的关键。
场景描述
假设我们有两个FullCalendar实例：
- calendar：主日历，支持事件的插入、更新和删除操作，并通过AJAX与后端PHP服务交互。
- calendar_list：辅助日历，通常配置为listYear视图，其事件源与主日历相同，旨在提供一个事件摘要列表。
我们的目标是：当calendar中的事件数据被更新并成功提交到服务器后，自动触发calendar_list的refetchEvents()方法，使其重新从服务器加载数据并更新显示。
遇到的问题
初次尝试时，开发者可能会将两个日历实例的声明都放在各自的DOMContentLoaded事件监听器内部，导致calendar和calendar_list这两个变量都处于局部作用域。这意味着在calendar的AJAX成功回调中，无法直接访问到calendar_list对象，从而无法调用其refetchEvents()方法。
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, { /* ... 主日历配置 ... */ });
// ... 主日历的事件处理逻辑，包含AJAX请求 ...
});
document.addEventListener('DOMContentLoaded', function() {
var calendarEl_list = document.getElementById('calendar_list');
var calendar_list = new FullCalendar.Calendar(calendarEl_list, { /* ... 列表日历配置 ... */ });
});在这种结构下，当主日历的AJAX请求成功后，尝试在回调函数中访问calendar_list会导致undefined错误。
解决方案：全局变量声明与AJAX回调集成
解决此问题的核心在于改变calendar_list变量的作用域，使其可以在主日历的AJAX成功回调中被访问到。最直接的方法是将calendar_list声明为全局变量。
步骤一：将目标日历实例声明为全局变量
在任何函数或事件监听器之外，声明calendar_list变量。这样，无论在哪个作用域内，只要该变量被赋值，其他作用域都可以访问到它。
// 在任何函数外部声明 calendar_list 变量
var calendar_list;
document.addEventListener('DOMContentLoaded', function() {
// 主日历的初始化
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
// ... 主日历配置 ...
// 示例：事件更新后的回调
eventChange: function(info) {
// 在这里发起AJAX请求更新事件
// 假设这是主日历更新事件的AJAX调用
// 稍后会展示完整的AJAX代码
}
});
calendar.render(); // 渲染主日历
// 列表日历的初始化
var calendarEl_list = document.getElementById('calendar_list');
calendar_list = new FullCalendar.Calendar(calendarEl_list, {
// ... 列表日历配置，例如：
initialView: 'listYear',
events: '/api/get-events.php' // 与主日历相同的事件源
});
calendar_list.render(); // 渲染列表日历
});步骤二：在主日历的AJAX成功回调中调用refetchEvents()
一旦calendar_list成为全局变量，我们就可以在主日历（calendar）执行事件更新操作的AJAX请求成功后，通过calendar_list.refetchEvents()方法来触发列表日历的数据刷新。
以下是一个示例AJAX请求，演示了如何在事件更新成功后刷新辅助日历：
// 假设这是主日历中某个事件操作（如拖拽、调整大小）触发的AJAX请求
function updateEventOnServer(eventData) {
$.ajax({
url: "/api/update-event.php", // 后端处理事件更新的接口
data: {
id: eventData.id,
title: eventData.title,
start: eventData.start.toISOString(),
end: eventData.end ? eventData.end.toISOString() : null,
// ... 其他事件属性 ...
},
type: "POST",
dataType: "json", // 预期服务器返回JSON数据
success: function(response) {
if (response.success) {
console.log("事件更新成功！");
// 在AJAX成功回调中，调用全局的 calendar_list 对象的 refetchEvents() 方法
if (calendar_list) { // 确保 calendar_list 已经被初始化
calendar_list.refetchEvents();
console.log("列表日历已触发刷新。");
}
} else {
alert("事件更新失败: " + response.message);
// 如果更新失败，可能需要回滚主日历上的事件显示
// info.revert();
}
},
error: function(xhr, status, error) {
alert("请求错误: " + (xhr.responseJSON ? xhr.responseJSON.message : error));
// 如果请求失败，同样可能需要回滚主日历上的事件显示
// info.revert();
}
});
}
// 示例：如何在 FullCalendar 的 eventDrop 或 eventResize 回调中调用此函数
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
editable: true,
eventDrop: function(info) {
// 事件拖拽结束时触发
updateEventOnServer(info.event);
},
eventResize: function(info) {
// 事件调整大小结束时触发
updateEventOnServer(info.event);
},
// ... 其他配置 ...
});
calendar.render();
// 列表日历的初始化保持不变
var calendarEl_list = document.getElementById('calendar_list');
calendar_list = new FullCalendar.Calendar(calendarEl_list, {
initialView: 'listYear',
events: '/api/get-events.php'
});
calendar_list.render();
});通过以上修改，当主日历中的事件成功更新到后端数据库后，辅助的列表日历会自动重新加载其事件数据，从而保持两个视图的数据同步。
注意事项
- 变量作用域： 确保calendar_list变量确实在DOMContentLoaded事件监听器之外声明，使其成为全局变量。如果是在模块化JavaScript环境中使用，可能需要通过导出/导入机制或将其挂载到window对象上。
- 初始化顺序： 尽管将calendar_list声明为全局变量，但其赋值操作仍然发生在DOMContentLoaded事件监听器内部。因此，在调用calendar_list.refetchEvents()之前，最好添加一个检查（if (calendar_list)），确保calendar_list对象已经被成功初始化并赋值。
- 错误处理： 在AJAX请求的error回调中，除了提示用户，还应考虑如何处理主日历上的事件显示。例如，如果后端更新失败，可能需要调用info.revert()来撤销主日历上的视觉变化，以避免前端与后端数据不一致。
- 事件源一致性： 确保两个日历实例的事件源（events配置）指向相同的后端API，这样refetchEvents()才能获取到最新的、一致的数据。
总结
实现FullCalendar多实例间的事件同步，关键在于合理管理日历实例变量的作用域。通过将需要被外部触发刷新的日历实例声明为全局变量，我们可以在执行数据更新的AJAX请求成功后，直接访问并调用其refetchEvents()方法。这种方法简单有效，能够确保用户界面在数据更新后保持一致性，从而提供流畅的用户体验。
