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

 

 

上代码.

  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,
 40     },
 41     header: {
 42         left: '',
 43         center: '',
 44         right: '',
 45     },
 46     resourcelabeltext: '姓名',
 47     resources: [],
 48     events: [],
 49 };
 50 /**
 51  * {object} option , onselect: function oneventclick: function ,
 52  */
 53 
 54 class timeline {
 55     constructor(el, opt = {}, callback = () => {}) {
 56         this.callback = callback;
 57         console.log('timeline -init');
 58         this._option = object.assign(
 59             {
 60                 select: info => this.select(info),
 61                 dateclick: info => this.dateclick(info),
 62                 eventclick: info => this.eventclick(info),
 63                 eventmouseenter: info => this.eventmouseenter(info),
 64                 eventmouseleave: info => this.eventmouseleave(info),
 65                 eventresize: info => this.eventresize(info),
 66                 eventdrop: info => this.eventdrop(info),
 67                 resourcerender: info => this.resourcerender(info),
 68                 eventrender: info => this.eventrender(info),
 69                 eventdestroy: info => this.eventdestroy(info),
 70             },
 71             option,
 72             opt
 73         );
 74         console.log('timeline-option==>>', this._option);
 75         this.calendar = new calendar(el, this._option);
 76         this.render();
 77 
 78         let currentdate = new date(this._option.now);
 79         let end = new date().setdate(currentdate.getdate());
 80         if (currentdate.gethours() !== 0) {
 81             end = new date().setdate(currentdate.getdate() + 1);
 82         }
 83         console.table('start, end', currentdate, new date(end));
 84         this.setoption('visiblerange', {
 85             start: currentdate,
 86             end: end,
 87         });
 88     }
 89 
 90     /**
 91      * @param {object} value
 92      */
 93     setoption(key, value) {
 94         this.calendar.setoption(key, value);
 95         this._option[key] = value;
 96     }
 97 
 98     // methods
 99     render() {
100         this.calendar.render();
101     }
102     addresource(resource) {
103         if (!resource) {
104             return;
105         }
106         this.calendar.addresource(resource);
107     }
108     removeresource(resource, e) {
109         if (!this._option.editable) {
110             return;
111         }
112         this._option.onremoveresource && this._option.onremoveresource(resource);
113         let events = resource.getevents();
114         events.foreach(event => {
115             event.remove();
116         });
117         resource.remove();
118         this.getresult();
119 
120         e.target.removeeventlistener('click', this.removeresource);
121     }
122     addevent(event) {
123         if (!event) {
124             return;
125         }
126         let tmp = this.calendar.geteventbyid(event.id);
127         if (tmp) {
128             for (let key in event) {
129                 if (tmp.extendedprops[key]) {
130                     tmp.setextendedprop(key, event[key]);
131                     continue;
132                 }
133                 if (tmp[key]) {
134                     tmp.setprop(key, event[key]);
135                 }
136             }
137         } else {
138             this.calendar.addevent(event);
139             console.log('addd', event);
140         }
141     }
142     removeevent(eventid) {
143         let event = this.calendar.geteventbyid(eventid);
144         if (event) {
145             event.remove();
146             this.getresult();
147         }
148     }
149 
150     destroy() {
151         this.calendar.destroy();
152         console.log('timeline destroy >>>>>>>');
153     }
154     getresult() {
155         let resources = this.calendar.getresources();
156         let result = [];
157         resources.map(item => {
158             let tmp = {
159                 resource: item,
160                 events: item.getevents(),
161             };
162             result.push(tmp);
163         });
164 
165         this.callback && this.callback(result);
166     }
167     isvalid(event) {
168         let now = this._option.now;
169         let start = new date(event.start).gettime();
170         let end = new date(event.end).gettime();
171         let starth = new date(now).gethours();
172         let startd = new date(now).getdate();
173         let crossdate = new date(now);
174         crossdate.setdate(startd);
175         crossdate.sethours(23);
176         let endpoint = crossdate.gettime();
177         if (starth !== 0) {
178             crossdate.setdate(startd + 1);
179             crossdate.sethours(starth);
180             endpoint = crossdate.gettime();
181         }
182         if (start < now || end < now || start > endpoint || end > endpoint) {
183             return false;
184         }
185         return true;
186     }
187     /**
188         callbacks 
189      */
190     select(info) {
191         if (!this.isvalid({start: info.start, end: info.end})) {
192             // info.revert();
193             return;
194         }
195         this._option.onselect && this._option.onselect(info);
196     }
197     dateclick(arg) {
198         console.log('dateclick', arg.date, arg.resource ? arg.resource.id : '(no resource)');
199     }
200     eventclick(info) {
201         this._option.oneventclick && this._option.oneventclick(info);
202     }
203     eventmouseenter(info) {
204         this._option.oneventmouseenter && this._option.oneventmouseenter(info);
205     }
206     eventmouseleave(info) {
207         this._option.oneventmouseleave && this._option.oneventmouseleave(info);
208     }
209     eventresize(info) {
210         if (!this.isvalid(info.event)) {
211             info.revert();
212         }
213         // this.getresult();
214     }
215     eventdrop(info) {
216         if (!this.isvalid(info.event)) {
217             info.revert();
218         }
219         // this.getresult();
220     }
221     resourcerender(info) {
222         let dom = info.el;
223         dom.style = dom.style + ';position:relative;';
224         let close = document.createelement('i');
225         close.classlist.add('iconfont', 'icon-c');
226         close.style = 'position:absolute;right:10px;top:50%;transform:translatey(-50%);font-size: 10px;';
227         close.addeventlistener('click', e => this.removeresource(info.resource, e));
228         dom.appendchild(close);
229     }
230     eventrender(info) {
231         this.getresult();
232     }
233 
234     eventdestroy(info) {
235         // this.getresult();
236         // console.log('eventdestroy', info);
237     }
238 }
239 
240 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插件