FullCalendar设置状态后自动跳转至今日日期问题咨询

问题核心 #

配置visibleRange实现2年视图时，hover事件触发setShow(true)状态更新，日历无理由自动滚动回当前日期（08-29），移除visibleRange则问题消失，但无法保留2年视图需求。

解决方案 #

1. 隔离状态更新的重渲染范围

setShow(true)可能触发了日历组件的整体重渲染，导致FullCalendar重新计算视图并滚动回今日。将事件hover的逻辑封装到独立的记忆化组件中，避免触发日历容器的重渲染：

const EventItem = React.memo(({ event, onHover }) => {
  return <div onMouseEnter={onHover} className="fc-event">{event.title}</div>;
});

// 使用时绑定稳定的回调
const handleEventHover = useCallback(() => {
  setShow(true);
}, [setShow]);

// 日历事件渲染配置
eventContent: (info) => {
  return <EventItem event={info.event} onHover={handleEventHover} />;
}

2. 手动保存并恢复滚动位置

在状态更新前后手动记录、恢复日历的滚动偏移，绕过自动滚动的逻辑：

const calendarRef = useRef(null);

const handleHover = () => {
  // 记录当前滚动位置
  const { top, left } = calendarRef.current.getScroll();
  // 更新状态
  setShow(true);
  // 微任务队列中恢复滚动，避免重渲染覆盖
  queueMicrotask(() => {
    calendarRef.current.scrollTo({ top, left });
  });
};

// 绑定日历ref
<FullCalendar ref={calendarRef} visibleRange={your2YearRange} ... />

3. 固定visibleRange的计算逻辑

如果visibleRange是动态基于当前日期计算的，状态更新时可能导致范围重新评估，触发滚动。提前计算固定的2年区间，避免动态依赖：

// 在组件外部或初始化时计算固定范围，避免每次渲染重新计算
const TWO_YEAR_RANGE = {
  start: new Date(new Date().getFullYear(), 0, 1),
  end: new Date(new Date().getFullYear() + 2, 0, 1)
};

// 日历配置中直接使用固定值
visibleRange: TWO_YEAR_RANGE

4. 关闭日历的自动滚动默认行为

部分FullCalendar版本在重渲染时会自动滚动到当前日期，通过配置关闭该行为：

// 日历配置项中添加
scrollTimeReset: false,
nowIndicator: false // 若不需要今日指示器，可关闭进一步减少干扰

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