如何在FullCalendar v6.1的dayGridYear视图中自动更新标题为当前可见月份

核心思路 #

dayGridYear默认渲染全年的月网格，标题固定为年份。要实现滚动时标题切换为当前可见月份，需要监听页面滚动，识别视口内的目标月份，再手动更新日历标题。datesSet回调返回的是日历内部的细分日期范围（比如单周），不适合这个场景；visibleRange更适合固定视图范围，而非动态跟随滚动的需求。

具体实现步骤 #

• 绑定滚动监听：给日历的滚动容器绑定滚动事件，避免频繁触发更新，可搭配防抖函数优化性能
• 识别可见月份：FullCalendar的dayGridYear视图中，每个月份对应.fc-daygrid-month类的DOM元素，通过判断元素与视口的位置关系，找到当前核心可见月份
• 更新日历标题：从目标月份元素中提取月份文本，调用日历的setOption方法替换原标题

代码示例 #

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridYear',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,dayGridYear'
    },
    datesSet: function() {
      const calendarScroller = calendarEl.querySelector('.fc-scroller');
      let debounceTimer;
      // 绑定滚动监听，防抖处理
      calendarScroller.addEventListener('scroll', function() {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(updateVisibleMonthTitle, 100);
      });
      // 初始化时先更新一次标题
      updateVisibleMonthTitle();
    }
  });

  calendar.render();

  function updateVisibleMonthTitle() {
    const monthElements = document.querySelectorAll('.fc-daygrid-month');
    let targetMonthText = '';

    monthElements.forEach(el => {
      const rect = el.getBoundingClientRect();
      // 以元素垂直中点进入视口作为判定条件，可根据需求调整
      if (rect.top <= window.innerHeight / 2 && rect.bottom >= window.innerHeight / 2) {
        targetMonthText = el.querySelector('.fc-daygrid-month-header').textContent.trim();
      }
    });

    if (targetMonthText) {
      calendar.setOption('headerToolbar.center', targetMonthText);
    }
  }
});

补充说明 #

• 防抖延迟时间可根据实际交互需求调整，平衡响应速度与性能
• 视口判定逻辑可灵活修改，比如改为判断元素是否完全可见，或顶部进入视口即触发
• 若日历滚动容器不是.fc-scroller，需根据实际DOM结构调整监听目标

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