升级FullCalendar v6（React+TypeScript）：resources属性消失求助

1. 先确认资源插件的安装与注册 #

FullCalendar v6 中资源管理功能已抽离为独立插件，必须先安装并注册才能使用：

import FullCalendar from '@fullcalendar/react';
import resourcePlugin from '@fullcalendar/resource';

// 在组件中注册插件
<FullCalendar
  plugins={[resourcePlugin]}
  // 其他日历配置项
/>

2. 替换原 resources 属性的两种方法 #

方式一：初始化时设置资源（替代原 resources 属性）

v6 中用 initialResources 替代了原 resources 属性，直接替换即可：

<FullCalendar
  plugins={[resourcePlugin]}
  initialResources={resourceList} // 替换原 resources={resourceList}
  // 其他配置（如 headerToolbar、views 等）
/>

方式二：动态添加/修改资源（运行时操作）

如果需要在组件生命周期中更新资源，可通过日历实例的 API 操作：

import { useRef } from 'react';
import FullCalendar from '@fullcalendar/react';
import resourcePlugin from '@fullcalendar/resource';
import type { CalendarApi, ResourceInput } from '@fullcalendar/core';

const MyCalendar = () => {
  const calendarRef = useRef<CalendarApi>(null);
  const resourceList: ResourceInput[] = [
    { id: '1', title: '会议室A' },
    { id: '2', title: '会议室B' }
  ];

  // 动态添加资源的示例方法
  const addNewResource = () => {
    calendarRef.current?.addResource({
      id: '3',
      title: '临时会议室'
    });
  };

  return (
    <>
      <button onClick={addNewResource}>添加新资源</button>
      <FullCalendar
        ref={calendarRef}
        plugins={[resourcePlugin]}
        initialResources={resourceList}
      />
    </>
  );
};

3. 解决 TypeScript 报错 #

你遇到的 No overload matches this call 报错，本质是 v6 已移除 resources 属性，改用上述 initialResources 或动态 API 方式后，报错会自动消失。如果需要更严谨的类型约束，可直接导入 ResourceInput 类型定义资源数组：

import type { ResourceInput } from '@fullcalendar/resource';
const resourceList: ResourceInput[] = [/* 你的资源数据 */];

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