/*! FullCalendar Day Grid Plugin v4.4.2 Docs & License: https://fullcalendar.io/ (c) 2019 Adam Shaw */ import { addWeeks, diffWeeks, DateProfileGenerator, createElement, listenBySelector, removeElement, computeRect, computeClippingRect, applyStyle, computeEventDraggable, computeEventStartResizable, computeEventEndResizable, cssToStr, htmlEscape, FgEventRenderer, appendToElement, prependToElement, htmlToElement, FillRenderer, memoizeRendering, createFormatter, addDays, DateComponent, rangeContainsMarker, getDayClasses, findElements, PositionCache, buildGotoAnchorHtml, findChildren, insertAfterElement, intersectRanges, memoize, ScrollComponent, matchCellWidths, uncompensateScroll, compensateScroll, subtractInnerElHeight, distributeHeight, undistributeHeight, View, Slicer, DayHeader, DaySeries, DayTable, createPlugin } from '@fullcalendar/core'; /*! ***************************************************************************** Copyright (c) Microsoft Corporation. Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. ***************************************************************************** */ /* global Reflect, Promise */ var extendStatics = function(d, b) { extendStatics = Object.setPrototypeOf || ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; return extendStatics(d, b); }; function __extends(d, b) { extendStatics(d, b); function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); } var __assign = function() { __assign = Object.assign || function __assign(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } return t; }; return __assign.apply(this, arguments); }; var DayGridDateProfileGenerator = /** @class */ (function (_super) { __extends(DayGridDateProfileGenerator, _super); function DayGridDateProfileGenerator() { return _super !== null && _super.apply(this, arguments) || this; } // Computes the date range that will be rendered. DayGridDateProfileGenerator.prototype.buildRenderRange = function (currentRange, currentRangeUnit, isRangeAllDay) { var dateEnv = this.dateEnv; var renderRange = _super.prototype.buildRenderRange.call(this, currentRange, currentRangeUnit, isRangeAllDay); var start = renderRange.start; var end = renderRange.end; var endOfWeek; // year and month views should be aligned with weeks. this is already done for week if (/^(year|month)$/.test(currentRangeUnit)) { start = dateEnv.startOfWeek(start); // make end-of-week if not already endOfWeek = dateEnv.startOfWeek(end); if (endOfWeek.valueOf() !== end.valueOf()) { end = addWeeks(endOfWeek, 1); } } // ensure 6 weeks if (this.options.monthMode && this.options.fixedWeekCount) { var rowCnt = Math.ceil(// could be partial weeks due to hiddenDays diffWeeks(start, end)); end = addWeeks(end, 6 - rowCnt); } return { start: start, end: end }; }; return DayGridDateProfileGenerator; }(DateProfileGenerator)); /* A rectangular panel that is absolutely positioned over other content ------------------------------------------------------------------------------------------------------------------------ Options: - className (string) - content (HTML string, element, or element array) - parentEl - top - left - right (the x coord of where the right edge should be. not a "CSS" right) - autoHide (boolean) - show (callback) - hide (callback) */ var Popover = /** @class */ (function () { function Popover(options) { var _this = this; this.isHidden = true; this.margin = 10; // the space required between the popover and the edges of the scroll container // Triggered when the user clicks *anywhere* in the document, for the autoHide feature this.documentMousedown = function (ev) { // only hide the popover if the click happened outside the popover if (_this.el && !_this.el.contains(ev.target)) { _this.hide(); } }; this.options = options; } // Shows the popover on the specified position. Renders it if not already Popover.prototype.show = function () { if (this.isHidden) { if (!this.el) { this.render(); } this.el.style.display = ''; this.position(); this.isHidden = false; this.trigger('show'); } }; // Hides the popover, through CSS, but does not remove it from the DOM Popover.prototype.hide = function () { if (!this.isHidden) { this.el.style.display = 'none'; this.isHidden = true; this.trigger('hide'); } }; // Creates `this.el` and renders content inside of it Popover.prototype.render = function () { var _this = this; var options = this.options; var el = this.el = createElement('div', { className: 'fc-popover ' + (options.className || ''), style: { top: '0', left: '0' } }); if (typeof options.content === 'function') { options.content(el); } options.parentEl.appendChild(el); // when a click happens on anything inside with a 'fc-close' className, hide the popover listenBySelector(el, 'click', '.fc-close', function (ev) { _this.hide(); }); if (options.autoHide) { document.addEventListener('mousedown', this.documentMousedown); } }; // Hides and unregisters any handlers Popover.prototype.destroy = function () { this.hide(); if (this.el) { removeElement(this.el); this.el = null; } document.removeEventListener('mousedown', this.documentMousedown); }; // Positions the popover optimally, using the top/left/right options Popover.prototype.position = function () { var options = this.options; var el = this.el; var elDims = el.getBoundingClientRect(); // only used for width,height var origin = computeRect(el.offsetParent); var clippingRect = computeClippingRect(options.parentEl); var top; // the "position" (not "offset") values for the popover var left; // // compute top and left top = options.top || 0; if (options.left !== undefined) { left = options.left; } else if (options.right !== undefined) { left = options.right - elDims.width; // derive the left value from the right value } else { left = 0; } // constrain to the view port. if constrained by two edges, give precedence to top/left top = Math.min(top, clippingRect.bottom - elDims.height - this.margin); top = Math.max(top, clippingRect.top + this.margin); left = Math.min(left, clippingRect.right - elDims.width - this.margin); left = Math.max(left, clippingRect.left + this.margin); applyStyle(el, { top: top - origin.top, left: left - origin.left }); }; // Triggers a callback. Calls a function in the option hash of the same name. // Arguments beyond the first `name` are forwarded on. // TODO: better code reuse for this. Repeat code // can kill this??? Popover.prototype.trigger = function (name) { if (this.options[name]) { this.options[name].apply(this, Array.prototype.slice.call(arguments, 1)); } }; return Popover; }()); /* Event-rendering methods for the DayGrid class ----------------------------------------------------------------------------------------------------------------------*/ // "Simple" is bad a name. has nothing to do with SimpleDayGrid var SimpleDayGridEventRenderer = /** @class */ (function (_super) { __extends(SimpleDayGridEventRenderer, _super); function SimpleDayGridEventRenderer() { return _super !== null && _super.apply(this, arguments) || this; } // Builds the HTML to be used for the default element for an individual segment SimpleDayGridEventRenderer.prototype.renderSegHtml = function (seg, mirrorInfo) { var context = this.context; var eventRange = seg.eventRange; var eventDef = eventRange.def; var eventUi = eventRange.ui; var allDay = eventDef.allDay; var isDraggable = computeEventDraggable(context, eventDef, eventUi); var isResizableFromStart = allDay && seg.isStart && computeEventStartResizable(context, eventDef, eventUi); var isResizableFromEnd = allDay && seg.isEnd && computeEventEndResizable(context, eventDef, eventUi); var classes = this.getSegClasses(seg, isDraggable, isResizableFromStart || isResizableFromEnd, mirrorInfo); var skinCss = cssToStr(this.getSkinCss(eventUi)); var timeHtml = ''; var timeText; var titleHtml; classes.unshift('fc-day-grid-event', 'fc-h-event'); // Only display a timed events time if it is the starting segment if (seg.isStart) { timeText = this.getTimeText(eventRange); if (timeText) { timeHtml = '' + htmlEscape(timeText) + ''; } } titleHtml = '' + (htmlEscape(eventDef.title || '') || ' ') + // we always want one line of height ''; return '' + '
' + (context.options.dir === 'rtl' ? titleHtml + ' ' + timeHtml : // put a natural space in between timeHtml + ' ' + titleHtml // ) + '
' + (isResizableFromStart ? '
' : '') + (isResizableFromEnd ? '
' : '') + '
'; }; // Computes a default event time formatting string if `eventTimeFormat` is not explicitly defined SimpleDayGridEventRenderer.prototype.computeEventTimeFormat = function () { return { hour: 'numeric', minute: '2-digit', omitZeroMinute: true, meridiem: 'narrow' }; }; SimpleDayGridEventRenderer.prototype.computeDisplayEventEnd = function () { return false; // TODO: somehow consider the originating DayGrid's column count }; return SimpleDayGridEventRenderer; }(FgEventRenderer)); /* Event-rendering methods for the DayGrid class ----------------------------------------------------------------------------------------------------------------------*/ var DayGridEventRenderer = /** @class */ (function (_super) { __extends(DayGridEventRenderer, _super); function DayGridEventRenderer(dayGrid) { var _this = _super.call(this) || this; _this.dayGrid = dayGrid; return _this; } // Renders the given foreground event segments onto the grid DayGridEventRenderer.prototype.attachSegs = function (segs, mirrorInfo) { var rowStructs = this.rowStructs = this.renderSegRows(segs); // append to each row's content skeleton this.dayGrid.rowEls.forEach(function (rowNode, i) { rowNode.querySelector('.fc-content-skeleton > table').appendChild(rowStructs[i].tbodyEl); }); // removes the "more.." events popover if (!mirrorInfo) { this.dayGrid.removeSegPopover(); } }; // Unrenders all currently rendered foreground event segments DayGridEventRenderer.prototype.detachSegs = function () { var rowStructs = this.rowStructs || []; var rowStruct; while ((rowStruct = rowStructs.pop())) { removeElement(rowStruct.tbodyEl); } this.rowStructs = null; }; // Uses the given events array to generate elements that should be appended to each row's content skeleton. // Returns an array of rowStruct objects (see the bottom of `renderSegRow`). // PRECONDITION: each segment shoud already have a rendered and assigned `.el` DayGridEventRenderer.prototype.renderSegRows = function (segs) { var rowStructs = []; var segRows; var row; segRows = this.groupSegRows(segs); // group into nested arrays // iterate each row of segment groupings for (row = 0; row < segRows.length; row++) { rowStructs.push(this.renderSegRow(row, segRows[row])); } return rowStructs; }; // Given a row # and an array of segments all in the same row, render a element, a skeleton that contains // the segments. Returns object with a bunch of internal data about how the render was calculated. // NOTE: modifies rowSegs DayGridEventRenderer.prototype.renderSegRow = function (row, rowSegs) { var isRtl = this.context.isRtl; var dayGrid = this.dayGrid; var colCnt = dayGrid.colCnt; var segLevels = this.buildSegLevels(rowSegs); // group into sub-arrays of levels var levelCnt = Math.max(1, segLevels.length); // ensure at least one level var tbody = document.createElement('tbody'); var segMatrix = []; // lookup for which segments are rendered into which level+col cells var cellMatrix = []; // lookup for all elements of the level+col matrix var loneCellMatrix = []; // lookup for elements that only take up a single column var i; var levelSegs; var col; var tr; var j; var seg; var td; // populates empty cells from the current column (`col`) to `endCol` function emptyCellsUntil(endCol) { while (col < endCol) { // try to grab a cell from the level above and extend its rowspan. otherwise, create a fresh cell td = (loneCellMatrix[i - 1] || [])[col]; if (td) { td.rowSpan = (td.rowSpan || 1) + 1; } else { td = document.createElement('td'); tr.appendChild(td); } cellMatrix[i][col] = td; loneCellMatrix[i][col] = td; col++; } } for (i = 0; i < levelCnt; i++) { // iterate through all levels levelSegs = segLevels[i]; col = 0; tr = document.createElement('tr'); segMatrix.push([]); cellMatrix.push([]); loneCellMatrix.push([]); // levelCnt might be 1 even though there are no actual levels. protect against this. // this single empty row is useful for styling. if (levelSegs) { for (j = 0; j < levelSegs.length; j++) { // iterate through segments in level seg = levelSegs[j]; var leftCol = isRtl ? (colCnt - 1 - seg.lastCol) : seg.firstCol; var rightCol = isRtl ? (colCnt - 1 - seg.firstCol) : seg.lastCol; emptyCellsUntil(leftCol); // create a container that occupies or more columns. append the event element. td = createElement('td', { className: 'fc-event-container' }, seg.el); if (leftCol !== rightCol) { td.colSpan = rightCol - leftCol + 1; } else { // a single-column segment loneCellMatrix[i][col] = td; } while (col <= rightCol) { cellMatrix[i][col] = td; segMatrix[i][col] = seg; col++; } tr.appendChild(td); } } emptyCellsUntil(colCnt); // finish off the row var introHtml = dayGrid.renderProps.renderIntroHtml(); if (introHtml) { if (isRtl) { appendToElement(tr, introHtml); } else { prependToElement(tr, introHtml); } } tbody.appendChild(tr); } return { row: row, tbodyEl: tbody, cellMatrix: cellMatrix, segMatrix: segMatrix, segLevels: segLevels, segs: rowSegs }; }; // Stacks a flat array of segments, which are all assumed to be in the same row, into subarrays of vertical levels. // NOTE: modifies segs DayGridEventRenderer.prototype.buildSegLevels = function (segs) { var isRtl = this.context.isRtl; var colCnt = this.dayGrid.colCnt; var levels = []; var i; var seg; var j; // Give preference to elements with certain criteria, so they have // a chance to be closer to the top. segs = this.sortEventSegs(segs); for (i = 0; i < segs.length; i++) { seg = segs[i]; // loop through levels, starting with the topmost, until the segment doesn't collide with other segments for (j = 0; j < levels.length; j++) { if (!isDaySegCollision(seg, levels[j])) { break; } } // `j` now holds the desired subrow index seg.level = j; seg.leftCol = isRtl ? (colCnt - 1 - seg.lastCol) : seg.firstCol; // for sorting only seg.rightCol = isRtl ? (colCnt - 1 - seg.firstCol) : seg.lastCol // for sorting only ; (levels[j] || (levels[j] = [])).push(seg); } // order segments left-to-right. very important if calendar is RTL for (j = 0; j < levels.length; j++) { levels[j].sort(compareDaySegCols); } return levels; }; // Given a flat array of segments, return an array of sub-arrays, grouped by each segment's row DayGridEventRenderer.prototype.groupSegRows = function (segs) { var segRows = []; var i; for (i = 0; i < this.dayGrid.rowCnt; i++) { segRows.push([]); } for (i = 0; i < segs.length; i++) { segRows[segs[i].row].push(segs[i]); } return segRows; }; // Computes a default `displayEventEnd` value if one is not expliclty defined DayGridEventRenderer.prototype.computeDisplayEventEnd = function () { return this.dayGrid.colCnt === 1; // we'll likely have space if there's only one day }; return DayGridEventRenderer; }(SimpleDayGridEventRenderer)); // Computes whether two segments' columns collide. They are assumed to be in the same row. function isDaySegCollision(seg, otherSegs) { var i; var otherSeg; for (i = 0; i < otherSegs.length; i++) { otherSeg = otherSegs[i]; if (otherSeg.firstCol <= seg.lastCol && otherSeg.lastCol >= seg.firstCol) { return true; } } return false; } // A cmp function for determining the leftmost event function compareDaySegCols(a, b) { return a.leftCol - b.leftCol; } var DayGridMirrorRenderer = /** @class */ (function (_super) { __extends(DayGridMirrorRenderer, _super); function DayGridMirrorRenderer() { return _super !== null && _super.apply(this, arguments) || this; } DayGridMirrorRenderer.prototype.attachSegs = function (segs, mirrorInfo) { var sourceSeg = mirrorInfo.sourceSeg; var rowStructs = this.rowStructs = this.renderSegRows(segs); // inject each new event skeleton into each associated row this.dayGrid.rowEls.forEach(function (rowNode, row) { var skeletonEl = htmlToElement('
'); // will be absolutely positioned var skeletonTopEl; var skeletonTop; // If there is an original segment, match the top position. Otherwise, put it at the row's top level if (sourceSeg && sourceSeg.row === row) { skeletonTopEl = sourceSeg.el; } else { skeletonTopEl = rowNode.querySelector('.fc-content-skeleton tbody'); if (!skeletonTopEl) { // when no events skeletonTopEl = rowNode.querySelector('.fc-content-skeleton table'); } } skeletonTop = skeletonTopEl.getBoundingClientRect().top - rowNode.getBoundingClientRect().top; // the offsetParent origin skeletonEl.style.top = skeletonTop + 'px'; skeletonEl.querySelector('table').appendChild(rowStructs[row].tbodyEl); rowNode.appendChild(skeletonEl); }); }; return DayGridMirrorRenderer; }(DayGridEventRenderer)); var EMPTY_CELL_HTML = ''; var DayGridFillRenderer = /** @class */ (function (_super) { __extends(DayGridFillRenderer, _super); function DayGridFillRenderer(dayGrid) { var _this = _super.call(this) || this; _this.fillSegTag = 'td'; // override the default tag name _this.dayGrid = dayGrid; return _this; } DayGridFillRenderer.prototype.renderSegs = function (type, context, segs) { // don't render timed background events if (type === 'bgEvent') { segs = segs.filter(function (seg) { return seg.eventRange.def.allDay; }); } _super.prototype.renderSegs.call(this, type, context, segs); }; DayGridFillRenderer.prototype.attachSegs = function (type, segs) { var els = []; var i; var seg; var skeletonEl; for (i = 0; i < segs.length; i++) { seg = segs[i]; skeletonEl = this.renderFillRow(type, seg); this.dayGrid.rowEls[seg.row].appendChild(skeletonEl); els.push(skeletonEl); } return els; }; // Generates the HTML needed for one row of a fill. Requires the seg's el to be rendered. DayGridFillRenderer.prototype.renderFillRow = function (type, seg) { var dayGrid = this.dayGrid; var isRtl = this.context.isRtl; var colCnt = dayGrid.colCnt; var leftCol = isRtl ? (colCnt - 1 - seg.lastCol) : seg.firstCol; var rightCol = isRtl ? (colCnt - 1 - seg.firstCol) : seg.lastCol; var startCol = leftCol; var endCol = rightCol + 1; var className; var skeletonEl; var trEl; if (type === 'businessHours') { className = 'bgevent'; } else { className = type.toLowerCase(); } skeletonEl = htmlToElement('
' + '
' + '
'); trEl = skeletonEl.getElementsByTagName('tr')[0]; if (startCol > 0) { appendToElement(trEl, // will create (startCol + 1) td's new Array(startCol + 1).join(EMPTY_CELL_HTML)); } seg.el.colSpan = endCol - startCol; trEl.appendChild(seg.el); if (endCol < colCnt) { appendToElement(trEl, // will create (colCnt - endCol) td's new Array(colCnt - endCol + 1).join(EMPTY_CELL_HTML)); } var introHtml = dayGrid.renderProps.renderIntroHtml(); if (introHtml) { if (isRtl) { appendToElement(trEl, introHtml); } else { prependToElement(trEl, introHtml); } } return skeletonEl; }; return DayGridFillRenderer; }(FillRenderer)); var DayTile = /** @class */ (function (_super) { __extends(DayTile, _super); function DayTile(el) { var _this = _super.call(this, el) || this; var eventRenderer = _this.eventRenderer = new DayTileEventRenderer(_this); var renderFrame = _this.renderFrame = memoizeRendering(_this._renderFrame); _this.renderFgEvents = memoizeRendering(eventRenderer.renderSegs.bind(eventRenderer), eventRenderer.unrender.bind(eventRenderer), [renderFrame]); _this.renderEventSelection = memoizeRendering(eventRenderer.selectByInstanceId.bind(eventRenderer), eventRenderer.unselectByInstanceId.bind(eventRenderer), [_this.renderFgEvents]); _this.renderEventDrag = memoizeRendering(eventRenderer.hideByHash.bind(eventRenderer), eventRenderer.showByHash.bind(eventRenderer), [renderFrame]); _this.renderEventResize = memoizeRendering(eventRenderer.hideByHash.bind(eventRenderer), eventRenderer.showByHash.bind(eventRenderer), [renderFrame]); return _this; } DayTile.prototype.firstContext = function (context) { context.calendar.registerInteractiveComponent(this, { el: this.el, useEventCenter: false }); }; DayTile.prototype.render = function (props, context) { this.renderFrame(props.date); this.renderFgEvents(context, props.fgSegs); this.renderEventSelection(props.eventSelection); this.renderEventDrag(props.eventDragInstances); this.renderEventResize(props.eventResizeInstances); }; DayTile.prototype.destroy = function () { _super.prototype.destroy.call(this); this.renderFrame.unrender(); // should unrender everything else this.context.calendar.unregisterInteractiveComponent(this); }; DayTile.prototype._renderFrame = function (date) { var _a = this.context, theme = _a.theme, dateEnv = _a.dateEnv, options = _a.options; var title = dateEnv.format(date, createFormatter(options.dayPopoverFormat) // TODO: cache ); this.el.innerHTML = '
' + '' + htmlEscape(title) + '' + '' + '
' + '
' + '
' + '
'; this.segContainerEl = this.el.querySelector('.fc-event-container'); }; DayTile.prototype.queryHit = function (positionLeft, positionTop, elWidth, elHeight) { var date = this.props.date; // HACK if (positionLeft < elWidth && positionTop < elHeight) { return { component: this, dateSpan: { allDay: true, range: { start: date, end: addDays(date, 1) } }, dayEl: this.el, rect: { left: 0, top: 0, right: elWidth, bottom: elHeight }, layer: 1 }; } }; return DayTile; }(DateComponent)); var DayTileEventRenderer = /** @class */ (function (_super) { __extends(DayTileEventRenderer, _super); function DayTileEventRenderer(dayTile) { var _this = _super.call(this) || this; _this.dayTile = dayTile; return _this; } DayTileEventRenderer.prototype.attachSegs = function (segs) { for (var _i = 0, segs_1 = segs; _i < segs_1.length; _i++) { var seg = segs_1[_i]; this.dayTile.segContainerEl.appendChild(seg.el); } }; DayTileEventRenderer.prototype.detachSegs = function (segs) { for (var _i = 0, segs_2 = segs; _i < segs_2.length; _i++) { var seg = segs_2[_i]; removeElement(seg.el); } }; return DayTileEventRenderer; }(SimpleDayGridEventRenderer)); var DayBgRow = /** @class */ (function () { function DayBgRow(context) { this.context = context; } DayBgRow.prototype.renderHtml = function (props) { var parts = []; if (props.renderIntroHtml) { parts.push(props.renderIntroHtml()); } for (var _i = 0, _a = props.cells; _i < _a.length; _i++) { var cell = _a[_i]; parts.push(renderCellHtml(cell.date, props.dateProfile, this.context, cell.htmlAttrs)); } if (!props.cells.length) { parts.push(''); } if (this.context.options.dir === 'rtl') { parts.reverse(); } return '' + parts.join('') + ''; }; return DayBgRow; }()); function renderCellHtml(date, dateProfile, context, otherAttrs) { var dateEnv = context.dateEnv, theme = context.theme; var isDateValid = rangeContainsMarker(dateProfile.activeRange, date); // TODO: called too frequently. cache somehow. var classes = getDayClasses(date, dateProfile, context); classes.unshift('fc-day', theme.getClass('widgetContent')); return ''; } var DAY_NUM_FORMAT = createFormatter({ day: 'numeric' }); var WEEK_NUM_FORMAT = createFormatter({ week: 'numeric' }); var DayGrid = /** @class */ (function (_super) { __extends(DayGrid, _super); function DayGrid(el, renderProps) { var _this = _super.call(this, el) || this; _this.bottomCoordPadding = 0; // hack for extending the hit area for the last row of the coordinate grid _this.isCellSizesDirty = false; _this.renderProps = renderProps; var eventRenderer = _this.eventRenderer = new DayGridEventRenderer(_this); var fillRenderer = _this.fillRenderer = new DayGridFillRenderer(_this); _this.mirrorRenderer = new DayGridMirrorRenderer(_this); var renderCells = _this.renderCells = memoizeRendering(_this._renderCells, _this._unrenderCells); _this.renderBusinessHours = memoizeRendering(fillRenderer.renderSegs.bind(fillRenderer, 'businessHours'), fillRenderer.unrender.bind(fillRenderer, 'businessHours'), [renderCells]); _this.renderDateSelection = memoizeRendering(fillRenderer.renderSegs.bind(fillRenderer, 'highlight'), fillRenderer.unrender.bind(fillRenderer, 'highlight'), [renderCells]); _this.renderBgEvents = memoizeRendering(fillRenderer.renderSegs.bind(fillRenderer, 'bgEvent'), fillRenderer.unrender.bind(fillRenderer, 'bgEvent'), [renderCells]); _this.renderFgEvents = memoizeRendering(eventRenderer.renderSegs.bind(eventRenderer), eventRenderer.unrender.bind(eventRenderer), [renderCells]); _this.renderEventSelection = memoizeRendering(eventRenderer.selectByInstanceId.bind(eventRenderer), eventRenderer.unselectByInstanceId.bind(eventRenderer), [_this.renderFgEvents]); _this.renderEventDrag = memoizeRendering(_this._renderEventDrag, _this._unrenderEventDrag, [renderCells]); _this.renderEventResize = memoizeRendering(_this._renderEventResize, _this._unrenderEventResize, [renderCells]); return _this; } DayGrid.prototype.render = function (props, context) { var cells = props.cells; this.rowCnt = cells.length; this.colCnt = cells[0].length; this.renderCells(cells, props.isRigid); this.renderBusinessHours(context, props.businessHourSegs); this.renderDateSelection(context, props.dateSelectionSegs); this.renderBgEvents(context, props.bgEventSegs); this.renderFgEvents(context, props.fgEventSegs); this.renderEventSelection(props.eventSelection); this.renderEventDrag(props.eventDrag); this.renderEventResize(props.eventResize); if (this.segPopoverTile) { this.updateSegPopoverTile(); } }; DayGrid.prototype.destroy = function () { _super.prototype.destroy.call(this); this.renderCells.unrender(); // will unrender everything else }; DayGrid.prototype.getCellRange = function (row, col) { var start = this.props.cells[row][col].date; var end = addDays(start, 1); return { start: start, end: end }; }; DayGrid.prototype.updateSegPopoverTile = function (date, segs) { var ownProps = this.props; this.segPopoverTile.receiveProps({ date: date || this.segPopoverTile.props.date, fgSegs: segs || this.segPopoverTile.props.fgSegs, eventSelection: ownProps.eventSelection, eventDragInstances: ownProps.eventDrag ? ownProps.eventDrag.affectedInstances : null, eventResizeInstances: ownProps.eventResize ? ownProps.eventResize.affectedInstances : null }, this.context); }; /* Date Rendering ------------------------------------------------------------------------------------------------------------------*/ DayGrid.prototype._renderCells = function (cells, isRigid) { var _a = this.context, calendar = _a.calendar, view = _a.view, isRtl = _a.isRtl, dateEnv = _a.dateEnv; var _b = this, rowCnt = _b.rowCnt, colCnt = _b.colCnt; var html = ''; var row; var col; for (row = 0; row < rowCnt; row++) { html += this.renderDayRowHtml(row, isRigid); } this.el.innerHTML = html; this.rowEls = findElements(this.el, '.fc-row'); this.cellEls = findElements(this.el, '.fc-day, .fc-disabled-day'); if (isRtl) { this.cellEls.reverse(); } this.rowPositions = new PositionCache(this.el, this.rowEls, false, true // vertical ); this.colPositions = new PositionCache(this.el, this.cellEls.slice(0, colCnt), // only the first row true, false // horizontal ); // trigger dayRender with each cell's element for (row = 0; row < rowCnt; row++) { for (col = 0; col < colCnt; col++) { calendar.publiclyTrigger('dayRender', [ { date: dateEnv.toDate(cells[row][col].date), el: this.getCellEl(row, col), view: view } ]); } } this.isCellSizesDirty = true; }; DayGrid.prototype._unrenderCells = function () { this.removeSegPopover(); }; // Generates the HTML for a single row, which is a div that wraps a table. // `row` is the row number. DayGrid.prototype.renderDayRowHtml = function (row, isRigid) { var theme = this.context.theme; var classes = ['fc-row', 'fc-week', theme.getClass('dayRow')]; if (isRigid) { classes.push('fc-rigid'); } var bgRow = new DayBgRow(this.context); return '' + '
' + '
' + '' + bgRow.renderHtml({ cells: this.props.cells[row], dateProfile: this.props.dateProfile, renderIntroHtml: this.renderProps.renderBgIntroHtml }) + '
' + '
' + '
' + '' + (this.getIsNumbersVisible() ? '' + this.renderNumberTrHtml(row) + '' : '') + '
' + '
' + '
'; }; DayGrid.prototype.getIsNumbersVisible = function () { return this.getIsDayNumbersVisible() || this.renderProps.cellWeekNumbersVisible || this.renderProps.colWeekNumbersVisible; }; DayGrid.prototype.getIsDayNumbersVisible = function () { return this.rowCnt > 1; }; /* Grid Number Rendering ------------------------------------------------------------------------------------------------------------------*/ DayGrid.prototype.renderNumberTrHtml = function (row) { var isRtl = this.context.isRtl; var intro = this.renderProps.renderNumberIntroHtml(row, this); return '' + '' + (isRtl ? '' : intro) + this.renderNumberCellsHtml(row) + (isRtl ? intro : '') + ''; }; DayGrid.prototype.renderNumberCellsHtml = function (row) { var htmls = []; var col; var date; for (col = 0; col < this.colCnt; col++) { date = this.props.cells[row][col].date; htmls.push(this.renderNumberCellHtml(date)); } if (this.context.isRtl) { htmls.reverse(); } return htmls.join(''); }; // Generates the HTML for the s of the "number" row in the DayGrid's content skeleton. // The number row will only exist if either day numbers or week numbers are turned on. DayGrid.prototype.renderNumberCellHtml = function (date) { var _a = this.context, dateEnv = _a.dateEnv, options = _a.options; var html = ''; var isDateValid = rangeContainsMarker(this.props.dateProfile.activeRange, date); // TODO: called too frequently. cache somehow. var isDayNumberVisible = this.getIsDayNumbersVisible() && isDateValid; var classes; var weekCalcFirstDow; if (!isDayNumberVisible && !this.renderProps.cellWeekNumbersVisible) { // no numbers in day cell (week number must be along the side) return ''; // will create an empty space above events :( } classes = getDayClasses(date, this.props.dateProfile, this.context); classes.unshift('fc-day-top'); if (this.renderProps.cellWeekNumbersVisible) { weekCalcFirstDow = dateEnv.weekDow; } html += ''; if (this.renderProps.cellWeekNumbersVisible && (date.getUTCDay() === weekCalcFirstDow)) { html += buildGotoAnchorHtml(options, dateEnv, { date: date, type: 'week' }, { 'class': 'fc-week-number' }, dateEnv.format(date, WEEK_NUM_FORMAT) // inner HTML ); } if (isDayNumberVisible) { html += buildGotoAnchorHtml(options, dateEnv, date, { 'class': 'fc-day-number' }, dateEnv.format(date, DAY_NUM_FORMAT) // inner HTML ); } html += ''; return html; }; /* Sizing ------------------------------------------------------------------------------------------------------------------*/ DayGrid.prototype.updateSize = function (isResize) { var calendar = this.context.calendar; var _a = this, fillRenderer = _a.fillRenderer, eventRenderer = _a.eventRenderer, mirrorRenderer = _a.mirrorRenderer; if (isResize || this.isCellSizesDirty || calendar.isEventsUpdated // hack ) { this.buildPositionCaches(); this.isCellSizesDirty = false; } fillRenderer.computeSizes(isResize); eventRenderer.computeSizes(isResize); mirrorRenderer.computeSizes(isResize); fillRenderer.assignSizes(isResize); eventRenderer.assignSizes(isResize); mirrorRenderer.assignSizes(isResize); }; DayGrid.prototype.buildPositionCaches = function () { this.buildColPositions(); this.buildRowPositions(); }; DayGrid.prototype.buildColPositions = function () { this.colPositions.build(); }; DayGrid.prototype.buildRowPositions = function () { this.rowPositions.build(); this.rowPositions.bottoms[this.rowCnt - 1] += this.bottomCoordPadding; // hack }; /* Hit System ------------------------------------------------------------------------------------------------------------------*/ DayGrid.prototype.positionToHit = function (leftPosition, topPosition) { var _a = this, colPositions = _a.colPositions, rowPositions = _a.rowPositions; var col = colPositions.leftToIndex(leftPosition); var row = rowPositions.topToIndex(topPosition); if (row != null && col != null) { return { row: row, col: col, dateSpan: { range: this.getCellRange(row, col), allDay: true }, dayEl: this.getCellEl(row, col), relativeRect: { left: colPositions.lefts[col], right: colPositions.rights[col], top: rowPositions.tops[row], bottom: rowPositions.bottoms[row] } }; } }; /* Cell System ------------------------------------------------------------------------------------------------------------------*/ // FYI: the first column is the leftmost column, regardless of date DayGrid.prototype.getCellEl = function (row, col) { return this.cellEls[row * this.colCnt + col]; }; /* Event Drag Visualization ------------------------------------------------------------------------------------------------------------------*/ DayGrid.prototype._renderEventDrag = function (state) { if (state) { this.eventRenderer.hideByHash(state.affectedInstances); this.fillRenderer.renderSegs('highlight', this.context, state.segs); } }; DayGrid.prototype._unrenderEventDrag = function (state) { if (state) { this.eventRenderer.showByHash(state.affectedInstances); this.fillRenderer.unrender('highlight', this.context); } }; /* Event Resize Visualization ------------------------------------------------------------------------------------------------------------------*/ DayGrid.prototype._renderEventResize = function (state) { if (state) { this.eventRenderer.hideByHash(state.affectedInstances); this.fillRenderer.renderSegs('highlight', this.context, state.segs); this.mirrorRenderer.renderSegs(this.context, state.segs, { isResizing: true, sourceSeg: state.sourceSeg }); } }; DayGrid.prototype._unrenderEventResize = function (state) { if (state) { this.eventRenderer.showByHash(state.affectedInstances); this.fillRenderer.unrender('highlight', this.context); this.mirrorRenderer.unrender(this.context, state.segs, { isResizing: true, sourceSeg: state.sourceSeg }); } }; /* More+ Link Popover ------------------------------------------------------------------------------------------------------------------*/ DayGrid.prototype.removeSegPopover = function () { if (this.segPopover) { this.segPopover.hide(); // in handler, will call segPopover's removeElement } }; // Limits the number of "levels" (vertically stacking layers of events) for each row of the grid. // `levelLimit` can be false (don't limit), a number, or true (should be computed). DayGrid.prototype.limitRows = function (levelLimit) { var rowStructs = this.eventRenderer.rowStructs || []; var row; // row # var rowLevelLimit; for (row = 0; row < rowStructs.length; row++) { this.unlimitRow(row); if (!levelLimit) { rowLevelLimit = false; } else if (typeof levelLimit === 'number') { rowLevelLimit = levelLimit; } else { rowLevelLimit = this.computeRowLevelLimit(row); } if (rowLevelLimit !== false) { this.limitRow(row, rowLevelLimit); } } }; // Computes the number of levels a row will accomodate without going outside its bounds. // Assumes the row is "rigid" (maintains a constant height regardless of what is inside). // `row` is the row number. DayGrid.prototype.computeRowLevelLimit = function (row) { var rowEl = this.rowEls[row]; // the containing "fake" row div var rowBottom = rowEl.getBoundingClientRect().bottom; // relative to viewport! var trEls = findChildren(this.eventRenderer.rowStructs[row].tbodyEl); var i; var trEl; // Reveal one level at a time and stop when we find one out of bounds for (i = 0; i < trEls.length; i++) { trEl = trEls[i]; trEl.classList.remove('fc-limited'); // reset to original state (reveal) if (trEl.getBoundingClientRect().bottom > rowBottom) { return i; } } return false; // should not limit at all }; // Limits the given grid row to the maximum number of levels and injects "more" links if necessary. // `row` is the row number. // `levelLimit` is a number for the maximum (inclusive) number of levels allowed. DayGrid.prototype.limitRow = function (row, levelLimit) { var _this = this; var colCnt = this.colCnt; var isRtl = this.context.isRtl; var rowStruct = this.eventRenderer.rowStructs[row]; var moreNodes = []; // array of "more" links and DOM nodes var col = 0; // col #, left-to-right (not chronologically) var levelSegs; // array of segment objects in the last allowable level, ordered left-to-right var cellMatrix; // a matrix (by level, then column) of all elements in the row var limitedNodes; // array of temporarily hidden level and segment DOM nodes var i; var seg; var segsBelow; // array of segment objects below `seg` in the current `col` var totalSegsBelow; // total number of segments below `seg` in any of the columns `seg` occupies var colSegsBelow; // array of segment arrays, below seg, one for each column (offset from segs's first column) var td; var rowSpan; var segMoreNodes; // array of "more" cells that will stand-in for the current seg's cell var j; var moreTd; var moreWrap; var moreLink; // Iterates through empty level cells and places "more" links inside if need be var emptyCellsUntil = function (endCol) { while (col < endCol) { segsBelow = _this.getCellSegs(row, col, levelLimit); if (segsBelow.length) { td = cellMatrix[levelLimit - 1][col]; moreLink = _this.renderMoreLink(row, col, segsBelow); moreWrap = createElement('div', null, moreLink); td.appendChild(moreWrap); moreNodes.push(moreWrap); } col++; } }; if (levelLimit && levelLimit < rowStruct.segLevels.length) { // is it actually over the limit? levelSegs = rowStruct.segLevels[levelLimit - 1]; cellMatrix = rowStruct.cellMatrix; limitedNodes = findChildren(rowStruct.tbodyEl).slice(levelLimit); // get level elements past the limit limitedNodes.forEach(function (node) { node.classList.add('fc-limited'); // hide elements and get a simple DOM-nodes array }); // iterate though segments in the last allowable level for (i = 0; i < levelSegs.length; i++) { seg = levelSegs[i]; var leftCol = isRtl ? (colCnt - 1 - seg.lastCol) : seg.firstCol; var rightCol = isRtl ? (colCnt - 1 - seg.firstCol) : seg.lastCol; emptyCellsUntil(leftCol); // process empty cells before the segment // determine *all* segments below `seg` that occupy the same columns colSegsBelow = []; totalSegsBelow = 0; while (col <= rightCol) { segsBelow = this.getCellSegs(row, col, levelLimit); colSegsBelow.push(segsBelow); totalSegsBelow += segsBelow.length; col++; } if (totalSegsBelow) { // do we need to replace this segment with one or many "more" links? td = cellMatrix[levelLimit - 1][leftCol]; // the segment's parent cell rowSpan = td.rowSpan || 1; segMoreNodes = []; // make a replacement for each column the segment occupies. will be one for each colspan for (j = 0; j < colSegsBelow.length; j++) { moreTd = createElement('td', { className: 'fc-more-cell', rowSpan: rowSpan }); segsBelow = colSegsBelow[j]; moreLink = this.renderMoreLink(row, leftCol + j, [seg].concat(segsBelow) // count seg as hidden too ); moreWrap = createElement('div', null, moreLink); moreTd.appendChild(moreWrap); segMoreNodes.push(moreTd); moreNodes.push(moreTd); } td.classList.add('fc-limited'); insertAfterElement(td, segMoreNodes); limitedNodes.push(td); } } emptyCellsUntil(this.colCnt); // finish off the level rowStruct.moreEls = moreNodes; // for easy undoing later rowStruct.limitedEls = limitedNodes; // for easy undoing later } }; // Reveals all levels and removes all "more"-related elements for a grid's row. // `row` is a row number. DayGrid.prototype.unlimitRow = function (row) { var rowStruct = this.eventRenderer.rowStructs[row]; if (rowStruct.moreEls) { rowStruct.moreEls.forEach(removeElement); rowStruct.moreEls = null; } if (rowStruct.limitedEls) { rowStruct.limitedEls.forEach(function (limitedEl) { limitedEl.classList.remove('fc-limited'); }); rowStruct.limitedEls = null; } }; // Renders an element that represents hidden event element for a cell. // Responsible for attaching click handler as well. DayGrid.prototype.renderMoreLink = function (row, col, hiddenSegs) { var _this = this; var _a = this.context, calendar = _a.calendar, view = _a.view, dateEnv = _a.dateEnv, options = _a.options, isRtl = _a.isRtl; var a = createElement('a', { className: 'fc-more' }); a.innerText = this.getMoreLinkText(hiddenSegs.length); a.addEventListener('click', function (ev) { var clickOption = options.eventLimitClick; var _col = isRtl ? _this.colCnt - col - 1 : col; // HACK: props.cells has different dir system? var date = _this.props.cells[row][_col].date; var moreEl = ev.currentTarget; var dayEl = _this.getCellEl(row, col); var allSegs = _this.getCellSegs(row, col); // rescope the segments to be within the cell's date var reslicedAllSegs = _this.resliceDaySegs(allSegs, date); var reslicedHiddenSegs = _this.resliceDaySegs(hiddenSegs, date); if (typeof clickOption === 'function') { // the returned value can be an atomic option clickOption = calendar.publiclyTrigger('eventLimitClick', [ { date: dateEnv.toDate(date), allDay: true, dayEl: dayEl, moreEl: moreEl, segs: reslicedAllSegs, hiddenSegs: reslicedHiddenSegs, jsEvent: ev, view: view } ]); } if (clickOption === 'popover') { _this.showSegPopover(row, col, moreEl, reslicedAllSegs); } else if (typeof clickOption === 'string') { // a view name calendar.zoomTo(date, clickOption); } }); return a; }; // Reveals the popover that displays all events within a cell DayGrid.prototype.showSegPopover = function (row, col, moreLink, segs) { var _this = this; var _a = this.context, calendar = _a.calendar, view = _a.view, theme = _a.theme, isRtl = _a.isRtl; var _col = isRtl ? this.colCnt - col - 1 : col; // HACK: props.cells has different dir system? var moreWrap = moreLink.parentNode; // the
wrapper around the var topEl; // the element we want to match the top coordinate of var options; if (this.rowCnt === 1) { topEl = view.el; // will cause the popover to cover any sort of header } else { topEl = this.rowEls[row]; // will align with top of row } options = { className: 'fc-more-popover ' + theme.getClass('popover'), parentEl: view.el, top: computeRect(topEl).top, autoHide: true, content: function (el) { _this.segPopoverTile = new DayTile(el); _this.updateSegPopoverTile(_this.props.cells[row][_col].date, segs); }, hide: function () { _this.segPopoverTile.destroy(); _this.segPopoverTile = null; _this.segPopover.destroy(); _this.segPopover = null; } }; // Determine horizontal coordinate. // We use the moreWrap instead of the to avoid border confusion. if (isRtl) { options.right = computeRect(moreWrap).right + 1; // +1 to be over cell border } else { options.left = computeRect(moreWrap).left - 1; // -1 to be over cell border } this.segPopover = new Popover(options); this.segPopover.show(); calendar.releaseAfterSizingTriggers(); // hack for eventPositioned }; // Given the events within an array of segment objects, reslice them to be in a single day DayGrid.prototype.resliceDaySegs = function (segs, dayDate) { var dayStart = dayDate; var dayEnd = addDays(dayStart, 1); var dayRange = { start: dayStart, end: dayEnd }; var newSegs = []; for (var _i = 0, segs_1 = segs; _i < segs_1.length; _i++) { var seg = segs_1[_i]; var eventRange = seg.eventRange; var origRange = eventRange.range; var slicedRange = intersectRanges(origRange, dayRange); if (slicedRange) { newSegs.push(__assign({}, seg, { eventRange: { def: eventRange.def, ui: __assign({}, eventRange.ui, { durationEditable: false }), instance: eventRange.instance, range: slicedRange }, isStart: seg.isStart && slicedRange.start.valueOf() === origRange.start.valueOf(), isEnd: seg.isEnd && slicedRange.end.valueOf() === origRange.end.valueOf() })); } } return newSegs; }; // Generates the text that should be inside a "more" link, given the number of events it represents DayGrid.prototype.getMoreLinkText = function (num) { var opt = this.context.options.eventLimitText; if (typeof opt === 'function') { return opt(num); } else { return '+' + num + ' ' + opt; } }; // Returns segments within a given cell. // If `startLevel` is specified, returns only events including and below that level. Otherwise returns all segs. DayGrid.prototype.getCellSegs = function (row, col, startLevel) { var segMatrix = this.eventRenderer.rowStructs[row].segMatrix; var level = startLevel || 0; var segs = []; var seg; while (level < segMatrix.length) { seg = segMatrix[level][col]; if (seg) { segs.push(seg); } level++; } return segs; }; return DayGrid; }(DateComponent)); var WEEK_NUM_FORMAT$1 = createFormatter({ week: 'numeric' }); /* An abstract class for the daygrid views, as well as month view. Renders one or more rows of day cells. ----------------------------------------------------------------------------------------------------------------------*/ // It is a manager for a DayGrid subcomponent, which does most of the heavy lifting. // It is responsible for managing width/height. var AbstractDayGridView = /** @class */ (function (_super) { __extends(AbstractDayGridView, _super); function AbstractDayGridView() { var _this = _super !== null && _super.apply(this, arguments) || this; _this.processOptions = memoize(_this._processOptions); _this.renderSkeleton = memoizeRendering(_this._renderSkeleton, _this._unrenderSkeleton); /* Header Rendering ------------------------------------------------------------------------------------------------------------------*/ // Generates the HTML that will go before the day-of week header cells _this.renderHeadIntroHtml = function () { var _a = _this.context, theme = _a.theme, options = _a.options; if (_this.colWeekNumbersVisible) { return '' + '' + '' + // needed for matchCellWidths htmlEscape(options.weekLabel) + '' + ''; } return ''; }; /* Day Grid Rendering ------------------------------------------------------------------------------------------------------------------*/ // Generates the HTML that will go before content-skeleton cells that display the day/week numbers _this.renderDayGridNumberIntroHtml = function (row, dayGrid) { var _a = _this.context, options = _a.options, dateEnv = _a.dateEnv; var weekStart = dayGrid.props.cells[row][0].date; if (_this.colWeekNumbersVisible) { return '' + '' + buildGotoAnchorHtml(// aside from link, important for matchCellWidths options, dateEnv, { date: weekStart, type: 'week', forceOff: dayGrid.colCnt === 1 }, dateEnv.format(weekStart, WEEK_NUM_FORMAT$1) // inner HTML ) + ''; } return ''; }; // Generates the HTML that goes before the day bg cells for each day-row _this.renderDayGridBgIntroHtml = function () { var theme = _this.context.theme; if (_this.colWeekNumbersVisible) { return ''; } return ''; }; // Generates the HTML that goes before every other type of row generated by DayGrid. // Affects mirror-skeleton and highlight-skeleton rows. _this.renderDayGridIntroHtml = function () { if (_this.colWeekNumbersVisible) { return ''; } return ''; }; return _this; } AbstractDayGridView.prototype._processOptions = function (options) { if (options.weekNumbers) { if (options.weekNumbersWithinDays) { this.cellWeekNumbersVisible = true; this.colWeekNumbersVisible = false; } else { this.cellWeekNumbersVisible = false; this.colWeekNumbersVisible = true; } } else { this.colWeekNumbersVisible = false; this.cellWeekNumbersVisible = false; } }; AbstractDayGridView.prototype.render = function (props, context) { _super.prototype.render.call(this, props, context); this.processOptions(context.options); this.renderSkeleton(context); }; AbstractDayGridView.prototype.destroy = function () { _super.prototype.destroy.call(this); this.renderSkeleton.unrender(); }; AbstractDayGridView.prototype._renderSkeleton = function (context) { this.el.classList.add('fc-dayGrid-view'); this.el.innerHTML = this.renderSkeletonHtml(); this.scroller = new ScrollComponent('hidden', // overflow x 'auto' // overflow y ); var dayGridContainerEl = this.scroller.el; this.el.querySelector('.fc-body > tr > td').appendChild(dayGridContainerEl); dayGridContainerEl.classList.add('fc-day-grid-container'); var dayGridEl = createElement('div', { className: 'fc-day-grid' }); dayGridContainerEl.appendChild(dayGridEl); this.dayGrid = new DayGrid(dayGridEl, { renderNumberIntroHtml: this.renderDayGridNumberIntroHtml, renderBgIntroHtml: this.renderDayGridBgIntroHtml, renderIntroHtml: this.renderDayGridIntroHtml, colWeekNumbersVisible: this.colWeekNumbersVisible, cellWeekNumbersVisible: this.cellWeekNumbersVisible }); }; AbstractDayGridView.prototype._unrenderSkeleton = function () { this.el.classList.remove('fc-dayGrid-view'); this.dayGrid.destroy(); this.scroller.destroy(); }; // Builds the HTML skeleton for the view. // The day-grid component will render inside of a container defined by this HTML. AbstractDayGridView.prototype.renderSkeletonHtml = function () { var _a = this.context, theme = _a.theme, options = _a.options; return '' + '' + (options.columnHeader ? '' + '' + '' + '' + '' : '') + '' + '' + '' + '' + '' + '
 
'; }; // Generates an HTML attribute string for setting the width of the week number column, if it is known AbstractDayGridView.prototype.weekNumberStyleAttr = function () { if (this.weekNumberWidth != null) { return 'style="width:' + this.weekNumberWidth + 'px"'; } return ''; }; // Determines whether each row should have a constant height AbstractDayGridView.prototype.hasRigidRows = function () { var eventLimit = this.context.options.eventLimit; return eventLimit && typeof eventLimit !== 'number'; }; /* Dimensions ------------------------------------------------------------------------------------------------------------------*/ AbstractDayGridView.prototype.updateSize = function (isResize, viewHeight, isAuto) { _super.prototype.updateSize.call(this, isResize, viewHeight, isAuto); // will call updateBaseSize. important that executes first this.dayGrid.updateSize(isResize); }; // Refreshes the horizontal dimensions of the view AbstractDayGridView.prototype.updateBaseSize = function (isResize, viewHeight, isAuto) { var dayGrid = this.dayGrid; var eventLimit = this.context.options.eventLimit; var headRowEl = this.header ? this.header.el : null; // HACK var scrollerHeight; var scrollbarWidths; // hack to give the view some height prior to dayGrid's columns being rendered // TODO: separate setting height from scroller VS dayGrid. if (!dayGrid.rowEls) { if (!isAuto) { scrollerHeight = this.computeScrollerHeight(viewHeight); this.scroller.setHeight(scrollerHeight); } return; } if (this.colWeekNumbersVisible) { // Make sure all week number cells running down the side have the same width. this.weekNumberWidth = matchCellWidths(findElements(this.el, '.fc-week-number')); } // reset all heights to be natural this.scroller.clear(); if (headRowEl) { uncompensateScroll(headRowEl); } dayGrid.removeSegPopover(); // kill the "more" popover if displayed // is the event limit a constant level number? if (eventLimit && typeof eventLimit === 'number') { dayGrid.limitRows(eventLimit); // limit the levels first so the height can redistribute after } // distribute the height to the rows // (viewHeight is a "recommended" value if isAuto) scrollerHeight = this.computeScrollerHeight(viewHeight); this.setGridHeight(scrollerHeight, isAuto); // is the event limit dynamically calculated? if (eventLimit && typeof eventLimit !== 'number') { dayGrid.limitRows(eventLimit); // limit the levels after the grid's row heights have been set } if (!isAuto) { // should we force dimensions of the scroll container? this.scroller.setHeight(scrollerHeight); scrollbarWidths = this.scroller.getScrollbarWidths(); if (scrollbarWidths.left || scrollbarWidths.right) { // using scrollbars? if (headRowEl) { compensateScroll(headRowEl, scrollbarWidths); } // doing the scrollbar compensation might have created text overflow which created more height. redo scrollerHeight = this.computeScrollerHeight(viewHeight); this.scroller.setHeight(scrollerHeight); } // guarantees the same scrollbar widths this.scroller.lockOverflow(scrollbarWidths); } }; // given a desired total height of the view, returns what the height of the scroller should be AbstractDayGridView.prototype.computeScrollerHeight = function (viewHeight) { return viewHeight - subtractInnerElHeight(this.el, this.scroller.el); // everything that's NOT the scroller }; // Sets the height of just the DayGrid component in this view AbstractDayGridView.prototype.setGridHeight = function (height, isAuto) { if (this.context.options.monthMode) { // if auto, make the height of each row the height that it would be if there were 6 weeks if (isAuto) { height *= this.dayGrid.rowCnt / 6; } distributeHeight(this.dayGrid.rowEls, height, !isAuto); // if auto, don't compensate for height-hogging rows } else { if (isAuto) { undistributeHeight(this.dayGrid.rowEls); // let the rows be their natural height with no expanding } else { distributeHeight(this.dayGrid.rowEls, height, true); // true = compensate for height-hogging rows } } }; /* Scroll ------------------------------------------------------------------------------------------------------------------*/ AbstractDayGridView.prototype.computeDateScroll = function (duration) { return { top: 0 }; }; AbstractDayGridView.prototype.queryDateScroll = function () { return { top: this.scroller.getScrollTop() }; }; AbstractDayGridView.prototype.applyDateScroll = function (scroll) { if (scroll.top !== undefined) { this.scroller.setScrollTop(scroll.top); } }; return AbstractDayGridView; }(View)); AbstractDayGridView.prototype.dateProfileGeneratorClass = DayGridDateProfileGenerator; var SimpleDayGrid = /** @class */ (function (_super) { __extends(SimpleDayGrid, _super); function SimpleDayGrid(dayGrid) { var _this = _super.call(this, dayGrid.el) || this; _this.slicer = new DayGridSlicer(); _this.dayGrid = dayGrid; return _this; } SimpleDayGrid.prototype.firstContext = function (context) { context.calendar.registerInteractiveComponent(this, { el: this.dayGrid.el }); }; SimpleDayGrid.prototype.destroy = function () { _super.prototype.destroy.call(this); this.context.calendar.unregisterInteractiveComponent(this); }; SimpleDayGrid.prototype.render = function (props, context) { var dayGrid = this.dayGrid; var dateProfile = props.dateProfile, dayTable = props.dayTable; dayGrid.receiveContext(context); // hack because context is used in sliceProps dayGrid.receiveProps(__assign({}, this.slicer.sliceProps(props, dateProfile, props.nextDayThreshold, context.calendar, dayGrid, dayTable), { dateProfile: dateProfile, cells: dayTable.cells, isRigid: props.isRigid }), context); }; SimpleDayGrid.prototype.buildPositionCaches = function () { this.dayGrid.buildPositionCaches(); }; SimpleDayGrid.prototype.queryHit = function (positionLeft, positionTop) { var rawHit = this.dayGrid.positionToHit(positionLeft, positionTop); if (rawHit) { return { component: this.dayGrid, dateSpan: rawHit.dateSpan, dayEl: rawHit.dayEl, rect: { left: rawHit.relativeRect.left, right: rawHit.relativeRect.right, top: rawHit.relativeRect.top, bottom: rawHit.relativeRect.bottom }, layer: 0 }; } }; return SimpleDayGrid; }(DateComponent)); var DayGridSlicer = /** @class */ (function (_super) { __extends(DayGridSlicer, _super); function DayGridSlicer() { return _super !== null && _super.apply(this, arguments) || this; } DayGridSlicer.prototype.sliceRange = function (dateRange, dayTable) { return dayTable.sliceRange(dateRange); }; return DayGridSlicer; }(Slicer)); var DayGridView = /** @class */ (function (_super) { __extends(DayGridView, _super); function DayGridView() { var _this = _super !== null && _super.apply(this, arguments) || this; _this.buildDayTable = memoize(buildDayTable); return _this; } DayGridView.prototype.render = function (props, context) { _super.prototype.render.call(this, props, context); // will call _renderSkeleton/_unrenderSkeleton var dateProfile = this.props.dateProfile; var dayTable = this.dayTable = this.buildDayTable(dateProfile, props.dateProfileGenerator); if (this.header) { this.header.receiveProps({ dateProfile: dateProfile, dates: dayTable.headerDates, datesRepDistinctDays: dayTable.rowCnt === 1, renderIntroHtml: this.renderHeadIntroHtml }, context); } this.simpleDayGrid.receiveProps({ dateProfile: dateProfile, dayTable: dayTable, businessHours: props.businessHours, dateSelection: props.dateSelection, eventStore: props.eventStore, eventUiBases: props.eventUiBases, eventSelection: props.eventSelection, eventDrag: props.eventDrag, eventResize: props.eventResize, isRigid: this.hasRigidRows(), nextDayThreshold: this.context.nextDayThreshold }, context); }; DayGridView.prototype._renderSkeleton = function (context) { _super.prototype._renderSkeleton.call(this, context); if (context.options.columnHeader) { this.header = new DayHeader(this.el.querySelector('.fc-head-container')); } this.simpleDayGrid = new SimpleDayGrid(this.dayGrid); }; DayGridView.prototype._unrenderSkeleton = function () { _super.prototype._unrenderSkeleton.call(this); if (this.header) { this.header.destroy(); } this.simpleDayGrid.destroy(); }; return DayGridView; }(AbstractDayGridView)); function buildDayTable(dateProfile, dateProfileGenerator) { var daySeries = new DaySeries(dateProfile.renderRange, dateProfileGenerator); return new DayTable(daySeries, /year|month|week/.test(dateProfile.currentRangeUnit)); } var main = createPlugin({ defaultView: 'dayGridMonth', views: { dayGrid: DayGridView, dayGridDay: { type: 'dayGrid', duration: { days: 1 } }, dayGridWeek: { type: 'dayGrid', duration: { weeks: 1 } }, dayGridMonth: { type: 'dayGrid', duration: { months: 1 }, monthMode: true, fixedWeekCount: true } } }); export default main; export { AbstractDayGridView, DayBgRow, DayGrid, DayGridSlicer, DayGridView, SimpleDayGrid, buildDayTable as buildBasicDayTable };