FullCalendar资源视图报错：未知选项及视图不可用问题求助

你的问题核心是版本混合（v5+v6）以及v6对Scheduler功能的API调整，以下是分步解决方法：

1. 统一FullCalendar版本，消除依赖冲突 #

项目里同时存在v5和v6的FullCalendar包（比如@fullcalendar/core@6.1.1和@fullcalendar/react@5.11.1），这会导致配置项、插件不兼容。必须把所有FullCalendar相关依赖统一到同一个版本：

• 先卸载现有冲突依赖：

  npm uninstall @fullcalendar/core @fullcalendar/react @fullcalendar/resource-timegrid @fullcalendar/scheduler
  

• 重新安装同版本的依赖（这里统一到v6.1.1，和你现有核心版本匹配）：

  npm install @fullcalendar/core@^6.1.1 @fullcalendar/react@^6.1.1 @fullcalendar/resource-timegrid @fullcalendar/interaction
  

  注意：v6里已经没有单独的scheduler包，资源调度功能整合到resource-timegrid等资源插件中了。

2. 正确引入资源视图并修正配置项 #

之前的报错是因为没装resource-timegrid插件，且v6移除了schedulerLicenseKey配置：

• 必须显式引入resourceTimeGridDay对应的插件
• 授权密钥要全局设置，不再作为组件属性
• 完整示例代码：

  import React from 'react';
  import FullCalendar from '@fullcalendar/react';
  import resourceTimeGridDayPlugin from '@fullcalendar/resource-timegrid';
  import interactionPlugin from '@fullcalendar/interaction';
  
  // 在项目入口文件（比如index.js）全局设置授权密钥
  // import { setSchedulerLicenseKey } from '@fullcalendar/core';
  // setSchedulerLicenseKey('你的正式密钥');
  
  const Calendar = () => {
    const roomResources = [
      { id: 'room1', title: '会议室A' },
      { id: 'room2', title: '会议室B' },
      { id: 'room3', title: '会议室C' }
    ];
  
    const bookings = [
      { resourceId: 'room1', title: '产品评审会', start: '2024-05-20T09:00:00', end: '2024-05-20T11:30:00' },
      { resourceId: 'room2', title: '客户对接', start: '2024-05-20T14:00:00', end: '2024-05-20T16:00:00' }
    ];
  
    return (
      <FullCalendar
        plugins={[resourceTimeGridDayPlugin, interactionPlugin]}
        initialView="resourceTimeGridDay"
        resources={roomResources}
        events={bookings}
        height="800px"
      />
    );
  };
  
  export default Calendar;
  

3. 实现月/周视图的动态显示逻辑 #

要做到“选房间显示单个预订，不选显示总时长”，可以通过监听资源选择事件，动态切换数据源和渲染逻辑：

• 用selectResource事件记录选中的房间
• 根据选中状态，返回不同的事件数据（单个预订或聚合时长）
• 视图渲染时区分显示内容：

  import React, { useState, useCallback } from 'react';
  import FullCalendar from '@fullcalendar/react';
  import resourceTimeGridDayPlugin from '@fullcalendar/resource-timegrid';
  import dayGridMonthPlugin from '@fullcalendar/daygrid';
  import timeGridWeekPlugin from '@fullcalendar/timegrid';
  import interactionPlugin from '@fullcalendar/interaction';
  
  const Calendar = () => {
    const [selectedRoom, setSelectedRoom] = useState(null);
    const roomResources = [/* 房间数据 */];
  
    // 动态获取事件数据
    const fetchEvents = useCallback(() => {
      if (selectedRoom) {
        // 请求选中房间的单个预订数据
        return fetch(`/api/bookings?roomId=${selectedRoom.id}`).then(res => res.json());
      } else {
        // 请求所有房间的时长聚合数据
        return fetch('/api/bookings/total').then(res => res.json());
      }
    }, [selectedRoom]);
  
    return (
      <FullCalendar
        plugins={[resourceTimeGridDayPlugin, dayGridMonthPlugin, timeGridWeekPlugin, interactionPlugin]}
        initialView="dayGridMonth"
        resources={roomResources}
        events={fetchEvents}
        selectResource={(info) => setSelectedRoom(info.resource)}
        unselectResource={() => setSelectedRoom(null)}
        // 自定义月视图渲染
        views={{
          dayGridMonth: {
            eventContent: (info) => {
              return selectedRoom ? (
                <div className="booking-item">{info.event.title}</div>
              ) : (
                <div className="total-hours">总时长：{info.event.extendedProps.total}h</div>
              );
            }
          }
        }}
      />
    );
  };
  
  export default Calendar;
  

4. 关于授权密钥的补充说明 #

• v6中不再支持将schedulerLicenseKey作为组件props传递，必须在项目全局初始化时设置（比如入口文件index.js）
• 使用开源密钥时出现警告是正常现象，替换成正式授权密钥后警告会消失

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