FullCalendar 反应调度器
FullCalendar React 调度包,用于渲染资源视图
安装
npm install @fullcalendar/react @fullcalendar/react-scheduler temporal-polyfill
来自v6?
在v7中,溢价插件是本套件的一部分,从子路径导入,例如 @fullcalendar/react-scheduler/resource-timeline,而标准插件来自 @fullcalendar/react (例如:. @fullcalendar/react/daygrid) (中文(简体) ). 分开 @fullcalendar/resource, (中文(简体) ), @fullcalendar/resource-timeline, (中文(简体) ), @fullcalendar/timeline, (中文(简体) ), @fullcalendar/core, (中文(简体) ), @fullcalendar/daygrid (etc.)包为FullCalendar v6. 不要用 v7 安装它们, 不要降级到 v6 : 解开它们并从中导入插件 @fullcalendar/react-scheduler/resource-timeline 财务报告和审定财务报表 @fullcalendar/react/daygrid见 升级指南。 。 。 .
使用量
显示 a FullCalendar 组件 选项,包括一个或多个调度插件:
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' },
]}
/>
插件
| 导入 | 提供 |
|---|---|
@fullcalendar/react-scheduler/resource-timeline | resourceTimelineDay编号 :Week编号 :Month编号 :Year 视图 |
@fullcalendar/react-scheduler/resource-timegrid | resourceTimeGridDay编号 :Week 视图 |
@fullcalendar/react-scheduler/resource-daygrid | resourceDayGridDay编号 :Week编号 :Month 视图 |
@fullcalendar/react-scheduler/timeline | timelineDay编号 :Week编号 :Month编号 :Year 视图(无资源) |
@fullcalendar/react-scheduler/scrollgrid | 大型网格的增强滚动功能 |
@fullcalendar/react-scheduler/adaptive | 打印优化渲染 |