错误：viewType“resourceTimelineDay”不可用。 请确保您已加载所有必要的插件

Question

import React from 'react'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import resourceTimelinePlugin from '@fullcalendar/resource-common'
import './calendar.scss'

const TempCalendar = () => {
  

  return (
    <FullCalendar
      schedulerLicenseKey="CC-Attribution-NonCommercial-NoDerivatives"
      timeZone="UTC"
      plugins={[resourceTimelinePlugin]}
      headerToolbar={{
        left: 'today, prev,next',
        center: 'title',
        right:
          'resourceTimelineDay, resourceTimelineTenDay, resourceTimelineMonth, resourceTimelineYear',
      }}
      scrollTime="08:00"
      aspectRatio="1.5"
      initialView="resourceTimelineDay"
      views={{
        resourceTimelineFourDays: {
          type: 'resourceTimeline',
          duration: { days: 4 },
        },
        resourceTimelineDay: {
          buttonText: ':15 slots',
          slotDuration: '00:15',
        },
        resourceTimelineTenDay: {
          type: 'resourceTimeline',
          duration: { days: 10 },
          buttonText: '10 days',
        },
      }}
      events={[
        { title: 'event 1', date: '2021-01-01' },
        { title: 'event 2', date: '2021-01-02' },
      ]}
      editable="true"
      selectable
      resourceAreaHeaderContent="Rooms"
      resources="https://fullcalendar.io/demo-resources.json?with-nesting&with-colors"
 
    />
  )
}

export default TempCalendar

dependencies = [
  "@fortawesome/fontawesome-svg-core": "^1.2.30",
    "@fortawesome/free-solid-svg-icons": "^5.14.0",
    "@fortawesome/react-fontawesome": "^0.1.11",
    "@fullcalendar/core": "^5.5.0",
    "@fullcalendar/daygrid": "^5.4.0",
    "@fullcalendar/interaction": "^5.4.0",
    "@fullcalendar/react": "^5.4.0",
    "@fullcalendar/resource-common": "^5.5.0",
    "@fullcalendar/resource-daygrid": "^5.5.0",
    "@fullcalendar/resource-timegrid": "^5.5.0",
    "@fullcalendar/resource-timeline": "^5.5.0",
    "@fullcalendar/timegrid": "^5.4.0",
    "@hunters/group-object": "^1.2.8",
  
]

Most of this code is from fullCalendar timeline demoes. here I don't know what is gone wrong with this.Even if i try other views it gives with the same error with their names. Maybe I'm missing something for these timeline view I looked for answers other places but i didn't find anything. Please help me out.

Answer 1

Downgrading to v5.4.0 of fullcalendar (including all plugins) solved this for me. It's hardly a "fix," but it's an option.

The underlying problem is the same error seen here . This error causes it to not load.

Answer 2

To fix it you need to registerPlugins inside of your module.

You can try use this code:

import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import interactionPlugin from '@fullcalendar/interaction';
import momentTimezonePlugin from '@fullcalendar/moment-timezone';

FullCalendarModule.registerPlugins([
  dayGridPlugin,
  timeGridPlugin,
  listPlugin,
  interactionPlugin,
  momentTimezonePlugin,
  ...
]);