FullCalendar Timeline View 使用

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.最终实现资源/事件的添加删除.

上代码.

 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';

 // import zh_cn from '@fullcalendar/core/locales/zh-cn';
 let option = {
     schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
     plugins: [interactionPlugin, resourceTimelinePlugin],
     defaultView: 'resourceTimeline',
     now: '2019-03-07',
     // locale: zh_cn,
     selectable: true,
     selectHelper: true,
     editable: true, // enable draggable events
     eventResourceEditable: false,
     aspectRatio: 1,
     // height: 440,
     contentHeight: 440,
     resourceAreaWidth: '120px',
     eventOverlap: false,
     selectOverlap: false,
     eventTextColor: '#fff',
     displayEventTime: true,
     displayEventEnd: true,
     slotLabelFormat: {
         hour: 'numeric',
         minute: '2-digit',
         omitZeroMinute: true,
         meridiem: 'short',
         hour12: false,
     },
     eventTimeFormat: {
         hour: 'numeric',
         minute: '2-digit',
         meridiem: 'narrow',
         hour12: false,
     },
     header: {
         left: '',
         center: '',
         right: '',
     },
     resourceLabelText: '姓名',
     resources: [],
     events: [],
 };
 /**
  * {Object} option , onSelect: function onEventClick: function ,
  */

 class Timeline {
     constructor(el, opt = {}, callBack = () => {}) {
         this.callBack = callBack;
         console.log('timeline -init');
         this._option = Object.assign(
             {
                 select: info => this.select(info),
                 dateClick: info => this.dateClick(info),
                 eventClick: info => this.eventClick(info),
                 eventMouseEnter: info => this.eventMouseEnter(info),
                 eventMouseLeave: info => this.eventMouseLeave(info),
                 eventResize: info => this.eventResize(info),
                 eventDrop: info => this.eventDrop(info),
                 resourceRender: info => this.resourceRender(info),
                 eventRender: info => this.eventRender(info),
                 eventDestroy: info => this.eventDestroy(info),
             },
             option,
             opt
         );
         console.log('timeline-option==>>', this._option);
         this.calendar = new Calendar(el, this._option);
         this.render();

         let currentDate = new Date(this._option.now);
         let end = new Date().setDate(currentDate.getDate());
         if (currentDate.getHours() !== 0) {
             end = new Date().setDate(currentDate.getDate() + 1);
         }
         console.table('start, end', currentDate, new Date(end));
         this.setOption('visibleRange', {
             start: currentDate,
             end: end,
         });
     }

     /**
      * @param {Object} value
      */
     setOption(key, value) {
         this.calendar.setOption(key, value);
         this._option[key] = value;
     }

     // methods
     render() {
         this.calendar.render();
     }
     addResource(resource) {
         if (!resource) {
             return;
         }
         this.calendar.addResource(resource);
     }
     removeResource(resource, e) {
         if (!this._option.editable) {
             return;
         }
         this._option.onRemoveResource && this._option.onRemoveResource(resource);
         let events = resource.getEvents();
         events.forEach(event => {
             event.remove();
         });
         resource.remove();
         this.getResult();

         e.target.removeEventListener('click', this.removeResource);
     }
     addEvent(event) {
         if (!event) {
             return;
         }
         let tmp = this.calendar.getEventById(event.id);
         if (tmp) {
             for (let key in event) {
                 if (tmp.extendedProps[key]) {
                     tmp.setExtendedProp(key, event[key]);
                     continue;
                 }
                 if (tmp[key]) {
                     tmp.setProp(key, event[key]);
                 }
             }
         } else {
             this.calendar.addEvent(event);
             console.log('addd', event);
         }
     }
     removeEvent(eventId) {
         let event = this.calendar.getEventById(eventId);
         if (event) {
             event.remove();
             this.getResult();
         }
     }

     destroy() {
         this.calendar.destroy();
         console.log('timeline destroy >>>>>>>');
     }
     getResult() {
         let resources = this.calendar.getResources();
         let result = [];
         resources.map(item => {
             let tmp = {
                 resource: item,
                 events: item.getEvents(),
             };
             result.push(tmp);
         });

         this.callBack && this.callBack(result);
     }
     isValid(event) {
         let now = this._option.now;
         let start = new Date(event.start).getTime();
         let end = new Date(event.end).getTime();
         let startH = new Date(now).getHours();
         let startD = new Date(now).getDate();
         let crossDate = new Date(now);
         crossDate.setDate(startD);
         crossDate.setHours(23);
         let endPoint = crossDate.getTime();
         if (startH !== 0) {
             crossDate.setDate(startD + 1);
             crossDate.setHours(startH);
             endPoint = crossDate.getTime();
         }
         if (start < now || end < now || start > endPoint || end > endPoint) {
             return false;
         }
         return true;
     }
     /**
         callbacks
      */
     select(info) {
         if (!this.isValid({start: info.start, end: info.end})) {
             // info.revert();
             return;
         }
         this._option.onSelect && this._option.onSelect(info);
     }
     dateClick(arg) {
         console.log('dateClick', arg.date, arg.resource ? arg.resource.id : '(no resource)');
     }
     eventClick(info) {
         this._option.onEventClick && this._option.onEventClick(info);
     }
     eventMouseEnter(info) {
         this._option.onEventMouseEnter && this._option.onEventMouseEnter(info);
     }
     eventMouseLeave(info) {
         this._option.onEventMouseLeave && this._option.onEventMouseLeave(info);
     }
     eventResize(info) {
         if (!this.isValid(info.event)) {
             info.revert();
         }
         // this.getResult();
     }
     eventDrop(info) {
         if (!this.isValid(info.event)) {
             info.revert();
         }
         // this.getResult();
     }
     resourceRender(info) {
         let dom = info.el;
         dom.style = dom.style + ';position:relative;';
         let close = document.createElement('i');
         close.classList.add('iconfont', 'icon-c');
         close.style = 'position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size: 10px;';
         close.addEventListener('click', e => this.removeResource(info.resource, e));
         dom.appendChild(close);
     }
     eventRender(info) {
         this.getResult();
     }

     eventDestroy(info) {
         // this.getResult();
         // console.log('eventDestroy', info);
     }
 }

 export default Timeline;

使用(示例)

 let timelineView = new Timeline(
     document.querySelector('#time-line-day'), {
         now: new Date(),
         onSelect: info => {
             let event = {
                 id: this.eventId,
                 title: this.eventId,
                 resourceId: info.resource.id,
                 start: info.start,
                 end: info.end,
             };
             timelineView.addEvent(event);

         },
         onRemoveResource: info => {

         },
         onEventClick: info => {
             let event = {
                 id: info.event.id,
                 title: info.event.title,
                 resourceId: info.event.getResources()[0].id,
                 start: info.event.start,
                 end: info.event.end,
             };
             let resourceId = info.event.getResources()[0].id;

         },
     },
     result => {

     }
 );

FullCalendar插件 plug-index