经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
FullCalendar Timeline View 使用
来源:cnblogs  作者:Linon  时间:2019/4/29 8:50:21  对本文有异议

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和用到的插件

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

2.在使用时导入

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

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

  1. plugins: [interactionPlugin, resourceTimelinePlugin],

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

 

 

上代码.

  1. 1 import {Calendar} from '@fullcalendar/core';
  2. 2 import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
  3. 3 import interactionPlugin from '@fullcalendar/interaction';
  4. 4 import '@fullcalendar/core/main.css';
  5. 5 import '@fullcalendar/timeline/main.css';
  6. 6 import '@fullcalendar/resource-timeline/main.css';
  7. 7
  8. 8 // import zh_cn from '@fullcalendar/core/locales/zh-cn';
  9. 9 let option = {
  10. 10 schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
  11. 11 plugins: [interactionPlugin, resourceTimelinePlugin],
  12. 12 defaultView: 'resourceTimeline',
  13. 13 now: '2019-03-07',
  14. 14 // locale: zh_cn,
  15. 15 selectable: true,
  16. 16 selectHelper: true,
  17. 17 editable: true, // enable draggable events
  18. 18 eventResourceEditable: false,
  19. 19 aspectRatio: 1,
  20. 20 // height: 440,
  21. 21 contentHeight: 440,
  22. 22 resourceAreaWidth: '120px',
  23. 23 eventOverlap: false,
  24. 24 selectOverlap: false,
  25. 25 eventTextColor: '#fff',
  26. 26 displayEventTime: true,
  27. 27 displayEventEnd: true,
  28. 28 slotLabelFormat: {
  29. 29 hour: 'numeric',
  30. 30 minute: '2-digit',
  31. 31 omitZeroMinute: true,
  32. 32 meridiem: 'short',
  33. 33 hour12: false,
  34. 34 },
  35. 35 eventTimeFormat: {
  36. 36 hour: 'numeric',
  37. 37 minute: '2-digit',
  38. 38 meridiem: 'narrow',
  39. 39 hour12: false,
  40. 40 },
  41. 41 header: {
  42. 42 left: '',
  43. 43 center: '',
  44. 44 right: '',
  45. 45 },
  46. 46 resourceLabelText: '姓名',
  47. 47 resources: [],
  48. 48 events: [],
  49. 49 };
  50. 50 /**
  51. 51 * {Object} option , onSelect: function onEventClick: function ,
  52. 52 */
  53. 53
  54. 54 class Timeline {
  55. 55 constructor(el, opt = {}, callBack = () => {}) {
  56. 56 this.callBack = callBack;
  57. 57 console.log('timeline -init');
  58. 58 this._option = Object.assign(
  59. 59 {
  60. 60 select: info => this.select(info),
  61. 61 dateClick: info => this.dateClick(info),
  62. 62 eventClick: info => this.eventClick(info),
  63. 63 eventMouseEnter: info => this.eventMouseEnter(info),
  64. 64 eventMouseLeave: info => this.eventMouseLeave(info),
  65. 65 eventResize: info => this.eventResize(info),
  66. 66 eventDrop: info => this.eventDrop(info),
  67. 67 resourceRender: info => this.resourceRender(info),
  68. 68 eventRender: info => this.eventRender(info),
  69. 69 eventDestroy: info => this.eventDestroy(info),
  70. 70 },
  71. 71 option,
  72. 72 opt
  73. 73 );
  74. 74 console.log('timeline-option==>>', this._option);
  75. 75 this.calendar = new Calendar(el, this._option);
  76. 76 this.render();
  77. 77
  78. 78 let currentDate = new Date(this._option.now);
  79. 79 let end = new Date().setDate(currentDate.getDate());
  80. 80 if (currentDate.getHours() !== 0) {
  81. 81 end = new Date().setDate(currentDate.getDate() + 1);
  82. 82 }
  83. 83 console.table('start, end', currentDate, new Date(end));
  84. 84 this.setOption('visibleRange', {
  85. 85 start: currentDate,
  86. 86 end: end,
  87. 87 });
  88. 88 }
  89. 89
  90. 90 /**
  91. 91 * @param {Object} value
  92. 92 */
  93. 93 setOption(key, value) {
  94. 94 this.calendar.setOption(key, value);
  95. 95 this._option[key] = value;
  96. 96 }
  97. 97
  98. 98 // methods
  99. 99 render() {
  100. 100 this.calendar.render();
  101. 101 }
  102. 102 addResource(resource) {
  103. 103 if (!resource) {
  104. 104 return;
  105. 105 }
  106. 106 this.calendar.addResource(resource);
  107. 107 }
  108. 108 removeResource(resource, e) {
  109. 109 if (!this._option.editable) {
  110. 110 return;
  111. 111 }
  112. 112 this._option.onRemoveResource && this._option.onRemoveResource(resource);
  113. 113 let events = resource.getEvents();
  114. 114 events.forEach(event => {
  115. 115 event.remove();
  116. 116 });
  117. 117 resource.remove();
  118. 118 this.getResult();
  119. 119
  120. 120 e.target.removeEventListener('click', this.removeResource);
  121. 121 }
  122. 122 addEvent(event) {
  123. 123 if (!event) {
  124. 124 return;
  125. 125 }
  126. 126 let tmp = this.calendar.getEventById(event.id);
  127. 127 if (tmp) {
  128. 128 for (let key in event) {
  129. 129 if (tmp.extendedProps[key]) {
  130. 130 tmp.setExtendedProp(key, event[key]);
  131. 131 continue;
  132. 132 }
  133. 133 if (tmp[key]) {
  134. 134 tmp.setProp(key, event[key]);
  135. 135 }
  136. 136 }
  137. 137 } else {
  138. 138 this.calendar.addEvent(event);
  139. 139 console.log('addd', event);
  140. 140 }
  141. 141 }
  142. 142 removeEvent(eventId) {
  143. 143 let event = this.calendar.getEventById(eventId);
  144. 144 if (event) {
  145. 145 event.remove();
  146. 146 this.getResult();
  147. 147 }
  148. 148 }
  149. 149
  150. 150 destroy() {
  151. 151 this.calendar.destroy();
  152. 152 console.log('timeline destroy >>>>>>>');
  153. 153 }
  154. 154 getResult() {
  155. 155 let resources = this.calendar.getResources();
  156. 156 let result = [];
  157. 157 resources.map(item => {
  158. 158 let tmp = {
  159. 159 resource: item,
  160. 160 events: item.getEvents(),
  161. 161 };
  162. 162 result.push(tmp);
  163. 163 });
  164. 164
  165. 165 this.callBack && this.callBack(result);
  166. 166 }
  167. 167 isValid(event) {
  168. 168 let now = this._option.now;
  169. 169 let start = new Date(event.start).getTime();
  170. 170 let end = new Date(event.end).getTime();
  171. 171 let startH = new Date(now).getHours();
  172. 172 let startD = new Date(now).getDate();
  173. 173 let crossDate = new Date(now);
  174. 174 crossDate.setDate(startD);
  175. 175 crossDate.setHours(23);
  176. 176 let endPoint = crossDate.getTime();
  177. 177 if (startH !== 0) {
  178. 178 crossDate.setDate(startD + 1);
  179. 179 crossDate.setHours(startH);
  180. 180 endPoint = crossDate.getTime();
  181. 181 }
  182. 182 if (start < now || end < now || start > endPoint || end > endPoint) {
  183. 183 return false;
  184. 184 }
  185. 185 return true;
  186. 186 }
  187. 187 /**
  188. 188 callbacks
  189. 189 */
  190. 190 select(info) {
  191. 191 if (!this.isValid({start: info.start, end: info.end})) {
  192. 192 // info.revert();
  193. 193 return;
  194. 194 }
  195. 195 this._option.onSelect && this._option.onSelect(info);
  196. 196 }
  197. 197 dateClick(arg) {
  198. 198 console.log('dateClick', arg.date, arg.resource ? arg.resource.id : '(no resource)');
  199. 199 }
  200. 200 eventClick(info) {
  201. 201 this._option.onEventClick && this._option.onEventClick(info);
  202. 202 }
  203. 203 eventMouseEnter(info) {
  204. 204 this._option.onEventMouseEnter && this._option.onEventMouseEnter(info);
  205. 205 }
  206. 206 eventMouseLeave(info) {
  207. 207 this._option.onEventMouseLeave && this._option.onEventMouseLeave(info);
  208. 208 }
  209. 209 eventResize(info) {
  210. 210 if (!this.isValid(info.event)) {
  211. 211 info.revert();
  212. 212 }
  213. 213 // this.getResult();
  214. 214 }
  215. 215 eventDrop(info) {
  216. 216 if (!this.isValid(info.event)) {
  217. 217 info.revert();
  218. 218 }
  219. 219 // this.getResult();
  220. 220 }
  221. 221 resourceRender(info) {
  222. 222 let dom = info.el;
  223. 223 dom.style = dom.style + ';position:relative;';
  224. 224 let close = document.createElement('i');
  225. 225 close.classList.add('iconfont', 'icon-c');
  226. 226 close.style = 'position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size: 10px;';
  227. 227 close.addEventListener('click', e => this.removeResource(info.resource, e));
  228. 228 dom.appendChild(close);
  229. 229 }
  230. 230 eventRender(info) {
  231. 231 this.getResult();
  232. 232 }
  233. 233
  234. 234 eventDestroy(info) {
  235. 235 // this.getResult();
  236. 236 // console.log('eventDestroy', info);
  237. 237 }
  238. 238 }
  239. 239
  240. 240 export default Timeline;
View Code

 使用(示例)

  1. let timelineView = new Timeline(
  2. document.querySelector('#time-line-day'), {
  3. now: new Date(),
  4. onSelect: info => {
  5. let event = {
  6. id: this.eventId,
  7. title: this.eventId,
  8. resourceId: info.resource.id,
  9. start: info.start,
  10. end: info.end,
  11. };
  12. timelineView.addEvent(event);
  13. },
  14. onRemoveResource: info => {
  15. },
  16. onEventClick: info => {
  17. let event = {
  18. id: info.event.id,
  19. title: info.event.title,
  20. resourceId: info.event.getResources()[0].id,
  21. start: info.event.start,
  22. end: info.event.end,
  23. };
  24. let resourceId = info.event.getResources()[0].id;
  25. },
  26. },
  27. result => {
  28. }
  29. );
View Code

 

 

 

 FullCalendar插件 plug-index

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号