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.最终实现资源/事件的添加删除.
上代码.
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插件
推荐阅读
-
Android 对话框dialog使用注意点(android.view.WindowManager$BadTokenException)
-
Android 中View.onDraw(Canvas canvas)的使用方法
-
ASP.NET中MultiView和View选项卡控件的使用方法
-
PHP的Yii框架中View视图的使用进阶
-
Android开发使用自定义view实现ListView下拉的视差特效功能
-
ASP.NET中MultiView和View选项卡控件的使用方法
-
Android 中View.onDraw(Canvas canvas)的使用方法
-
jQuery日程管理插件fullcalendar使用详解
-
在Django的视图(View)外使用Session的方法
-
Android 自定义View的使用介绍