React FullCalendar资源/房间不显示，控制台报Unknown option 'resources'错误

• 测试React FullCalendar时，资源/房间完全不展示，控制台抛出「Unknown option 'resources'」警告
• 已尝试JSON、JS对象两种方式配置资源，均无效果

原测试代码 #

export default function App() {
  const lunch = new Date();
  const events = [
    {
      title: "Lunch",
      start: lunch
    }
  ];

  const resources = [
    {
      id: "1",
      title: "Room 1"
    },
    {
      id: "2",
      title: "Display room"
    },
    {
      id: "3",
      title: "MR-Fujita"
    }
  ]
  
  return (
    <div className="App">
      <FullCalendar
        events={events}
        resources={resources}
        headerToolbar={{
          left: "dayGridMonth,timeGridWeek,timeGridDay",
          center: "title",
          right: "prevYear,prev,next,nextYear"
        }}
        plugins={[dayGridPlugin, timeGridPlugin]}
        initialView="timeGridWeek"
        height="100%"
      />
    </div>
  );
}

问题原因及解决方法 #

问题核心是未引入资源功能所需的插件，且使用了不支持资源展示的视图：

1. FullCalendar的资源管理依赖resourceTimelinePlugin，需先安装并导入该插件
2. timeGridWeek视图不支持资源列展示，需切换为resourceTimelineWeek这类支持资源的视图

修改后的代码示例 #

// 先确保安装了依赖：npm install @fullcalendar/resource-timeline
import { dayGridPlugin, timeGridPlugin, resourceTimelinePlugin } from '@fullcalendar/core';

export default function App() {
  const lunch = new Date();
  const events = [
    {
      title: "Lunch",
      start: lunch,
      resourceId: "1" // 可选：给事件绑定对应资源
    }
  ];

  const resources = [
    {
      id: "1",
      title: "Room 1"
    },
    {
      id: "2",
      title: "Display room"
    },
    {
      id: "3",
      title: "MR-Fujita"
    }
  ]
  
  return (
    <div className="App">
      <FullCalendar
        events={events}
        resources={resources}
        headerToolbar={{
          left: "dayGridMonth,resourceTimelineWeek,timeGridDay",
          center: "title",
          right: "prevYear,prev,next,nextYear"
        }}
        plugins={[dayGridPlugin, timeGridPlugin, resourceTimelinePlugin]} // 添加资源插件
        initialView="resourceTimelineWeek" // 切换为支持资源的视图
        height="100%"
      />
    </div>
  );
}

内容的提问来源于stack exchange，提问作者R2-D2