FullCalendar多实例同步：实现事件更新后自动刷新列表视图

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, { /* ... 列表日历配置 ... */ });
});

// 在任何函数外部声明 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请求
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();
});