FullCalendar V6：主日历更新后触发副日历refetchEvents()方法

完全可以实现。FullCalendar V6提供了精准的事件钩子，能在主日历完成事件增删改操作后触发回调，你只需要在这些回调里调用calendar_list.refetchEvents()，就能自动刷新列表日历的内容。

具体实现步骤 #

1. 保证两个日历实例处于同一作用域：把两个日历的初始化代码放在同一个DOMContentLoaded回调内，这样主日历的回调函数可以直接访问到calendar_list实例，避免作用域隔离导致的调用失败。

2. 给主日历绑定操作回调：在主日历的配置项中，添加eventAdd、eventChange、eventRemove三个事件的处理函数，分别对应事件新增、修改、删除完成后的触发时机。如果你的事件增删改是通过自定义AJAX提交到PHP接口，需确保在AJAX请求成功后再调用刷新方法；如果是FullCalendar自带的事件源自动处理AJAX，直接在回调内调用即可。

示例代码：

document.addEventListener('DOMContentLoaded', function() {
    // 初始化可编辑主日历
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        editable: true,
        eventSources: [/* 与列表日历一致的事件源配置 */],
        // 事件新增完成后刷新列表日历
        eventAdd: function(info) {
            calendar_list.refetchEvents();
        },
        // 事件修改完成后刷新列表日历
        eventChange: function(info) {
            calendar_list.refetchEvents();
        },
        // 事件删除完成后刷新列表日历
        eventRemove: function(info) {
            calendar_list.refetchEvents();
        },
        // 若为自定义AJAX提交，需在请求成功后触发刷新
        // eventSave: function(info) {
        //     fetch('your-php-handler.php', {
        //         method: 'POST',
        //         body: JSON.stringify(info.event.toPlainObject())
        //     })
        //     .then(res => res.json())
        //     .then(data => {
        //         if (data.success) calendar_list.refetchEvents();
        //     });
        // }
    });
    calendar.render();

    // 初始化列表视图日历
    var calendarEl_list = document.getElementById('calendar_list');
    var calendar_list = new FullCalendar.Calendar(calendarEl_list, {
        initialView: 'listYear',
        eventSources: [/* 与主日历一致的事件源配置 */]
    });
    calendar_list.render();
});

补充说明 #

• 优先使用eventAdd/eventChange/eventRemove这三个精准钩子，而非通用的eventAfterAllRender，后者会在日历每次渲染（包括初始加载）时触发，没必要的刷新会浪费性能。
• 自定义AJAX场景下，必须等待后端数据更新完成后再调用refetchEvents()，否则列表日历会读取到旧数据。

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