Sin descripción

main.js 67KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357
  1. /*!
  2. FullCalendar Time Grid Plugin v4.3.0
  3. Docs & License: https://fullcalendar.io/
  4. (c) 2019 Adam Shaw
  5. */
  6. (function (global, factory) {
  7. typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@fullcalendar/core'), require('@fullcalendar/daygrid')) :
  8. typeof define === 'function' && define.amd ? define(['exports', '@fullcalendar/core', '@fullcalendar/daygrid'], factory) :
  9. (global = global || self, factory(global.FullCalendarTimeGrid = {}, global.FullCalendar, global.FullCalendarDayGrid));
  10. }(this, function (exports, core, daygrid) { 'use strict';
  11. /*! *****************************************************************************
  12. Copyright (c) Microsoft Corporation. All rights reserved.
  13. Licensed under the Apache License, Version 2.0 (the "License"); you may not use
  14. this file except in compliance with the License. You may obtain a copy of the
  15. License at http://www.apache.org/licenses/LICENSE-2.0
  16. THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  17. KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
  18. WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
  19. MERCHANTABLITY OR NON-INFRINGEMENT.
  20. See the Apache Version 2.0 License for specific language governing permissions
  21. and limitations under the License.
  22. ***************************************************************************** */
  23. /* global Reflect, Promise */
  24. var extendStatics = function(d, b) {
  25. extendStatics = Object.setPrototypeOf ||
  26. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  27. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  28. return extendStatics(d, b);
  29. };
  30. function __extends(d, b) {
  31. extendStatics(d, b);
  32. function __() { this.constructor = d; }
  33. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  34. }
  35. var __assign = function() {
  36. __assign = Object.assign || function __assign(t) {
  37. for (var s, i = 1, n = arguments.length; i < n; i++) {
  38. s = arguments[i];
  39. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
  40. }
  41. return t;
  42. };
  43. return __assign.apply(this, arguments);
  44. };
  45. /*
  46. Only handles foreground segs.
  47. Does not own rendering. Use for low-level util methods by TimeGrid.
  48. */
  49. var TimeGridEventRenderer = /** @class */ (function (_super) {
  50. __extends(TimeGridEventRenderer, _super);
  51. function TimeGridEventRenderer(timeGrid) {
  52. var _this = _super.call(this, timeGrid.context) || this;
  53. _this.timeGrid = timeGrid;
  54. _this.fullTimeFormat = core.createFormatter({
  55. hour: 'numeric',
  56. minute: '2-digit',
  57. separator: _this.context.options.defaultRangeSeparator
  58. });
  59. return _this;
  60. }
  61. // Given an array of foreground segments, render a DOM element for each, computes position,
  62. // and attaches to the column inner-container elements.
  63. TimeGridEventRenderer.prototype.attachSegs = function (segs, mirrorInfo) {
  64. var segsByCol = this.timeGrid.groupSegsByCol(segs);
  65. // order the segs within each column
  66. // TODO: have groupSegsByCol do this?
  67. for (var col = 0; col < segsByCol.length; col++) {
  68. segsByCol[col] = this.sortEventSegs(segsByCol[col]);
  69. }
  70. this.segsByCol = segsByCol;
  71. this.timeGrid.attachSegsByCol(segsByCol, this.timeGrid.fgContainerEls);
  72. };
  73. TimeGridEventRenderer.prototype.detachSegs = function (segs) {
  74. segs.forEach(function (seg) {
  75. core.removeElement(seg.el);
  76. });
  77. this.segsByCol = null;
  78. };
  79. TimeGridEventRenderer.prototype.computeSegSizes = function (allSegs) {
  80. var _a = this, timeGrid = _a.timeGrid, segsByCol = _a.segsByCol;
  81. var colCnt = timeGrid.colCnt;
  82. timeGrid.computeSegVerticals(allSegs); // horizontals relies on this
  83. if (segsByCol) {
  84. for (var col = 0; col < colCnt; col++) {
  85. this.computeSegHorizontals(segsByCol[col]); // compute horizontal coordinates, z-index's, and reorder the array
  86. }
  87. }
  88. };
  89. TimeGridEventRenderer.prototype.assignSegSizes = function (allSegs) {
  90. var _a = this, timeGrid = _a.timeGrid, segsByCol = _a.segsByCol;
  91. var colCnt = timeGrid.colCnt;
  92. timeGrid.assignSegVerticals(allSegs); // horizontals relies on this
  93. if (segsByCol) {
  94. for (var col = 0; col < colCnt; col++) {
  95. this.assignSegCss(segsByCol[col]);
  96. }
  97. }
  98. };
  99. // Computes a default event time formatting string if `eventTimeFormat` is not explicitly defined
  100. TimeGridEventRenderer.prototype.computeEventTimeFormat = function () {
  101. return {
  102. hour: 'numeric',
  103. minute: '2-digit',
  104. meridiem: false
  105. };
  106. };
  107. // Computes a default `displayEventEnd` value if one is not expliclty defined
  108. TimeGridEventRenderer.prototype.computeDisplayEventEnd = function () {
  109. return true;
  110. };
  111. // Renders the HTML for a single event segment's default rendering
  112. TimeGridEventRenderer.prototype.renderSegHtml = function (seg, mirrorInfo) {
  113. var view = this.context.view;
  114. var eventRange = seg.eventRange;
  115. var eventDef = eventRange.def;
  116. var eventUi = eventRange.ui;
  117. var allDay = eventDef.allDay;
  118. var isDraggable = view.computeEventDraggable(eventDef, eventUi);
  119. var isResizableFromStart = seg.isStart && view.computeEventStartResizable(eventDef, eventUi);
  120. var isResizableFromEnd = seg.isEnd && view.computeEventEndResizable(eventDef, eventUi);
  121. var classes = this.getSegClasses(seg, isDraggable, isResizableFromStart || isResizableFromEnd, mirrorInfo);
  122. var skinCss = core.cssToStr(this.getSkinCss(eventUi));
  123. var timeText;
  124. var fullTimeText; // more verbose time text. for the print stylesheet
  125. var startTimeText; // just the start time text
  126. classes.unshift('fc-time-grid-event');
  127. // if the event appears to span more than one day...
  128. if (core.isMultiDayRange(eventRange.range)) {
  129. // Don't display time text on segments that run entirely through a day.
  130. // That would appear as midnight-midnight and would look dumb.
  131. // Otherwise, display the time text for the *segment's* times (like 6pm-midnight or midnight-10am)
  132. if (seg.isStart || seg.isEnd) {
  133. var unzonedStart = seg.start;
  134. var unzonedEnd = seg.end;
  135. timeText = this._getTimeText(unzonedStart, unzonedEnd, allDay); // TODO: give the timezones
  136. fullTimeText = this._getTimeText(unzonedStart, unzonedEnd, allDay, this.fullTimeFormat);
  137. startTimeText = this._getTimeText(unzonedStart, unzonedEnd, allDay, null, false); // displayEnd=false
  138. }
  139. }
  140. else {
  141. // Display the normal time text for the *event's* times
  142. timeText = this.getTimeText(eventRange);
  143. fullTimeText = this.getTimeText(eventRange, this.fullTimeFormat);
  144. startTimeText = this.getTimeText(eventRange, null, false); // displayEnd=false
  145. }
  146. return '<a class="' + classes.join(' ') + '"' +
  147. (eventDef.url ?
  148. ' href="' + core.htmlEscape(eventDef.url) + '"' :
  149. '') +
  150. (skinCss ?
  151. ' style="' + skinCss + '"' :
  152. '') +
  153. '>' +
  154. '<div class="fc-content">' +
  155. (timeText ?
  156. '<div class="fc-time"' +
  157. ' data-start="' + core.htmlEscape(startTimeText) + '"' +
  158. ' data-full="' + core.htmlEscape(fullTimeText) + '"' +
  159. '>' +
  160. '<span>' + core.htmlEscape(timeText) + '</span>' +
  161. '</div>' :
  162. '') +
  163. (eventDef.title ?
  164. '<div class="fc-title">' +
  165. core.htmlEscape(eventDef.title) +
  166. '</div>' :
  167. '') +
  168. '</div>' +
  169. /* TODO: write CSS for this
  170. (isResizableFromStart ?
  171. '<div class="fc-resizer fc-start-resizer"></div>' :
  172. ''
  173. ) +
  174. */
  175. (isResizableFromEnd ?
  176. '<div class="fc-resizer fc-end-resizer"></div>' :
  177. '') +
  178. '</a>';
  179. };
  180. // Given an array of segments that are all in the same column, sets the backwardCoord and forwardCoord on each.
  181. // Assumed the segs are already ordered.
  182. // NOTE: Also reorders the given array by date!
  183. TimeGridEventRenderer.prototype.computeSegHorizontals = function (segs) {
  184. var levels;
  185. var level0;
  186. var i;
  187. levels = buildSlotSegLevels(segs);
  188. computeForwardSlotSegs(levels);
  189. if ((level0 = levels[0])) {
  190. for (i = 0; i < level0.length; i++) {
  191. computeSlotSegPressures(level0[i]);
  192. }
  193. for (i = 0; i < level0.length; i++) {
  194. this.computeSegForwardBack(level0[i], 0, 0);
  195. }
  196. }
  197. };
  198. // Calculate seg.forwardCoord and seg.backwardCoord for the segment, where both values range
  199. // from 0 to 1. If the calendar is left-to-right, the seg.backwardCoord maps to "left" and
  200. // seg.forwardCoord maps to "right" (via percentage). Vice-versa if the calendar is right-to-left.
  201. //
  202. // The segment might be part of a "series", which means consecutive segments with the same pressure
  203. // who's width is unknown until an edge has been hit. `seriesBackwardPressure` is the number of
  204. // segments behind this one in the current series, and `seriesBackwardCoord` is the starting
  205. // coordinate of the first segment in the series.
  206. TimeGridEventRenderer.prototype.computeSegForwardBack = function (seg, seriesBackwardPressure, seriesBackwardCoord) {
  207. var forwardSegs = seg.forwardSegs;
  208. var i;
  209. if (seg.forwardCoord === undefined) { // not already computed
  210. if (!forwardSegs.length) {
  211. // if there are no forward segments, this segment should butt up against the edge
  212. seg.forwardCoord = 1;
  213. }
  214. else {
  215. // sort highest pressure first
  216. this.sortForwardSegs(forwardSegs);
  217. // this segment's forwardCoord will be calculated from the backwardCoord of the
  218. // highest-pressure forward segment.
  219. this.computeSegForwardBack(forwardSegs[0], seriesBackwardPressure + 1, seriesBackwardCoord);
  220. seg.forwardCoord = forwardSegs[0].backwardCoord;
  221. }
  222. // calculate the backwardCoord from the forwardCoord. consider the series
  223. seg.backwardCoord = seg.forwardCoord -
  224. (seg.forwardCoord - seriesBackwardCoord) / // available width for series
  225. (seriesBackwardPressure + 1); // # of segments in the series
  226. // use this segment's coordinates to computed the coordinates of the less-pressurized
  227. // forward segments
  228. for (i = 0; i < forwardSegs.length; i++) {
  229. this.computeSegForwardBack(forwardSegs[i], 0, seg.forwardCoord);
  230. }
  231. }
  232. };
  233. TimeGridEventRenderer.prototype.sortForwardSegs = function (forwardSegs) {
  234. var objs = forwardSegs.map(buildTimeGridSegCompareObj);
  235. var specs = [
  236. // put higher-pressure first
  237. { field: 'forwardPressure', order: -1 },
  238. // put segments that are closer to initial edge first (and favor ones with no coords yet)
  239. { field: 'backwardCoord', order: 1 }
  240. ].concat(this.context.view.eventOrderSpecs);
  241. objs.sort(function (obj0, obj1) {
  242. return core.compareByFieldSpecs(obj0, obj1, specs);
  243. });
  244. return objs.map(function (c) {
  245. return c._seg;
  246. });
  247. };
  248. // Given foreground event segments that have already had their position coordinates computed,
  249. // assigns position-related CSS values to their elements.
  250. TimeGridEventRenderer.prototype.assignSegCss = function (segs) {
  251. for (var _i = 0, segs_1 = segs; _i < segs_1.length; _i++) {
  252. var seg = segs_1[_i];
  253. core.applyStyle(seg.el, this.generateSegCss(seg));
  254. if (seg.level > 0) {
  255. seg.el.classList.add('fc-time-grid-event-inset');
  256. }
  257. // if the event is short that the title will be cut off,
  258. // attach a className that condenses the title into the time area.
  259. if (seg.eventRange.def.title && seg.bottom - seg.top < 30) {
  260. seg.el.classList.add('fc-short'); // TODO: "condensed" is a better name
  261. }
  262. }
  263. };
  264. // Generates an object with CSS properties/values that should be applied to an event segment element.
  265. // Contains important positioning-related properties that should be applied to any event element, customized or not.
  266. TimeGridEventRenderer.prototype.generateSegCss = function (seg) {
  267. var shouldOverlap = this.context.options.slotEventOverlap;
  268. var backwardCoord = seg.backwardCoord; // the left side if LTR. the right side if RTL. floating-point
  269. var forwardCoord = seg.forwardCoord; // the right side if LTR. the left side if RTL. floating-point
  270. var props = this.timeGrid.generateSegVerticalCss(seg); // get top/bottom first
  271. var isRtl = this.timeGrid.isRtl;
  272. var left; // amount of space from left edge, a fraction of the total width
  273. var right; // amount of space from right edge, a fraction of the total width
  274. if (shouldOverlap) {
  275. // double the width, but don't go beyond the maximum forward coordinate (1.0)
  276. forwardCoord = Math.min(1, backwardCoord + (forwardCoord - backwardCoord) * 2);
  277. }
  278. if (isRtl) {
  279. left = 1 - forwardCoord;
  280. right = backwardCoord;
  281. }
  282. else {
  283. left = backwardCoord;
  284. right = 1 - forwardCoord;
  285. }
  286. props.zIndex = seg.level + 1; // convert from 0-base to 1-based
  287. props.left = left * 100 + '%';
  288. props.right = right * 100 + '%';
  289. if (shouldOverlap && seg.forwardPressure) {
  290. // add padding to the edge so that forward stacked events don't cover the resizer's icon
  291. props[isRtl ? 'marginLeft' : 'marginRight'] = 10 * 2; // 10 is a guesstimate of the icon's width
  292. }
  293. return props;
  294. };
  295. return TimeGridEventRenderer;
  296. }(core.FgEventRenderer));
  297. // Builds an array of segments "levels". The first level will be the leftmost tier of segments if the calendar is
  298. // left-to-right, or the rightmost if the calendar is right-to-left. Assumes the segments are already ordered by date.
  299. function buildSlotSegLevels(segs) {
  300. var levels = [];
  301. var i;
  302. var seg;
  303. var j;
  304. for (i = 0; i < segs.length; i++) {
  305. seg = segs[i];
  306. // go through all the levels and stop on the first level where there are no collisions
  307. for (j = 0; j < levels.length; j++) {
  308. if (!computeSlotSegCollisions(seg, levels[j]).length) {
  309. break;
  310. }
  311. }
  312. seg.level = j;
  313. (levels[j] || (levels[j] = [])).push(seg);
  314. }
  315. return levels;
  316. }
  317. // For every segment, figure out the other segments that are in subsequent
  318. // levels that also occupy the same vertical space. Accumulate in seg.forwardSegs
  319. function computeForwardSlotSegs(levels) {
  320. var i;
  321. var level;
  322. var j;
  323. var seg;
  324. var k;
  325. for (i = 0; i < levels.length; i++) {
  326. level = levels[i];
  327. for (j = 0; j < level.length; j++) {
  328. seg = level[j];
  329. seg.forwardSegs = [];
  330. for (k = i + 1; k < levels.length; k++) {
  331. computeSlotSegCollisions(seg, levels[k], seg.forwardSegs);
  332. }
  333. }
  334. }
  335. }
  336. // Figure out which path forward (via seg.forwardSegs) results in the longest path until
  337. // the furthest edge is reached. The number of segments in this path will be seg.forwardPressure
  338. function computeSlotSegPressures(seg) {
  339. var forwardSegs = seg.forwardSegs;
  340. var forwardPressure = 0;
  341. var i;
  342. var forwardSeg;
  343. if (seg.forwardPressure === undefined) { // not already computed
  344. for (i = 0; i < forwardSegs.length; i++) {
  345. forwardSeg = forwardSegs[i];
  346. // figure out the child's maximum forward path
  347. computeSlotSegPressures(forwardSeg);
  348. // either use the existing maximum, or use the child's forward pressure
  349. // plus one (for the forwardSeg itself)
  350. forwardPressure = Math.max(forwardPressure, 1 + forwardSeg.forwardPressure);
  351. }
  352. seg.forwardPressure = forwardPressure;
  353. }
  354. }
  355. // Find all the segments in `otherSegs` that vertically collide with `seg`.
  356. // Append into an optionally-supplied `results` array and return.
  357. function computeSlotSegCollisions(seg, otherSegs, results) {
  358. if (results === void 0) { results = []; }
  359. for (var i = 0; i < otherSegs.length; i++) {
  360. if (isSlotSegCollision(seg, otherSegs[i])) {
  361. results.push(otherSegs[i]);
  362. }
  363. }
  364. return results;
  365. }
  366. // Do these segments occupy the same vertical space?
  367. function isSlotSegCollision(seg1, seg2) {
  368. return seg1.bottom > seg2.top && seg1.top < seg2.bottom;
  369. }
  370. function buildTimeGridSegCompareObj(seg) {
  371. var obj = core.buildSegCompareObj(seg);
  372. obj.forwardPressure = seg.forwardPressure;
  373. obj.backwardCoord = seg.backwardCoord;
  374. return obj;
  375. }
  376. var TimeGridMirrorRenderer = /** @class */ (function (_super) {
  377. __extends(TimeGridMirrorRenderer, _super);
  378. function TimeGridMirrorRenderer() {
  379. return _super !== null && _super.apply(this, arguments) || this;
  380. }
  381. TimeGridMirrorRenderer.prototype.attachSegs = function (segs, mirrorInfo) {
  382. this.segsByCol = this.timeGrid.groupSegsByCol(segs);
  383. this.timeGrid.attachSegsByCol(this.segsByCol, this.timeGrid.mirrorContainerEls);
  384. this.sourceSeg = mirrorInfo.sourceSeg;
  385. };
  386. TimeGridMirrorRenderer.prototype.generateSegCss = function (seg) {
  387. var props = _super.prototype.generateSegCss.call(this, seg);
  388. var sourceSeg = this.sourceSeg;
  389. if (sourceSeg && sourceSeg.col === seg.col) {
  390. var sourceSegProps = _super.prototype.generateSegCss.call(this, sourceSeg);
  391. props.left = sourceSegProps.left;
  392. props.right = sourceSegProps.right;
  393. props.marginLeft = sourceSegProps.marginLeft;
  394. props.marginRight = sourceSegProps.marginRight;
  395. }
  396. return props;
  397. };
  398. return TimeGridMirrorRenderer;
  399. }(TimeGridEventRenderer));
  400. var TimeGridFillRenderer = /** @class */ (function (_super) {
  401. __extends(TimeGridFillRenderer, _super);
  402. function TimeGridFillRenderer(timeGrid) {
  403. var _this = _super.call(this, timeGrid.context) || this;
  404. _this.timeGrid = timeGrid;
  405. return _this;
  406. }
  407. TimeGridFillRenderer.prototype.attachSegs = function (type, segs) {
  408. var timeGrid = this.timeGrid;
  409. var containerEls;
  410. // TODO: more efficient lookup
  411. if (type === 'bgEvent') {
  412. containerEls = timeGrid.bgContainerEls;
  413. }
  414. else if (type === 'businessHours') {
  415. containerEls = timeGrid.businessContainerEls;
  416. }
  417. else if (type === 'highlight') {
  418. containerEls = timeGrid.highlightContainerEls;
  419. }
  420. timeGrid.attachSegsByCol(timeGrid.groupSegsByCol(segs), containerEls);
  421. return segs.map(function (seg) {
  422. return seg.el;
  423. });
  424. };
  425. TimeGridFillRenderer.prototype.computeSegSizes = function (segs) {
  426. this.timeGrid.computeSegVerticals(segs);
  427. };
  428. TimeGridFillRenderer.prototype.assignSegSizes = function (segs) {
  429. this.timeGrid.assignSegVerticals(segs);
  430. };
  431. return TimeGridFillRenderer;
  432. }(core.FillRenderer));
  433. /* A component that renders one or more columns of vertical time slots
  434. ----------------------------------------------------------------------------------------------------------------------*/
  435. // potential nice values for the slot-duration and interval-duration
  436. // from largest to smallest
  437. var AGENDA_STOCK_SUB_DURATIONS = [
  438. { hours: 1 },
  439. { minutes: 30 },
  440. { minutes: 15 },
  441. { seconds: 30 },
  442. { seconds: 15 }
  443. ];
  444. var TimeGrid = /** @class */ (function (_super) {
  445. __extends(TimeGrid, _super);
  446. function TimeGrid(context, el, renderProps) {
  447. var _this = _super.call(this, context, el) || this;
  448. _this.isSlatSizesDirty = false;
  449. _this.isColSizesDirty = false;
  450. _this.renderSlats = core.memoizeRendering(_this._renderSlats);
  451. var eventRenderer = _this.eventRenderer = new TimeGridEventRenderer(_this);
  452. var fillRenderer = _this.fillRenderer = new TimeGridFillRenderer(_this);
  453. _this.mirrorRenderer = new TimeGridMirrorRenderer(_this);
  454. var renderColumns = _this.renderColumns = core.memoizeRendering(_this._renderColumns, _this._unrenderColumns);
  455. _this.renderBusinessHours = core.memoizeRendering(fillRenderer.renderSegs.bind(fillRenderer, 'businessHours'), fillRenderer.unrender.bind(fillRenderer, 'businessHours'), [renderColumns]);
  456. _this.renderDateSelection = core.memoizeRendering(_this._renderDateSelection, _this._unrenderDateSelection, [renderColumns]);
  457. _this.renderFgEvents = core.memoizeRendering(eventRenderer.renderSegs.bind(eventRenderer), eventRenderer.unrender.bind(eventRenderer), [renderColumns]);
  458. _this.renderBgEvents = core.memoizeRendering(fillRenderer.renderSegs.bind(fillRenderer, 'bgEvent'), fillRenderer.unrender.bind(fillRenderer, 'bgEvent'), [renderColumns]);
  459. _this.renderEventSelection = core.memoizeRendering(eventRenderer.selectByInstanceId.bind(eventRenderer), eventRenderer.unselectByInstanceId.bind(eventRenderer), [_this.renderFgEvents]);
  460. _this.renderEventDrag = core.memoizeRendering(_this._renderEventDrag, _this._unrenderEventDrag, [renderColumns]);
  461. _this.renderEventResize = core.memoizeRendering(_this._renderEventResize, _this._unrenderEventResize, [renderColumns]);
  462. _this.processOptions();
  463. el.innerHTML =
  464. '<div class="fc-bg"></div>' +
  465. '<div class="fc-slats"></div>' +
  466. '<hr class="fc-divider ' + _this.theme.getClass('widgetHeader') + '" style="display:none" />';
  467. _this.rootBgContainerEl = el.querySelector('.fc-bg');
  468. _this.slatContainerEl = el.querySelector('.fc-slats');
  469. _this.bottomRuleEl = el.querySelector('.fc-divider');
  470. _this.renderProps = renderProps;
  471. return _this;
  472. }
  473. /* Options
  474. ------------------------------------------------------------------------------------------------------------------*/
  475. // Parses various options into properties of this object
  476. TimeGrid.prototype.processOptions = function () {
  477. var slotDuration = this.opt('slotDuration');
  478. var snapDuration = this.opt('snapDuration');
  479. var snapsPerSlot;
  480. var input;
  481. slotDuration = core.createDuration(slotDuration);
  482. snapDuration = snapDuration ? core.createDuration(snapDuration) : slotDuration;
  483. snapsPerSlot = core.wholeDivideDurations(slotDuration, snapDuration);
  484. if (snapsPerSlot === null) {
  485. snapDuration = slotDuration;
  486. snapsPerSlot = 1;
  487. // TODO: say warning?
  488. }
  489. this.slotDuration = slotDuration;
  490. this.snapDuration = snapDuration;
  491. this.snapsPerSlot = snapsPerSlot;
  492. // might be an array value (for TimelineView).
  493. // if so, getting the most granular entry (the last one probably).
  494. input = this.opt('slotLabelFormat');
  495. if (Array.isArray(input)) {
  496. input = input[input.length - 1];
  497. }
  498. this.labelFormat = core.createFormatter(input || {
  499. hour: 'numeric',
  500. minute: '2-digit',
  501. omitZeroMinute: true,
  502. meridiem: 'short'
  503. });
  504. input = this.opt('slotLabelInterval');
  505. this.labelInterval = input ?
  506. core.createDuration(input) :
  507. this.computeLabelInterval(slotDuration);
  508. };
  509. // Computes an automatic value for slotLabelInterval
  510. TimeGrid.prototype.computeLabelInterval = function (slotDuration) {
  511. var i;
  512. var labelInterval;
  513. var slotsPerLabel;
  514. // find the smallest stock label interval that results in more than one slots-per-label
  515. for (i = AGENDA_STOCK_SUB_DURATIONS.length - 1; i >= 0; i--) {
  516. labelInterval = core.createDuration(AGENDA_STOCK_SUB_DURATIONS[i]);
  517. slotsPerLabel = core.wholeDivideDurations(labelInterval, slotDuration);
  518. if (slotsPerLabel !== null && slotsPerLabel > 1) {
  519. return labelInterval;
  520. }
  521. }
  522. return slotDuration; // fall back
  523. };
  524. /* Rendering
  525. ------------------------------------------------------------------------------------------------------------------*/
  526. TimeGrid.prototype.render = function (props) {
  527. var cells = props.cells;
  528. this.colCnt = cells.length;
  529. this.renderSlats(props.dateProfile);
  530. this.renderColumns(props.cells, props.dateProfile);
  531. this.renderBusinessHours(props.businessHourSegs);
  532. this.renderDateSelection(props.dateSelectionSegs);
  533. this.renderFgEvents(props.fgEventSegs);
  534. this.renderBgEvents(props.bgEventSegs);
  535. this.renderEventSelection(props.eventSelection);
  536. this.renderEventDrag(props.eventDrag);
  537. this.renderEventResize(props.eventResize);
  538. };
  539. TimeGrid.prototype.destroy = function () {
  540. _super.prototype.destroy.call(this);
  541. // should unrender everything else too
  542. this.renderSlats.unrender();
  543. this.renderColumns.unrender();
  544. };
  545. TimeGrid.prototype.updateSize = function (isResize) {
  546. var _a = this, fillRenderer = _a.fillRenderer, eventRenderer = _a.eventRenderer, mirrorRenderer = _a.mirrorRenderer;
  547. if (isResize || this.isSlatSizesDirty) {
  548. this.buildSlatPositions();
  549. this.isSlatSizesDirty = false;
  550. }
  551. if (isResize || this.isColSizesDirty) {
  552. this.buildColPositions();
  553. this.isColSizesDirty = false;
  554. }
  555. fillRenderer.computeSizes(isResize);
  556. eventRenderer.computeSizes(isResize);
  557. mirrorRenderer.computeSizes(isResize);
  558. fillRenderer.assignSizes(isResize);
  559. eventRenderer.assignSizes(isResize);
  560. mirrorRenderer.assignSizes(isResize);
  561. };
  562. TimeGrid.prototype._renderSlats = function (dateProfile) {
  563. var theme = this.theme;
  564. this.slatContainerEl.innerHTML =
  565. '<table class="' + theme.getClass('tableGrid') + '">' +
  566. this.renderSlatRowHtml(dateProfile) +
  567. '</table>';
  568. this.slatEls = core.findElements(this.slatContainerEl, 'tr');
  569. this.slatPositions = new core.PositionCache(this.el, this.slatEls, false, true // vertical
  570. );
  571. this.isSlatSizesDirty = true;
  572. };
  573. // Generates the HTML for the horizontal "slats" that run width-wise. Has a time axis on a side. Depends on RTL.
  574. TimeGrid.prototype.renderSlatRowHtml = function (dateProfile) {
  575. var _a = this, dateEnv = _a.dateEnv, theme = _a.theme, isRtl = _a.isRtl;
  576. var html = '';
  577. var dayStart = core.startOfDay(dateProfile.renderRange.start);
  578. var slotTime = dateProfile.minTime;
  579. var slotIterator = core.createDuration(0);
  580. var slotDate; // will be on the view's first day, but we only care about its time
  581. var isLabeled;
  582. var axisHtml;
  583. // Calculate the time for each slot
  584. while (core.asRoughMs(slotTime) < core.asRoughMs(dateProfile.maxTime)) {
  585. slotDate = dateEnv.add(dayStart, slotTime);
  586. isLabeled = core.wholeDivideDurations(slotIterator, this.labelInterval) !== null;
  587. axisHtml =
  588. '<td class="fc-axis fc-time ' + theme.getClass('widgetContent') + '">' +
  589. (isLabeled ?
  590. '<span>' + // for matchCellWidths
  591. core.htmlEscape(dateEnv.format(slotDate, this.labelFormat)) +
  592. '</span>' :
  593. '') +
  594. '</td>';
  595. html +=
  596. '<tr data-time="' + core.formatIsoTimeString(slotDate) + '"' +
  597. (isLabeled ? '' : ' class="fc-minor"') +
  598. '>' +
  599. (!isRtl ? axisHtml : '') +
  600. '<td class="' + theme.getClass('widgetContent') + '"></td>' +
  601. (isRtl ? axisHtml : '') +
  602. '</tr>';
  603. slotTime = core.addDurations(slotTime, this.slotDuration);
  604. slotIterator = core.addDurations(slotIterator, this.slotDuration);
  605. }
  606. return html;
  607. };
  608. TimeGrid.prototype._renderColumns = function (cells, dateProfile) {
  609. var _a = this, theme = _a.theme, dateEnv = _a.dateEnv, view = _a.view;
  610. var bgRow = new daygrid.DayBgRow(this.context);
  611. this.rootBgContainerEl.innerHTML =
  612. '<table class="' + theme.getClass('tableGrid') + '">' +
  613. bgRow.renderHtml({
  614. cells: cells,
  615. dateProfile: dateProfile,
  616. renderIntroHtml: this.renderProps.renderBgIntroHtml
  617. }) +
  618. '</table>';
  619. this.colEls = core.findElements(this.el, '.fc-day, .fc-disabled-day');
  620. for (var col = 0; col < this.colCnt; col++) {
  621. this.publiclyTrigger('dayRender', [
  622. {
  623. date: dateEnv.toDate(cells[col].date),
  624. el: this.colEls[col],
  625. view: view
  626. }
  627. ]);
  628. }
  629. if (this.isRtl) {
  630. this.colEls.reverse();
  631. }
  632. this.colPositions = new core.PositionCache(this.el, this.colEls, true, // horizontal
  633. false);
  634. this.renderContentSkeleton();
  635. this.isColSizesDirty = true;
  636. };
  637. TimeGrid.prototype._unrenderColumns = function () {
  638. this.unrenderContentSkeleton();
  639. };
  640. /* Content Skeleton
  641. ------------------------------------------------------------------------------------------------------------------*/
  642. // Renders the DOM that the view's content will live in
  643. TimeGrid.prototype.renderContentSkeleton = function () {
  644. var parts = [];
  645. var skeletonEl;
  646. parts.push(this.renderProps.renderIntroHtml());
  647. for (var i = 0; i < this.colCnt; i++) {
  648. parts.push('<td>' +
  649. '<div class="fc-content-col">' +
  650. '<div class="fc-event-container fc-mirror-container"></div>' +
  651. '<div class="fc-event-container"></div>' +
  652. '<div class="fc-highlight-container"></div>' +
  653. '<div class="fc-bgevent-container"></div>' +
  654. '<div class="fc-business-container"></div>' +
  655. '</div>' +
  656. '</td>');
  657. }
  658. if (this.isRtl) {
  659. parts.reverse();
  660. }
  661. skeletonEl = this.contentSkeletonEl = core.htmlToElement('<div class="fc-content-skeleton">' +
  662. '<table>' +
  663. '<tr>' + parts.join('') + '</tr>' +
  664. '</table>' +
  665. '</div>');
  666. this.colContainerEls = core.findElements(skeletonEl, '.fc-content-col');
  667. this.mirrorContainerEls = core.findElements(skeletonEl, '.fc-mirror-container');
  668. this.fgContainerEls = core.findElements(skeletonEl, '.fc-event-container:not(.fc-mirror-container)');
  669. this.bgContainerEls = core.findElements(skeletonEl, '.fc-bgevent-container');
  670. this.highlightContainerEls = core.findElements(skeletonEl, '.fc-highlight-container');
  671. this.businessContainerEls = core.findElements(skeletonEl, '.fc-business-container');
  672. if (this.isRtl) {
  673. this.colContainerEls.reverse();
  674. this.mirrorContainerEls.reverse();
  675. this.fgContainerEls.reverse();
  676. this.bgContainerEls.reverse();
  677. this.highlightContainerEls.reverse();
  678. this.businessContainerEls.reverse();
  679. }
  680. this.el.appendChild(skeletonEl);
  681. };
  682. TimeGrid.prototype.unrenderContentSkeleton = function () {
  683. core.removeElement(this.contentSkeletonEl);
  684. };
  685. // Given a flat array of segments, return an array of sub-arrays, grouped by each segment's col
  686. TimeGrid.prototype.groupSegsByCol = function (segs) {
  687. var segsByCol = [];
  688. var i;
  689. for (i = 0; i < this.colCnt; i++) {
  690. segsByCol.push([]);
  691. }
  692. for (i = 0; i < segs.length; i++) {
  693. segsByCol[segs[i].col].push(segs[i]);
  694. }
  695. return segsByCol;
  696. };
  697. // Given segments grouped by column, insert the segments' elements into a parallel array of container
  698. // elements, each living within a column.
  699. TimeGrid.prototype.attachSegsByCol = function (segsByCol, containerEls) {
  700. var col;
  701. var segs;
  702. var i;
  703. for (col = 0; col < this.colCnt; col++) { // iterate each column grouping
  704. segs = segsByCol[col];
  705. for (i = 0; i < segs.length; i++) {
  706. containerEls[col].appendChild(segs[i].el);
  707. }
  708. }
  709. };
  710. /* Now Indicator
  711. ------------------------------------------------------------------------------------------------------------------*/
  712. TimeGrid.prototype.getNowIndicatorUnit = function () {
  713. return 'minute'; // will refresh on the minute
  714. };
  715. TimeGrid.prototype.renderNowIndicator = function (segs, date) {
  716. // HACK: if date columns not ready for some reason (scheduler)
  717. if (!this.colContainerEls) {
  718. return;
  719. }
  720. var top = this.computeDateTop(date);
  721. var nodes = [];
  722. var i;
  723. // render lines within the columns
  724. for (i = 0; i < segs.length; i++) {
  725. var lineEl = core.createElement('div', { className: 'fc-now-indicator fc-now-indicator-line' });
  726. lineEl.style.top = top + 'px';
  727. this.colContainerEls[segs[i].col].appendChild(lineEl);
  728. nodes.push(lineEl);
  729. }
  730. // render an arrow over the axis
  731. if (segs.length > 0) { // is the current time in view?
  732. var arrowEl = core.createElement('div', { className: 'fc-now-indicator fc-now-indicator-arrow' });
  733. arrowEl.style.top = top + 'px';
  734. this.contentSkeletonEl.appendChild(arrowEl);
  735. nodes.push(arrowEl);
  736. }
  737. this.nowIndicatorEls = nodes;
  738. };
  739. TimeGrid.prototype.unrenderNowIndicator = function () {
  740. if (this.nowIndicatorEls) {
  741. this.nowIndicatorEls.forEach(core.removeElement);
  742. this.nowIndicatorEls = null;
  743. }
  744. };
  745. /* Coordinates
  746. ------------------------------------------------------------------------------------------------------------------*/
  747. TimeGrid.prototype.getTotalSlatHeight = function () {
  748. return this.slatContainerEl.getBoundingClientRect().height;
  749. };
  750. // Computes the top coordinate, relative to the bounds of the grid, of the given date.
  751. // A `startOfDayDate` must be given for avoiding ambiguity over how to treat midnight.
  752. TimeGrid.prototype.computeDateTop = function (when, startOfDayDate) {
  753. if (!startOfDayDate) {
  754. startOfDayDate = core.startOfDay(when);
  755. }
  756. return this.computeTimeTop(core.createDuration(when.valueOf() - startOfDayDate.valueOf()));
  757. };
  758. // Computes the top coordinate, relative to the bounds of the grid, of the given time (a Duration).
  759. TimeGrid.prototype.computeTimeTop = function (duration) {
  760. var len = this.slatEls.length;
  761. var dateProfile = this.props.dateProfile;
  762. var slatCoverage = (duration.milliseconds - core.asRoughMs(dateProfile.minTime)) / core.asRoughMs(this.slotDuration); // floating-point value of # of slots covered
  763. var slatIndex;
  764. var slatRemainder;
  765. // compute a floating-point number for how many slats should be progressed through.
  766. // from 0 to number of slats (inclusive)
  767. // constrained because minTime/maxTime might be customized.
  768. slatCoverage = Math.max(0, slatCoverage);
  769. slatCoverage = Math.min(len, slatCoverage);
  770. // an integer index of the furthest whole slat
  771. // from 0 to number slats (*exclusive*, so len-1)
  772. slatIndex = Math.floor(slatCoverage);
  773. slatIndex = Math.min(slatIndex, len - 1);
  774. // how much further through the slatIndex slat (from 0.0-1.0) must be covered in addition.
  775. // could be 1.0 if slatCoverage is covering *all* the slots
  776. slatRemainder = slatCoverage - slatIndex;
  777. return this.slatPositions.tops[slatIndex] +
  778. this.slatPositions.getHeight(slatIndex) * slatRemainder;
  779. };
  780. // For each segment in an array, computes and assigns its top and bottom properties
  781. TimeGrid.prototype.computeSegVerticals = function (segs) {
  782. var eventMinHeight = this.opt('timeGridEventMinHeight');
  783. var i;
  784. var seg;
  785. var dayDate;
  786. for (i = 0; i < segs.length; i++) {
  787. seg = segs[i];
  788. dayDate = this.props.cells[seg.col].date;
  789. seg.top = this.computeDateTop(seg.start, dayDate);
  790. seg.bottom = Math.max(seg.top + eventMinHeight, this.computeDateTop(seg.end, dayDate));
  791. }
  792. };
  793. // Given segments that already have their top/bottom properties computed, applies those values to
  794. // the segments' elements.
  795. TimeGrid.prototype.assignSegVerticals = function (segs) {
  796. var i;
  797. var seg;
  798. for (i = 0; i < segs.length; i++) {
  799. seg = segs[i];
  800. core.applyStyle(seg.el, this.generateSegVerticalCss(seg));
  801. }
  802. };
  803. // Generates an object with CSS properties for the top/bottom coordinates of a segment element
  804. TimeGrid.prototype.generateSegVerticalCss = function (seg) {
  805. return {
  806. top: seg.top,
  807. bottom: -seg.bottom // flipped because needs to be space beyond bottom edge of event container
  808. };
  809. };
  810. /* Sizing
  811. ------------------------------------------------------------------------------------------------------------------*/
  812. TimeGrid.prototype.buildPositionCaches = function () {
  813. this.buildColPositions();
  814. this.buildSlatPositions();
  815. };
  816. TimeGrid.prototype.buildColPositions = function () {
  817. this.colPositions.build();
  818. };
  819. TimeGrid.prototype.buildSlatPositions = function () {
  820. this.slatPositions.build();
  821. };
  822. /* Hit System
  823. ------------------------------------------------------------------------------------------------------------------*/
  824. TimeGrid.prototype.positionToHit = function (positionLeft, positionTop) {
  825. var _a = this, dateEnv = _a.dateEnv, snapsPerSlot = _a.snapsPerSlot, slatPositions = _a.slatPositions, colPositions = _a.colPositions;
  826. var colIndex = colPositions.leftToIndex(positionLeft);
  827. var slatIndex = slatPositions.topToIndex(positionTop);
  828. if (colIndex != null && slatIndex != null) {
  829. var slatTop = slatPositions.tops[slatIndex];
  830. var slatHeight = slatPositions.getHeight(slatIndex);
  831. var partial = (positionTop - slatTop) / slatHeight; // floating point number between 0 and 1
  832. var localSnapIndex = Math.floor(partial * snapsPerSlot); // the snap # relative to start of slat
  833. var snapIndex = slatIndex * snapsPerSlot + localSnapIndex;
  834. var dayDate = this.props.cells[colIndex].date;
  835. var time = core.addDurations(this.props.dateProfile.minTime, core.multiplyDuration(this.snapDuration, snapIndex));
  836. var start = dateEnv.add(dayDate, time);
  837. var end = dateEnv.add(start, this.snapDuration);
  838. return {
  839. col: colIndex,
  840. dateSpan: {
  841. range: { start: start, end: end },
  842. allDay: false
  843. },
  844. dayEl: this.colEls[colIndex],
  845. relativeRect: {
  846. left: colPositions.lefts[colIndex],
  847. right: colPositions.rights[colIndex],
  848. top: slatTop,
  849. bottom: slatTop + slatHeight
  850. }
  851. };
  852. }
  853. };
  854. /* Event Drag Visualization
  855. ------------------------------------------------------------------------------------------------------------------*/
  856. TimeGrid.prototype._renderEventDrag = function (state) {
  857. if (state) {
  858. this.eventRenderer.hideByHash(state.affectedInstances);
  859. if (state.isEvent) {
  860. this.mirrorRenderer.renderSegs(state.segs, { isDragging: true, sourceSeg: state.sourceSeg });
  861. }
  862. else {
  863. this.fillRenderer.renderSegs('highlight', state.segs);
  864. }
  865. }
  866. };
  867. TimeGrid.prototype._unrenderEventDrag = function (state) {
  868. if (state) {
  869. this.eventRenderer.showByHash(state.affectedInstances);
  870. this.mirrorRenderer.unrender(state.segs, { isDragging: true, sourceSeg: state.sourceSeg });
  871. this.fillRenderer.unrender('highlight');
  872. }
  873. };
  874. /* Event Resize Visualization
  875. ------------------------------------------------------------------------------------------------------------------*/
  876. TimeGrid.prototype._renderEventResize = function (state) {
  877. if (state) {
  878. this.eventRenderer.hideByHash(state.affectedInstances);
  879. this.mirrorRenderer.renderSegs(state.segs, { isResizing: true, sourceSeg: state.sourceSeg });
  880. }
  881. };
  882. TimeGrid.prototype._unrenderEventResize = function (state) {
  883. if (state) {
  884. this.eventRenderer.showByHash(state.affectedInstances);
  885. this.mirrorRenderer.unrender(state.segs, { isResizing: true, sourceSeg: state.sourceSeg });
  886. }
  887. };
  888. /* Selection
  889. ------------------------------------------------------------------------------------------------------------------*/
  890. // Renders a visual indication of a selection. Overrides the default, which was to simply render a highlight.
  891. TimeGrid.prototype._renderDateSelection = function (segs) {
  892. if (segs) {
  893. if (this.opt('selectMirror')) {
  894. this.mirrorRenderer.renderSegs(segs, { isSelecting: true });
  895. }
  896. else {
  897. this.fillRenderer.renderSegs('highlight', segs);
  898. }
  899. }
  900. };
  901. TimeGrid.prototype._unrenderDateSelection = function (segs) {
  902. this.mirrorRenderer.unrender(segs, { isSelecting: true });
  903. this.fillRenderer.unrender('highlight');
  904. };
  905. return TimeGrid;
  906. }(core.DateComponent));
  907. var AllDaySplitter = /** @class */ (function (_super) {
  908. __extends(AllDaySplitter, _super);
  909. function AllDaySplitter() {
  910. return _super !== null && _super.apply(this, arguments) || this;
  911. }
  912. AllDaySplitter.prototype.getKeyInfo = function () {
  913. return {
  914. allDay: {},
  915. timed: {}
  916. };
  917. };
  918. AllDaySplitter.prototype.getKeysForDateSpan = function (dateSpan) {
  919. if (dateSpan.allDay) {
  920. return ['allDay'];
  921. }
  922. else {
  923. return ['timed'];
  924. }
  925. };
  926. AllDaySplitter.prototype.getKeysForEventDef = function (eventDef) {
  927. if (!eventDef.allDay) {
  928. return ['timed'];
  929. }
  930. else if (core.hasBgRendering(eventDef)) {
  931. return ['timed', 'allDay'];
  932. }
  933. else {
  934. return ['allDay'];
  935. }
  936. };
  937. return AllDaySplitter;
  938. }(core.Splitter));
  939. var TIMEGRID_ALL_DAY_EVENT_LIMIT = 5;
  940. var WEEK_HEADER_FORMAT = core.createFormatter({ week: 'short' });
  941. /* An abstract class for all timegrid-related views. Displays one more columns with time slots running vertically.
  942. ----------------------------------------------------------------------------------------------------------------------*/
  943. // Is a manager for the TimeGrid subcomponent and possibly the DayGrid subcomponent (if allDaySlot is on).
  944. // Responsible for managing width/height.
  945. var TimeGridView = /** @class */ (function (_super) {
  946. __extends(TimeGridView, _super);
  947. function TimeGridView(context, viewSpec, dateProfileGenerator, parentEl) {
  948. var _this = _super.call(this, context, viewSpec, dateProfileGenerator, parentEl) || this;
  949. _this.splitter = new AllDaySplitter();
  950. /* Header Render Methods
  951. ------------------------------------------------------------------------------------------------------------------*/
  952. // Generates the HTML that will go before the day-of week header cells
  953. _this.renderHeadIntroHtml = function () {
  954. var _a = _this, theme = _a.theme, dateEnv = _a.dateEnv;
  955. var range = _this.props.dateProfile.renderRange;
  956. var dayCnt = core.diffDays(range.start, range.end);
  957. var weekText;
  958. if (_this.opt('weekNumbers')) {
  959. weekText = dateEnv.format(range.start, WEEK_HEADER_FORMAT);
  960. return '' +
  961. '<th class="fc-axis fc-week-number ' + theme.getClass('widgetHeader') + '" ' + _this.axisStyleAttr() + '>' +
  962. core.buildGotoAnchorHtml(// aside from link, important for matchCellWidths
  963. _this, { date: range.start, type: 'week', forceOff: dayCnt > 1 }, core.htmlEscape(weekText) // inner HTML
  964. ) +
  965. '</th>';
  966. }
  967. else {
  968. return '<th class="fc-axis ' + theme.getClass('widgetHeader') + '" ' + _this.axisStyleAttr() + '></th>';
  969. }
  970. };
  971. /* Time Grid Render Methods
  972. ------------------------------------------------------------------------------------------------------------------*/
  973. // Generates the HTML that goes before the bg of the TimeGrid slot area. Long vertical column.
  974. _this.renderTimeGridBgIntroHtml = function () {
  975. var theme = _this.theme;
  976. return '<td class="fc-axis ' + theme.getClass('widgetContent') + '" ' + _this.axisStyleAttr() + '></td>';
  977. };
  978. // Generates the HTML that goes before all other types of cells.
  979. // Affects content-skeleton, mirror-skeleton, highlight-skeleton for both the time-grid and day-grid.
  980. _this.renderTimeGridIntroHtml = function () {
  981. return '<td class="fc-axis" ' + _this.axisStyleAttr() + '></td>';
  982. };
  983. /* Day Grid Render Methods
  984. ------------------------------------------------------------------------------------------------------------------*/
  985. // Generates the HTML that goes before the all-day cells
  986. _this.renderDayGridBgIntroHtml = function () {
  987. var theme = _this.theme;
  988. return '' +
  989. '<td class="fc-axis ' + theme.getClass('widgetContent') + '" ' + _this.axisStyleAttr() + '>' +
  990. '<span>' + // needed for matchCellWidths
  991. core.getAllDayHtml(_this) +
  992. '</span>' +
  993. '</td>';
  994. };
  995. // Generates the HTML that goes before all other types of cells.
  996. // Affects content-skeleton, mirror-skeleton, highlight-skeleton for both the time-grid and day-grid.
  997. _this.renderDayGridIntroHtml = function () {
  998. return '<td class="fc-axis" ' + _this.axisStyleAttr() + '></td>';
  999. };
  1000. _this.el.classList.add('fc-timeGrid-view');
  1001. _this.el.innerHTML = _this.renderSkeletonHtml();
  1002. _this.scroller = new core.ScrollComponent('hidden', // overflow x
  1003. 'auto' // overflow y
  1004. );
  1005. var timeGridWrapEl = _this.scroller.el;
  1006. _this.el.querySelector('.fc-body > tr > td').appendChild(timeGridWrapEl);
  1007. timeGridWrapEl.classList.add('fc-time-grid-container');
  1008. var timeGridEl = core.createElement('div', { className: 'fc-time-grid' });
  1009. timeGridWrapEl.appendChild(timeGridEl);
  1010. _this.timeGrid = new TimeGrid(_this.context, timeGridEl, {
  1011. renderBgIntroHtml: _this.renderTimeGridBgIntroHtml,
  1012. renderIntroHtml: _this.renderTimeGridIntroHtml
  1013. });
  1014. if (_this.opt('allDaySlot')) { // should we display the "all-day" area?
  1015. _this.dayGrid = new daygrid.DayGrid(// the all-day subcomponent of this view
  1016. _this.context, _this.el.querySelector('.fc-day-grid'), {
  1017. renderNumberIntroHtml: _this.renderDayGridIntroHtml,
  1018. renderBgIntroHtml: _this.renderDayGridBgIntroHtml,
  1019. renderIntroHtml: _this.renderDayGridIntroHtml,
  1020. colWeekNumbersVisible: false,
  1021. cellWeekNumbersVisible: false
  1022. });
  1023. // have the day-grid extend it's coordinate area over the <hr> dividing the two grids
  1024. var dividerEl = _this.el.querySelector('.fc-divider');
  1025. _this.dayGrid.bottomCoordPadding = dividerEl.getBoundingClientRect().height;
  1026. }
  1027. return _this;
  1028. }
  1029. TimeGridView.prototype.destroy = function () {
  1030. _super.prototype.destroy.call(this);
  1031. this.timeGrid.destroy();
  1032. if (this.dayGrid) {
  1033. this.dayGrid.destroy();
  1034. }
  1035. this.scroller.destroy();
  1036. };
  1037. /* Rendering
  1038. ------------------------------------------------------------------------------------------------------------------*/
  1039. // Builds the HTML skeleton for the view.
  1040. // The day-grid and time-grid components will render inside containers defined by this HTML.
  1041. TimeGridView.prototype.renderSkeletonHtml = function () {
  1042. var theme = this.theme;
  1043. return '' +
  1044. '<table class="' + theme.getClass('tableGrid') + '">' +
  1045. (this.opt('columnHeader') ?
  1046. '<thead class="fc-head">' +
  1047. '<tr>' +
  1048. '<td class="fc-head-container ' + theme.getClass('widgetHeader') + '">&nbsp;</td>' +
  1049. '</tr>' +
  1050. '</thead>' :
  1051. '') +
  1052. '<tbody class="fc-body">' +
  1053. '<tr>' +
  1054. '<td class="' + theme.getClass('widgetContent') + '">' +
  1055. (this.opt('allDaySlot') ?
  1056. '<div class="fc-day-grid"></div>' +
  1057. '<hr class="fc-divider ' + theme.getClass('widgetHeader') + '" />' :
  1058. '') +
  1059. '</td>' +
  1060. '</tr>' +
  1061. '</tbody>' +
  1062. '</table>';
  1063. };
  1064. /* Now Indicator
  1065. ------------------------------------------------------------------------------------------------------------------*/
  1066. TimeGridView.prototype.getNowIndicatorUnit = function () {
  1067. return this.timeGrid.getNowIndicatorUnit();
  1068. };
  1069. // subclasses should implement
  1070. // renderNowIndicator(date: DateMarker) {
  1071. // }
  1072. TimeGridView.prototype.unrenderNowIndicator = function () {
  1073. this.timeGrid.unrenderNowIndicator();
  1074. };
  1075. /* Dimensions
  1076. ------------------------------------------------------------------------------------------------------------------*/
  1077. TimeGridView.prototype.updateSize = function (isResize, viewHeight, isAuto) {
  1078. _super.prototype.updateSize.call(this, isResize, viewHeight, isAuto); // will call updateBaseSize. important that executes first
  1079. this.timeGrid.updateSize(isResize);
  1080. if (this.dayGrid) {
  1081. this.dayGrid.updateSize(isResize);
  1082. }
  1083. };
  1084. // Adjusts the vertical dimensions of the view to the specified values
  1085. TimeGridView.prototype.updateBaseSize = function (isResize, viewHeight, isAuto) {
  1086. var _this = this;
  1087. var eventLimit;
  1088. var scrollerHeight;
  1089. var scrollbarWidths;
  1090. // make all axis cells line up
  1091. this.axisWidth = core.matchCellWidths(core.findElements(this.el, '.fc-axis'));
  1092. // hack to give the view some height prior to timeGrid's columns being rendered
  1093. // TODO: separate setting height from scroller VS timeGrid.
  1094. if (!this.timeGrid.colEls) {
  1095. if (!isAuto) {
  1096. scrollerHeight = this.computeScrollerHeight(viewHeight);
  1097. this.scroller.setHeight(scrollerHeight);
  1098. }
  1099. return;
  1100. }
  1101. // set of fake row elements that must compensate when scroller has scrollbars
  1102. var noScrollRowEls = core.findElements(this.el, '.fc-row').filter(function (node) {
  1103. return !_this.scroller.el.contains(node);
  1104. });
  1105. // reset all dimensions back to the original state
  1106. this.timeGrid.bottomRuleEl.style.display = 'none'; // will be shown later if this <hr> is necessary
  1107. this.scroller.clear(); // sets height to 'auto' and clears overflow
  1108. noScrollRowEls.forEach(core.uncompensateScroll);
  1109. // limit number of events in the all-day area
  1110. if (this.dayGrid) {
  1111. this.dayGrid.removeSegPopover(); // kill the "more" popover if displayed
  1112. eventLimit = this.opt('eventLimit');
  1113. if (eventLimit && typeof eventLimit !== 'number') {
  1114. eventLimit = TIMEGRID_ALL_DAY_EVENT_LIMIT; // make sure "auto" goes to a real number
  1115. }
  1116. if (eventLimit) {
  1117. this.dayGrid.limitRows(eventLimit);
  1118. }
  1119. }
  1120. if (!isAuto) { // should we force dimensions of the scroll container?
  1121. scrollerHeight = this.computeScrollerHeight(viewHeight);
  1122. this.scroller.setHeight(scrollerHeight);
  1123. scrollbarWidths = this.scroller.getScrollbarWidths();
  1124. if (scrollbarWidths.left || scrollbarWidths.right) { // using scrollbars?
  1125. // make the all-day and header rows lines up
  1126. noScrollRowEls.forEach(function (rowEl) {
  1127. core.compensateScroll(rowEl, scrollbarWidths);
  1128. });
  1129. // the scrollbar compensation might have changed text flow, which might affect height, so recalculate
  1130. // and reapply the desired height to the scroller.
  1131. scrollerHeight = this.computeScrollerHeight(viewHeight);
  1132. this.scroller.setHeight(scrollerHeight);
  1133. }
  1134. // guarantees the same scrollbar widths
  1135. this.scroller.lockOverflow(scrollbarWidths);
  1136. // if there's any space below the slats, show the horizontal rule.
  1137. // this won't cause any new overflow, because lockOverflow already called.
  1138. if (this.timeGrid.getTotalSlatHeight() < scrollerHeight) {
  1139. this.timeGrid.bottomRuleEl.style.display = '';
  1140. }
  1141. }
  1142. };
  1143. // given a desired total height of the view, returns what the height of the scroller should be
  1144. TimeGridView.prototype.computeScrollerHeight = function (viewHeight) {
  1145. return viewHeight -
  1146. core.subtractInnerElHeight(this.el, this.scroller.el); // everything that's NOT the scroller
  1147. };
  1148. /* Scroll
  1149. ------------------------------------------------------------------------------------------------------------------*/
  1150. // Computes the initial pre-configured scroll state prior to allowing the user to change it
  1151. TimeGridView.prototype.computeDateScroll = function (duration) {
  1152. var top = this.timeGrid.computeTimeTop(duration);
  1153. // zoom can give weird floating-point values. rather scroll a little bit further
  1154. top = Math.ceil(top);
  1155. if (top) {
  1156. top++; // to overcome top border that slots beyond the first have. looks better
  1157. }
  1158. return { top: top };
  1159. };
  1160. TimeGridView.prototype.queryDateScroll = function () {
  1161. return { top: this.scroller.getScrollTop() };
  1162. };
  1163. TimeGridView.prototype.applyDateScroll = function (scroll) {
  1164. if (scroll.top !== undefined) {
  1165. this.scroller.setScrollTop(scroll.top);
  1166. }
  1167. };
  1168. // Generates an HTML attribute string for setting the width of the axis, if it is known
  1169. TimeGridView.prototype.axisStyleAttr = function () {
  1170. if (this.axisWidth != null) {
  1171. return 'style="width:' + this.axisWidth + 'px"';
  1172. }
  1173. return '';
  1174. };
  1175. return TimeGridView;
  1176. }(core.View));
  1177. TimeGridView.prototype.usesMinMaxTime = true; // indicates that minTime/maxTime affects rendering
  1178. var SimpleTimeGrid = /** @class */ (function (_super) {
  1179. __extends(SimpleTimeGrid, _super);
  1180. function SimpleTimeGrid(context, timeGrid) {
  1181. var _this = _super.call(this, context, timeGrid.el) || this;
  1182. _this.buildDayRanges = core.memoize(buildDayRanges);
  1183. _this.slicer = new TimeGridSlicer();
  1184. _this.timeGrid = timeGrid;
  1185. context.calendar.registerInteractiveComponent(_this, {
  1186. el: _this.timeGrid.el
  1187. });
  1188. return _this;
  1189. }
  1190. SimpleTimeGrid.prototype.destroy = function () {
  1191. _super.prototype.destroy.call(this);
  1192. this.calendar.unregisterInteractiveComponent(this);
  1193. };
  1194. SimpleTimeGrid.prototype.render = function (props) {
  1195. var dateProfile = props.dateProfile, dayTable = props.dayTable;
  1196. var dayRanges = this.dayRanges = this.buildDayRanges(dayTable, dateProfile, this.dateEnv);
  1197. this.timeGrid.receiveProps(__assign({}, this.slicer.sliceProps(props, dateProfile, null, this.timeGrid, dayRanges), { dateProfile: dateProfile, cells: dayTable.cells[0] }));
  1198. };
  1199. SimpleTimeGrid.prototype.renderNowIndicator = function (date) {
  1200. this.timeGrid.renderNowIndicator(this.slicer.sliceNowDate(date, this.timeGrid, this.dayRanges), date);
  1201. };
  1202. SimpleTimeGrid.prototype.buildPositionCaches = function () {
  1203. this.timeGrid.buildPositionCaches();
  1204. };
  1205. SimpleTimeGrid.prototype.queryHit = function (positionLeft, positionTop) {
  1206. var rawHit = this.timeGrid.positionToHit(positionLeft, positionTop);
  1207. if (rawHit) {
  1208. return {
  1209. component: this.timeGrid,
  1210. dateSpan: rawHit.dateSpan,
  1211. dayEl: rawHit.dayEl,
  1212. rect: {
  1213. left: rawHit.relativeRect.left,
  1214. right: rawHit.relativeRect.right,
  1215. top: rawHit.relativeRect.top,
  1216. bottom: rawHit.relativeRect.bottom
  1217. },
  1218. layer: 0
  1219. };
  1220. }
  1221. };
  1222. return SimpleTimeGrid;
  1223. }(core.DateComponent));
  1224. function buildDayRanges(dayTable, dateProfile, dateEnv) {
  1225. var ranges = [];
  1226. for (var _i = 0, _a = dayTable.headerDates; _i < _a.length; _i++) {
  1227. var date = _a[_i];
  1228. ranges.push({
  1229. start: dateEnv.add(date, dateProfile.minTime),
  1230. end: dateEnv.add(date, dateProfile.maxTime)
  1231. });
  1232. }
  1233. return ranges;
  1234. }
  1235. var TimeGridSlicer = /** @class */ (function (_super) {
  1236. __extends(TimeGridSlicer, _super);
  1237. function TimeGridSlicer() {
  1238. return _super !== null && _super.apply(this, arguments) || this;
  1239. }
  1240. TimeGridSlicer.prototype.sliceRange = function (range, dayRanges) {
  1241. var segs = [];
  1242. for (var col = 0; col < dayRanges.length; col++) {
  1243. var segRange = core.intersectRanges(range, dayRanges[col]);
  1244. if (segRange) {
  1245. segs.push({
  1246. start: segRange.start,
  1247. end: segRange.end,
  1248. isStart: segRange.start.valueOf() === range.start.valueOf(),
  1249. isEnd: segRange.end.valueOf() === range.end.valueOf(),
  1250. col: col
  1251. });
  1252. }
  1253. }
  1254. return segs;
  1255. };
  1256. return TimeGridSlicer;
  1257. }(core.Slicer));
  1258. var TimeGridView$1 = /** @class */ (function (_super) {
  1259. __extends(TimeGridView, _super);
  1260. function TimeGridView(_context, viewSpec, dateProfileGenerator, parentEl) {
  1261. var _this = _super.call(this, _context, viewSpec, dateProfileGenerator, parentEl) || this;
  1262. _this.buildDayTable = core.memoize(buildDayTable);
  1263. if (_this.opt('columnHeader')) {
  1264. _this.header = new core.DayHeader(_this.context, _this.el.querySelector('.fc-head-container'));
  1265. }
  1266. _this.simpleTimeGrid = new SimpleTimeGrid(_this.context, _this.timeGrid);
  1267. if (_this.dayGrid) {
  1268. _this.simpleDayGrid = new daygrid.SimpleDayGrid(_this.context, _this.dayGrid);
  1269. }
  1270. return _this;
  1271. }
  1272. TimeGridView.prototype.destroy = function () {
  1273. _super.prototype.destroy.call(this);
  1274. if (this.header) {
  1275. this.header.destroy();
  1276. }
  1277. this.simpleTimeGrid.destroy();
  1278. if (this.simpleDayGrid) {
  1279. this.simpleDayGrid.destroy();
  1280. }
  1281. };
  1282. TimeGridView.prototype.render = function (props) {
  1283. _super.prototype.render.call(this, props); // for flags for updateSize
  1284. var dateProfile = this.props.dateProfile;
  1285. var dayTable = this.buildDayTable(dateProfile, this.dateProfileGenerator);
  1286. var splitProps = this.splitter.splitProps(props);
  1287. if (this.header) {
  1288. this.header.receiveProps({
  1289. dateProfile: dateProfile,
  1290. dates: dayTable.headerDates,
  1291. datesRepDistinctDays: true,
  1292. renderIntroHtml: this.renderHeadIntroHtml
  1293. });
  1294. }
  1295. this.simpleTimeGrid.receiveProps(__assign({}, splitProps['timed'], { dateProfile: dateProfile,
  1296. dayTable: dayTable }));
  1297. if (this.simpleDayGrid) {
  1298. this.simpleDayGrid.receiveProps(__assign({}, splitProps['allDay'], { dateProfile: dateProfile,
  1299. dayTable: dayTable, nextDayThreshold: this.nextDayThreshold, isRigid: false }));
  1300. }
  1301. };
  1302. TimeGridView.prototype.renderNowIndicator = function (date) {
  1303. this.simpleTimeGrid.renderNowIndicator(date);
  1304. };
  1305. return TimeGridView;
  1306. }(TimeGridView));
  1307. function buildDayTable(dateProfile, dateProfileGenerator) {
  1308. var daySeries = new core.DaySeries(dateProfile.renderRange, dateProfileGenerator);
  1309. return new core.DayTable(daySeries, false);
  1310. }
  1311. var main = core.createPlugin({
  1312. defaultView: 'timeGridWeek',
  1313. views: {
  1314. timeGrid: {
  1315. class: TimeGridView$1,
  1316. allDaySlot: true,
  1317. slotDuration: '00:30:00',
  1318. slotEventOverlap: true // a bad name. confused with overlap/constraint system
  1319. },
  1320. timeGridDay: {
  1321. type: 'timeGrid',
  1322. duration: { days: 1 }
  1323. },
  1324. timeGridWeek: {
  1325. type: 'timeGrid',
  1326. duration: { weeks: 1 }
  1327. }
  1328. }
  1329. });
  1330. exports.AbstractTimeGridView = TimeGridView;
  1331. exports.TimeGrid = TimeGrid;
  1332. exports.TimeGridSlicer = TimeGridSlicer;
  1333. exports.TimeGridView = TimeGridView$1;
  1334. exports.buildDayRanges = buildDayRanges;
  1335. exports.buildDayTable = buildDayTable;
  1336. exports.default = main;
  1337. Object.defineProperty(exports, '__esModule', { value: true });
  1338. }));