FullCalendar Timeline View 使用

最新推荐文章于 2024-08-19 10:16:27 发布

weixin_30872337

最新推荐文章于 2024-08-19 10:16:27 发布

阅读量2.9k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/bzhy/p/10784879.html

版权

本文介绍了如何使用FullCalendar的Timeline View功能，通过安装和引入相关插件，配置初始化Calendar并实现资源和事件的增删操作。提供了一个示例代码展示其用法。

摘要由CSDN通过智能技术生成

FullCalendar Timeline View(v4)

The Scheduler add-on provides a new view called “timeline view” with a customizable horizontal time-axis and resources as rows.

1. 先安装fullcalendar和用到的插件

npm install --save @fullcalendar/core @fullcalendar/resource-timeline @fullcalendar/interaction

2.在使用时导入

import {Calendar} from '@fullcalendar/core';
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
import interactionPlugin from '@fullcalendar/interaction';
import '@fullcalendar/core/main.css';
import '@fullcalendar/timeline/main.css';
import '@fullcalendar/resource-timeline/main.css';

3. 初始化Calendar时,添加使用的插件

 plugins: [interactionPlugin, resourceTimelinePlugin],

4.最终实现资源/事件的添加删除.

上代码.

  1 import {Calendar} from '@fullcalendar/core';
  2 import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
  3 import interactionPlugin from '@fullcalendar/interaction';
  4 import '@fullcalendar/core/main.css';
  5 import '@fullcalendar/timeline/main.css';
  6 import '@fullcalendar/resource-timeline/main.css';
  7 
  8 // import zh_cn from '@fullcalendar/core/locales/zh-cn';
  9 let option = {
 10     schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
 11     plugins: [interactionPlugin, resourceTimelinePlugin],
 12     defaultView: 'resourceTimeline',
 13     now: '2019-03-07',
 14     // locale: zh_cn,
 15     selectable: true,
 16     selectHelper: true,
 17     editable: true, // enable draggable events
 18     eventResourceEditable: false,
 19     aspectRatio: 1,
 20     // height: 440,
 21     contentHeight: 440,
 22     resourceAreaWidth: '120px',
 23     eventOverlap: false,
 24     selectOverlap: false,
 25     eventTextColor: '#fff',
 26     displayEventTime: true,
 27     displayEventEnd: true,
 28     slotLabelFormat: {
 29         hour: 'numeric',
 30         minute: '2-digit',
 31         omitZeroMinute: true,
 32         meridiem: 'short',
 33         hour12: false,
 34     },
 35     eventTimeFormat: {
 36         hour: 'numeric',
 37         minute: '2-digit',
 38         meridiem: 'narrow',
 39         hour12: false,