欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

FullCalendar Timeline View 使用

程序员文章站 2023-12-25 13:24:27
FullCalendar Timeline View(v4) The Scheduler add-on provides a new view called “timeline view” with a customizable horizontal time-axis and resources ......

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

 FullCalendar Timeline View 使用

 

上代码.

  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插件 

上一篇:

下一篇: