FullCalendar React Scheduler
FullCalendar React Scheduler package, for rendering resource views
Installation
npm install @fullcalendar/react @fullcalendar/react-scheduler temporal-polyfill
Coming from v6?
In v7, the premium plugins are part of this package, imported from subpaths like @fullcalendar/react-scheduler/resource-timeline, and the standard plugins come from @fullcalendar/react (e.g. @fullcalendar/react/daygrid). The separate @fullcalendar/resource, @fullcalendar/resource-timeline, @fullcalendar/timeline, @fullcalendar/core, @fullcalendar/daygrid (etc.) packages are FullCalendar v6. Don't install them with v7, and don't downgrade to v6: uninstall them and import plugins from @fullcalendar/react-scheduler/resource-timeline and @fullcalendar/react/daygrid. See the upgrade guide.
Usage
Render a FullCalendar component with options, including one or more scheduler plugins:
import FullCalendar from '@fullcalendar/react'
import classicThemePlugin from '@fullcalendar/react/themes/classic'
import interactionPlugin from '@fullcalendar/react/interaction'
import resourceTimelinePlugin from '@fullcalendar/react-scheduler/resource-timeline'
import '@fullcalendar/react/skeleton.css'
import '@fullcalendar/react/themes/classic/theme.css'
import '@fullcalendar/react/themes/classic/palette.css'
<FullCalendar
plugins={[
classicThemePlugin,
interactionPlugin,
resourceTimelinePlugin,
]}
initialView='resourceTimelineWeek'
schedulerLicenseKey='YOUR-LICENSE-KEY'
editable={true}
events={[
{ id: '1', resourceId: 'a', title: 'Meeting', start: new Date() },
]}
resources={[
{ id: 'a', title: 'Resource A' },
{ id: 'b', title: 'Resource B' },
]}
/>
Plugins
| Import | Provides |
|---|---|
@fullcalendar/react-scheduler/resource-timeline | resourceTimelineDay/Week/Month/Year views |
@fullcalendar/react-scheduler/resource-timegrid | resourceTimeGridDay/Week views |
@fullcalendar/react-scheduler/resource-daygrid | resourceDayGridDay/Week/Month views |
@fullcalendar/react-scheduler/timeline | timelineDay/Week/Month/Year views (no resources) |
@fullcalendar/react-scheduler/scrollgrid | enhanced scroll-related features for large grids |
@fullcalendar/react-scheduler/adaptive | print-optimized rendering |