FullCalendar视图配置、工具栏控制及事件刷新问题求助

问题1：在工具栏添加listMonth与dayGridMonth视图切换按钮 #

• 先确保引入对应视图的依赖插件：
  • CDN场景：需补充list视图的脚本（例如 <script src='https://cdn.jsdelivr.net/npm/@fullcalendar/list@6.1.8/index.global.min.js'></script>），dayGrid视图一般默认包含，若未引入需添加对应脚本
  • npm场景：安装@fullcalendar/list和@fullcalendar/daygrid包并在代码中导入
• 在日历配置的headerToolbar.right中，用逗号分隔添加dayGridMonth和listMonth，即可在工具栏显示两个视图的切换按钮

修改后的calendar1代码：

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 将calendar实例挂载到全局，方便后续其他日历访问
    window.calendar1 = new FullCalendar.Calendar(document.getElementById('calendar1'), {
      themeSystem: 'bootstrap',
      locale: 'en',
      height: 'auto',
      eventColor: '#1267e2',
      initialView: 'dayGridMonth',
      navLinks: true,
      selectable: true,
      selectMirror: true,
      firstDay: 0,
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        // 同时添加dayGridMonth和listMonth视图切换按钮
        right: 'dayGridMonth,listMonth'
      },
      displayEventTime: false
    });
    calendar1.render();
  });
</script>

问题2：禁用listMonth视图日历的工具栏，并从calendar1同步事件 #

• 禁用工具栏：将日历配置的headerToolbar设为false，即可隐藏整个工具栏
• 同步事件：
  1. 把calendar1的实例暴露到全局（如问题1中设置window.calendar1）
  2. 通过calendar1.getEvents()获取calendar1的所有事件数据
  3. 调用当前日历的removeAllEvents()清空现有事件，再用addEvents()添加同步来的事件；或直接用setEvents()覆盖现有事件
  4. 若需要实时同步，可给calendar1添加事件监听（如eventAdd/eventChange/eventRemove），触发时自动同步

修改后的第二个日历代码：

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
      themeSystem: 'bootstrap',
      locale: 'en',
      height: 'auto',
      eventColor: '#1267e2',
      initialView: 'listMonth',
      // 禁用工具栏
      headerToolbar: false,
      displayEventTime: false
    });
    calendar.render();

    // 定义同步事件的函数
    function syncEventsFromCalendar1() {
      if (window.calendar1) {
        const events = window.calendar1.getEvents();
        // 清空当前日历事件并添加新事件
        calendar.removeAllEvents();
        calendar.addEvents(events);
      }
    }

    // 页面加载完成后同步一次事件
    syncEventsFromCalendar1();

    // 监听calendar1的事件变化，实时同步
    window.calendar1.on('eventAdd eventChange eventRemove', syncEventsFromCalendar1);
  });
</script>

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