本文详细介绍了在使用FullCalendar时，如何解决在一个页面中管理多个日历实例并实现数据同步的问题。当主编辑日历更新事件后，旁边的列表视图日历能够自动刷新其事件数据。核心解决方案在于将日历对象声明为全局变量，并在主日历的ajax数据更新成功回调中，调用列表日历的`refetchEvents()`方法，确保用户界面数据的实时一致性。
在使用FullCalendar构建交互式日历应用时，一个常见需求是在同一页面展示多个日历视图，例如一个用于详细编辑，另一个用于概览列表。当用户在主编辑日历中进行事件的添加、修改或删除操作后，我们通常希望旁边的列表日历能够实时反映这些变化，以保持数据的一致性。本文将指导您如何实现FullCalendar多实例间的事件同步刷新。
场景描述
假设您在一个网页上集成了两个FullCalendar实例：
- 主日历 (calendar)：一个标准的、可编辑的日历视图，允许用户通过AJAX调用后端接口进行事件的增删改查。
- 列表日历 (calendar_list)：一个以列表形式（如listYear视图）展示所有事件的辅助日历，其事件数据源与主日历相同，旨在提供一个事件摘要视图。
目标是当主日历中的事件通过AJAX成功更新到后端数据库后，列表日历能够自动调用其refetchEvents()方法，重新从服务器获取数据并更新显示。
核心问题与解决方案
最初的挑战在于，如果两个日历实例的变量（如calendar和calendar_list）都被声明在各自的DOMContentLoaded事件监听器内部，它们将是局部变量，无法在外部（例如在主日历的AJAX成功回调中）直接访问另一个日历实例。
解决方案的关键在于改变日历实例变量的作用域，将其声明为全局变量，从而允许在页面的任何位置访问它们。
1. 全局变量声明
将需要跨函数访问的日历实例变量声明在document.addEventListener(‘DOMContentLoaded’, …)函数外部，使其成为全局变量。
// 在任何函数外部声明，使其成为全局变量 var calendar; var calendar_list; document.addEventListener('DOMContentLoaded', function() { // 主日历初始化 var calendarEl = document.getElementById('calendar'); calendar = new FullCalendar.Calendar(calendarEl, { // ... 主日历配置，包括事件源、可编辑性等 // 例如： initialView: 'dayGridMonth', editable: true, events: '/api/events', // 假设这是事件数据源 eventDrop: function(info) { // 事件拖拽更新后的处理 // ... 调用AJAX更新事件 updateEventOnServer(info.event); }, eventChange: function(info) { // 事件改变（如resize）后的处理 updateEventOnServer(info.event); }, eventAdd: function(info) { // 新增事件后的处理 addEventOnServer(info.event); }, eventRemove: function(info) { // 删除事件后的处理 deleteEventOnServer(info.event); } }); calendar.render(); // 列表日历初始化 var calendarEl_list = document.getElementById('calendar_list'); calendar_list = new FullCalendar.Calendar(calendarEl_list, { // ... 列表日历配置 initialView: 'listYear', // 示例：列表年视图 headerToolbar: { left: 'prev,next', center: 'title', right: '' }, events: '/api/events' // 与主日历使用相同的事件数据源 }); calendar_list.render(); });
2. 在AJAX成功回调中触发刷新
当主日历执行事件的增删改操作并通过AJAX与后端交互时，一旦AJAX请求成功，就调用列表日历的refetchEvents()方法。这会指示列表日历重新从其配置的事件源获取数据。
以下是一个示例，展示如何在AJAX成功回调中调用calendar_list.refetchEvents()：
// 示例：更新事件到服务器的AJAX函数 function updateEventOnServer(eventInfo) { $.ajax({ url: '/api/updateEvent', // 后端更新事件的接口 type: 'POST', data: { id: eventInfo.id, title: eventInfo.title, start: eventInfo.start.toISOString(), end: eventInfo.end ? eventInfo.end.toISOString() : null, // ... 其他事件属性 }, success: function(response) { if (response.success) { console.log('事件更新成功！'); // 关键步骤：在主日历数据更新成功后，刷新列表日历 if (calendar_list) { calendar_list.refetchEvents(); } } else { alert('事件更新失败: ' + response.message); // 如果更新失败，可能需要回滚主日历的ui变化 // eventInfo.revert(); } }, error: function(xhr, status, error) { alert('AJAX请求错误: ' + xhr.responsejsON.message); // eventInfo.revert(); } }); } // 示例：添加事件到服务器的AJAX函数 function addEventOnServer(eventInfo) { $.ajax({ url: '/api/addEvent', // 后端添加事件的接口 type: 'POST', data: { title: eventInfo.title, start: eventInfo.start.toISOString(), end: eventInfo.end ? eventInfo.end.toISOString() : null, // ... 其他事件属性 }, success: function(response) { if (response.success) { console.log('事件添加成功！'); // 刷新列表日历 if (calendar_list) { calendar_list.refetchEvents(); } // 可能需要更新主日历中新添加事件的ID // eventInfo.setProp('id', response.newId); } else { alert('事件添加失败: ' + response.message); // eventInfo.remove(); // 如果添加失败，移除UI上的事件 } }, error: function(xhr, status, error) { alert('AJAX请求错误: ' + xhr.responsejson.message); // eventInfo.remove(); } }); } // 示例：删除事件到服务器的AJAX函数 function deleteEventOnServer(eventId) { $.ajax({ url: '/api/deleteEvent', // 后端删除事件的接口 type: 'POST', data: { id: eventId }, success: function(response) { if (response.success) { console.log('事件删除成功！'); // 刷新列表日历 if (calendar_list) { calendar_list.refetchEvents(); } } else { alert('事件删除失败: ' + response.message); // 如果删除失败，可能需要重新添加回UI } }, error: function(xhr, status, error) { alert('AJAX请求错误: ' + xhr.responseJSON.message); } }); }
注意事项
- 错误处理： 在AJAX请求失败时，应有适当的错误处理机制，例如向用户显示错误消息，并考虑是否需要回滚主日历上的UI更改（例如，如果拖拽事件失败，将其恢复到原始位置）。
- 性能考量： refetchEvents()会重新向服务器发送请求获取所有事件数据。对于事件数量非常庞大或更新频率极高的场景，可能需要考虑更精细的局部更新策略，但对于大多数应用场景，此方法简单且高效。
- 事件源一致性： 确保主日历和列表日历都使用相同的事件数据源（events配置项），这样refetchEvents()才能获取到最新的、一致的数据。
- 代码组织： 将AJAX相关的逻辑封装成独立的函数，如updateEventOnServer, addEventOnServer, deleteEventOnServer，可以提高代码的可读性和可维护性。
总结
通过将FullCalendar实例声明为全局变量，并在主日历的事件操作（如eventDrop, eventChange等）触发的AJAX请求成功后，调用辅助日历的refetchEvents()方法，我们可以轻松实现多个FullCalendar实例之间的数据同步。这种方法简单有效，确保了用户界面的数据一致性，提升了用户体验。