main.js 67 KB

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