FullCalendar V5 如何使用视图完全渲染回调实现滚动到当日

问题根因 #

viewDidMount触发时，FullCalendar仅完成了视图容器的挂载，日期单元格的类名注入、布局计算还未完成，此时.fc-day-today元素虽然能被选中，但还未生成有效的布局位置信息，所以scrollIntoView调用无效果，加setTimeout能生效本质是等待渲染队列执行完成后再调用滚动逻辑，确实不符合规范。

推荐解决方案 #

方案1：使用官方提供的datesSet钩子 #

FullCalendar V5 提供了datesSet回调，它的触发时机是视图日期范围确定、所有日期相关DOM完全渲染且类名注入完成后，完全符合需求，无需额外定时器：

1. 修改日历配置的钩子注册

// FullCalendar 初始化配置项
{
  // 其他配置省略
  datesSet: this.scrollToCurrentDay
}

2. 优化滚动逻辑，增加边界判断避免报错

// scrollToCurrentDay 方法
scrollToCurrentDay() {
  const todayElement = document.querySelector('.fc-day-today')
  // 先判断元素是否存在，避免视图无今日日期时抛出异常
  if (todayElement) {
    todayElement.scrollIntoView({
      behavior: 'auto', // 不需要平滑滚动可以设为auto
      block: 'start' // 控制元素滚动到视口的位置，可选center/end等
    })
  }
}

方案2：使用requestAnimationFrame替代setTimeout #

如果因为业务需求必须使用viewDidMount钩子，可以用requestAnimationFrame代替定时器，它会在浏览器下一次重绘前执行，刚好等DOM布局计算完成，比setTimeout更稳定且无额外延迟：

// scrollToCurrentDay 方法
scrollToCurrentDay() {
  requestAnimationFrame(() => {
    const todayElement = document.querySelector('.fc-day-today')
    todayElement?.scrollIntoView()
  })
}

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