FullCalendar v5在React中更新全量事件列表的最优实现方式

核心思路：利用React版FullCalendar的响应式Props #

React集成版的FullCalendar本身支持通过events prop的响应式变化自动更新日历事件，完全不需要手动调用removeAllEvents()和addEventSource()这类API，这是最简洁优雅的实现方式。

具体优化步骤 #

1. 替换initialEvents为events prop
   initialEvents仅在组件初始化时生效，而events会监听状态变化，自动同步最新的事件列表，无需手动操作日历实例。
2. 简化部门切换逻辑
   切换部门时只需要更新组件状态中的事件列表，FullCalendar会自动完成事件的替换，从根源避免事件叠加问题。

优化后的完整代码 #

// 事件列表定义
const department1Events = [
   {
     id:1,
     title: '部门1事件1',
     color: 'red'
   },
   {
     id:2,
     title: '部门1事件2',
     color: 'green'
   }
];

const department2Events = [
   {
     id:111,
     title: '部门2事件1',
     color: 'yellow'
   },
   {
     id:2222,
     title: '部门2事件2',
     color: 'orange'
   }
];

// 维护当前选中部门的事件列表状态
const [eventsList, setEventsList] = useState(department1Events);

// 部门切换处理函数
const handleDepartmentChange = (departmentValue) => {
  // 根据选中的部门值匹配对应的事件列表
  const targetEvents = departmentValue === 'department1' 
    ? department1Events 
    : department2Events;
  // 仅更新状态即可，日历会自动同步
  setEventsList(targetEvents);
};

// 部门选择组件
<SelectComponent
  label="部门"
  options={[
      {id:'department 1', value:'department1'},
      {id:'department 2', value:'department2'}
  ]}
  onChange={(value) => handleDepartmentChange(value)}
/>

// FullCalendar组件（核心修改：用events替代initialEvents）
<FullCalendar
   ref={calendarRef}
   headerToolbar={false}
   plugins={[dayGridPlugin, timeGridPlugin]}
   initialView="timeGridDay"
   events={eventsList} // 这里是关键！
/>

备选方案：手动调用日历API的简化写法 #

如果因为某些场景必须手动操作日历实例，可以用setOption方法直接替换事件源，省去先删除再添加的步骤：

const handleDepartmentChange = (departmentValue) => {
  const myCalendar = calendarRef?.current?.getApi();
  const targetEvents = departmentValue === 'department1' 
    ? department1Events 
    : department2Events;
  // 直接设置events选项，一次性替换所有事件
  myCalendar?.setOption('events', targetEvents);
  setEventsList(targetEvents);
};

优势对比 #

• 响应式Props方案：完全贴合React的状态管理逻辑，代码最简洁，无需操作日历API，降低出错概率。
• setOption方案：比原写法少一步removeAllEvents()，逻辑更紧凑，适合需要直接操作日历实例的场景。

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