Merge branch '5.0RC'5.0

1 files changed, 218 insertions, 154 deletions

diff --git a/library/fullcalendar/packages/timegrid/main.js b/library/fullcalendar/packages/timegrid/main.js
index e96a54b93..d64a8a2ea 100644
--- a/library/fullcalendar/packages/timegrid/main.js
+++ b/library/fullcalendar/packages/timegrid/main.js
@@ -1,8 +1,9 @@
 /*!
-FullCalendar Time Grid Plugin v4.0.2
+FullCalendar Time Grid Plugin v4.4.2
 Docs & License: https://fullcalendar.io/
 (c) 2019 Adam Shaw
 */
+
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@fullcalendar/core'), require('@fullcalendar/daygrid')) :
     typeof define === 'function' && define.amd ? define(['exports', '@fullcalendar/core', '@fullcalendar/daygrid'], factory) :
@@ -10,18 +11,18 @@ Docs & License: https://fullcalendar.io/
 }(this, function (exports, core, daygrid) { 'use strict';
 
     /*! *****************************************************************************

-    Copyright (c) Microsoft Corporation. All rights reserved.

-    Licensed under the Apache License, Version 2.0 (the "License"); you may not use

-    this file except in compliance with the License. You may obtain a copy of the

-    License at http://www.apache.org/licenses/LICENSE-2.0

+    Copyright (c) Microsoft Corporation.

 

-    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY

-    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED

-    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,

-    MERCHANTABLITY OR NON-INFRINGEMENT.

+    Permission to use, copy, modify, and/or distribute this software for any

+    purpose with or without fee is hereby granted.

 

-    See the Apache Version 2.0 License for specific language governing permissions

-    and limitations under the License.

+    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 */

 

@@ -56,15 +57,19 @@ Docs & License: https://fullcalendar.io/
     var TimeGridEventRenderer = /** @class */ (function (_super) {
         __extends(TimeGridEventRenderer, _super);
         function TimeGridEventRenderer(timeGrid) {
-            var _this = _super.call(this, timeGrid.context) || this;
+            var _this = _super.call(this) || this;
             _this.timeGrid = timeGrid;
-            _this.fullTimeFormat = core.createFormatter({
+            return _this;
+        }
+        TimeGridEventRenderer.prototype.renderSegs = function (context, segs, mirrorInfo) {
+            _super.prototype.renderSegs.call(this, context, segs, mirrorInfo);
+            // TODO: dont do every time. memoize
+            this.fullTimeFormat = core.createFormatter({
                 hour: 'numeric',
                 minute: '2-digit',
-                separator: _this.context.options.defaultRangeSeparator
+                separator: this.context.options.defaultRangeSeparator
             });
-            return _this;
-        }
+        };
         // Given an array of foreground segments, render a DOM element for each, computes position,
         // and attaches to the column inner-container elements.
         TimeGridEventRenderer.prototype.attachSegs = function (segs, mirrorInfo) {
@@ -121,9 +126,9 @@ Docs & License: https://fullcalendar.io/
             var eventDef = eventRange.def;
             var eventUi = eventRange.ui;
             var allDay = eventDef.allDay;
-            var isDraggable = eventUi.startEditable;
-            var isResizableFromStart = seg.isStart && eventUi.durationEditable && this.context.options.eventResizableFromStart;
-            var isResizableFromEnd = seg.isEnd && eventUi.durationEditable;
+            var isDraggable = core.computeEventDraggable(this.context, eventDef, eventUi);
+            var isResizableFromStart = seg.isStart && core.computeEventStartResizable(this.context, eventDef, eventUi);
+            var isResizableFromEnd = seg.isEnd && core.computeEventEndResizable(this.context, eventDef, eventUi);
             var classes = this.getSegClasses(seg, isDraggable, isResizableFromStart || isResizableFromEnd, mirrorInfo);
             var skinCss = core.cssToStr(this.getSkinCss(eventUi));
             var timeText;
@@ -243,7 +248,7 @@ Docs & License: https://fullcalendar.io/
                 { field: 'forwardPressure', order: -1 },
                 // put segments that are closer to initial edge first (and favor ones with no coords yet)
                 { field: 'backwardCoord', order: 1 }
-            ].concat(this.context.view.eventOrderSpecs);
+            ].concat(this.context.eventOrderSpecs);
             objs.sort(function (obj0, obj1) {
                 return core.compareByFieldSpecs(obj0, obj1, specs);
             });
@@ -274,7 +279,7 @@ Docs & License: https://fullcalendar.io/
             var backwardCoord = seg.backwardCoord; // the left side if LTR. the right side if RTL. floating-point
             var forwardCoord = seg.forwardCoord; // the right side if LTR. the left side if RTL. floating-point
             var props = this.timeGrid.generateSegVerticalCss(seg); // get top/bottom first
-            var isRtl = this.timeGrid.isRtl;
+            var isRtl = this.context.isRtl;
             var left; // amount of space from left edge, a fraction of the total width
             var right; // amount of space from right edge, a fraction of the total width
             if (shouldOverlap) {
@@ -408,7 +413,7 @@ Docs & License: https://fullcalendar.io/
     var TimeGridFillRenderer = /** @class */ (function (_super) {
         __extends(TimeGridFillRenderer, _super);
         function TimeGridFillRenderer(timeGrid) {
-            var _this = _super.call(this, timeGrid.context) || this;
+            var _this = _super.call(this) || this;
             _this.timeGrid = timeGrid;
             return _this;
         }
@@ -452,15 +457,19 @@ Docs & License: https://fullcalendar.io/
     ];
     var TimeGrid = /** @class */ (function (_super) {
         __extends(TimeGrid, _super);
-        function TimeGrid(context, el, renderProps) {
-            var _this = _super.call(this, context, el) || this;
+        function TimeGrid(el, renderProps) {
+            var _this = _super.call(this, el) || this;
             _this.isSlatSizesDirty = false;
             _this.isColSizesDirty = false;
-            _this.renderSlats = core.memoizeRendering(_this._renderSlats);
+            _this.processOptions = core.memoize(_this._processOptions);
+            _this.renderSkeleton = core.memoizeRendering(_this._renderSkeleton);
+            _this.renderSlats = core.memoizeRendering(_this._renderSlats, null, [_this.renderSkeleton]);
+            _this.renderColumns = core.memoizeRendering(_this._renderColumns, _this._unrenderColumns, [_this.renderSkeleton]);
+            _this.renderProps = renderProps;
+            var renderColumns = _this.renderColumns;
             var eventRenderer = _this.eventRenderer = new TimeGridEventRenderer(_this);
             var fillRenderer = _this.fillRenderer = new TimeGridFillRenderer(_this);
             _this.mirrorRenderer = new TimeGridMirrorRenderer(_this);
-            var renderColumns = _this.renderColumns = core.memoizeRendering(_this._renderColumns, _this._unrenderColumns);
             _this.renderBusinessHours = core.memoizeRendering(fillRenderer.renderSegs.bind(fillRenderer, 'businessHours'), fillRenderer.unrender.bind(fillRenderer, 'businessHours'), [renderColumns]);
             _this.renderDateSelection = core.memoizeRendering(_this._renderDateSelection, _this._unrenderDateSelection, [renderColumns]);
             _this.renderFgEvents = core.memoizeRendering(eventRenderer.renderSegs.bind(eventRenderer), eventRenderer.unrender.bind(eventRenderer), [renderColumns]);
@@ -468,23 +477,14 @@ Docs & License: https://fullcalendar.io/
             _this.renderEventSelection = core.memoizeRendering(eventRenderer.selectByInstanceId.bind(eventRenderer), eventRenderer.unselectByInstanceId.bind(eventRenderer), [_this.renderFgEvents]);
             _this.renderEventDrag = core.memoizeRendering(_this._renderEventDrag, _this._unrenderEventDrag, [renderColumns]);
             _this.renderEventResize = core.memoizeRendering(_this._renderEventResize, _this._unrenderEventResize, [renderColumns]);
-            _this.processOptions();
-            el.innerHTML =
-                '<div class="fc-bg"></div>' +
-                    '<div class="fc-slats"></div>' +
-                    '<hr class="fc-divider ' + _this.theme.getClass('widgetHeader') + '" style="display:none" />';
-            _this.rootBgContainerEl = el.querySelector('.fc-bg');
-            _this.slatContainerEl = el.querySelector('.fc-slats');
-            _this.bottomRuleEl = el.querySelector('.fc-divider');
-            _this.renderProps = renderProps;
             return _this;
         }
         /* Options
         ------------------------------------------------------------------------------------------------------------------*/
         // Parses various options into properties of this object
-        TimeGrid.prototype.processOptions = function () {
-            var slotDuration = this.opt('slotDuration');
-            var snapDuration = this.opt('snapDuration');
+        // MUST have context already set
+        TimeGrid.prototype._processOptions = function (options) {
+            var slotDuration = options.slotDuration, snapDuration = options.snapDuration;
             var snapsPerSlot;
             var input;
             slotDuration = core.createDuration(slotDuration);
@@ -500,7 +500,7 @@ Docs & License: https://fullcalendar.io/
             this.snapsPerSlot = snapsPerSlot;
             // might be an array value (for TimelineView).
             // if so, getting the most granular entry (the last one probably).
-            input = this.opt('slotLabelFormat');
+            input = options.slotLabelFormat;
             if (Array.isArray(input)) {
                 input = input[input.length - 1];
             }
@@ -510,7 +510,7 @@ Docs & License: https://fullcalendar.io/
                 omitZeroMinute: true,
                 meridiem: 'short'
             });
-            input = this.opt('slotLabelInterval');
+            input = options.slotLabelInterval;
             this.labelInterval = input ?
                 core.createDuration(input) :
                 this.computeLabelInterval(slotDuration);
@@ -532,15 +532,17 @@ Docs & License: https://fullcalendar.io/
         };
         /* Rendering
         ------------------------------------------------------------------------------------------------------------------*/
-        TimeGrid.prototype.render = function (props) {
+        TimeGrid.prototype.render = function (props, context) {
+            this.processOptions(context.options);
             var cells = props.cells;
             this.colCnt = cells.length;
+            this.renderSkeleton(context.theme);
             this.renderSlats(props.dateProfile);
             this.renderColumns(props.cells, props.dateProfile);
-            this.renderBusinessHours(props.businessHourSegs);
+            this.renderBusinessHours(context, props.businessHourSegs);
             this.renderDateSelection(props.dateSelectionSegs);
-            this.renderFgEvents(props.fgEventSegs);
-            this.renderBgEvents(props.bgEventSegs);
+            this.renderFgEvents(context, props.fgEventSegs);
+            this.renderBgEvents(context, props.bgEventSegs);
             this.renderEventSelection(props.eventSelection);
             this.renderEventDrag(props.eventDrag);
             this.renderEventResize(props.eventResize);
@@ -550,6 +552,7 @@ Docs & License: https://fullcalendar.io/
             // should unrender everything else too
             this.renderSlats.unrender();
             this.renderColumns.unrender();
+            this.renderSkeleton.unrender();
         };
         TimeGrid.prototype.updateSize = function (isResize) {
             var _a = this, fillRenderer = _a.fillRenderer, eventRenderer = _a.eventRenderer, mirrorRenderer = _a.mirrorRenderer;
@@ -568,8 +571,18 @@ Docs & License: https://fullcalendar.io/
             eventRenderer.assignSizes(isResize);
             mirrorRenderer.assignSizes(isResize);
         };
+        TimeGrid.prototype._renderSkeleton = function (theme) {
+            var el = this.el;
+            el.innerHTML =
+                '<div class="fc-bg"></div>' +
+                    '<div class="fc-slats"></div>' +
+                    '<hr class="fc-divider ' + theme.getClass('widgetHeader') + '" style="display:none" />';
+            this.rootBgContainerEl = el.querySelector('.fc-bg');
+            this.slatContainerEl = el.querySelector('.fc-slats');
+            this.bottomRuleEl = el.querySelector('.fc-divider');
+        };
         TimeGrid.prototype._renderSlats = function (dateProfile) {
-            var theme = this.theme;
+            var theme = this.context.theme;
             this.slatContainerEl.innerHTML =
                 '<table class="' + theme.getClass('tableGrid') + '">' +
                     this.renderSlatRowHtml(dateProfile) +
@@ -581,7 +594,7 @@ Docs & License: https://fullcalendar.io/
         };
         // Generates the HTML for the horizontal "slats" that run width-wise. Has a time axis on a side. Depends on RTL.
         TimeGrid.prototype.renderSlatRowHtml = function (dateProfile) {
-            var _a = this, dateEnv = _a.dateEnv, theme = _a.theme, isRtl = _a.isRtl;
+            var _a = this.context, dateEnv = _a.dateEnv, theme = _a.theme, isRtl = _a.isRtl;
             var html = '';
             var dayStart = core.startOfDay(dateProfile.renderRange.start);
             var slotTime = dateProfile.minTime;
@@ -615,7 +628,7 @@ Docs & License: https://fullcalendar.io/
             return html;
         };
         TimeGrid.prototype._renderColumns = function (cells, dateProfile) {
-            var theme = this.theme;
+            var _a = this.context, calendar = _a.calendar, view = _a.view, isRtl = _a.isRtl, theme = _a.theme, dateEnv = _a.dateEnv;
             var bgRow = new daygrid.DayBgRow(this.context);
             this.rootBgContainerEl.innerHTML =
                 '<table class="' + theme.getClass('tableGrid') + '">' +
@@ -626,7 +639,16 @@ Docs & License: https://fullcalendar.io/
                     }) +
                     '</table>';
             this.colEls = core.findElements(this.el, '.fc-day, .fc-disabled-day');
-            if (this.isRtl) {
+            for (var col = 0; col < this.colCnt; col++) {
+                calendar.publiclyTrigger('dayRender', [
+                    {
+                        date: dateEnv.toDate(cells[col].date),
+                        el: this.colEls[col],
+                        view: view
+                    }
+                ]);
+            }
+            if (isRtl) {
                 this.colEls.reverse();
             }
             this.colPositions = new core.PositionCache(this.el, this.colEls, true, // horizontal
@@ -641,6 +663,7 @@ Docs & License: https://fullcalendar.io/
         ------------------------------------------------------------------------------------------------------------------*/
         // Renders the DOM that the view's content will live in
         TimeGrid.prototype.renderContentSkeleton = function () {
+            var isRtl = this.context.isRtl;
             var parts = [];
             var skeletonEl;
             parts.push(this.renderProps.renderIntroHtml());
@@ -655,7 +678,7 @@ Docs & License: https://fullcalendar.io/
                     '</div>' +
                     '</td>');
             }
-            if (this.isRtl) {
+            if (isRtl) {
                 parts.reverse();
             }
             skeletonEl = this.contentSkeletonEl = core.htmlToElement('<div class="fc-content-skeleton">' +
@@ -669,7 +692,7 @@ Docs & License: https://fullcalendar.io/
             this.bgContainerEls = core.findElements(skeletonEl, '.fc-bgevent-container');
             this.highlightContainerEls = core.findElements(skeletonEl, '.fc-highlight-container');
             this.businessContainerEls = core.findElements(skeletonEl, '.fc-business-container');
-            if (this.isRtl) {
+            if (isRtl) {
                 this.colContainerEls.reverse();
                 this.mirrorContainerEls.reverse();
                 this.fgContainerEls.reverse();
@@ -745,7 +768,7 @@ Docs & License: https://fullcalendar.io/
         /* Coordinates
         ------------------------------------------------------------------------------------------------------------------*/
         TimeGrid.prototype.getTotalSlatHeight = function () {
-            return this.slatContainerEl.offsetHeight;
+            return this.slatContainerEl.getBoundingClientRect().height;
         };
         // Computes the top coordinate, relative to the bounds of the grid, of the given date.
         // A `startOfDayDate` must be given for avoiding ambiguity over how to treat midnight.
@@ -753,13 +776,13 @@ Docs & License: https://fullcalendar.io/
             if (!startOfDayDate) {
                 startOfDayDate = core.startOfDay(when);
             }
-            return this.computeTimeTop(when.valueOf() - startOfDayDate.valueOf());
+            return this.computeTimeTop(core.createDuration(when.valueOf() - startOfDayDate.valueOf()));
         };
         // Computes the top coordinate, relative to the bounds of the grid, of the given time (a Duration).
-        TimeGrid.prototype.computeTimeTop = function (timeMs) {
+        TimeGrid.prototype.computeTimeTop = function (duration) {
             var len = this.slatEls.length;
             var dateProfile = this.props.dateProfile;
-            var slatCoverage = (timeMs - core.asRoughMs(dateProfile.minTime)) / core.asRoughMs(this.slotDuration); // floating-point value of # of slots covered
+            var slatCoverage = (duration.milliseconds - core.asRoughMs(dateProfile.minTime)) / core.asRoughMs(this.slotDuration); // floating-point value of # of slots covered
             var slatIndex;
             var slatRemainder;
             // compute a floating-point number for how many slats should be progressed through.
@@ -779,7 +802,8 @@ Docs & License: https://fullcalendar.io/
         };
         // For each segment in an array, computes and assigns its top and bottom properties
         TimeGrid.prototype.computeSegVerticals = function (segs) {
-            var eventMinHeight = this.opt('timeGridEventMinHeight');
+            var options = this.context.options;
+            var eventMinHeight = options.timeGridEventMinHeight;
             var i;
             var seg;
             var dayDate;
@@ -809,6 +833,10 @@ Docs & License: https://fullcalendar.io/
         };
         /* Sizing
         ------------------------------------------------------------------------------------------------------------------*/
+        TimeGrid.prototype.buildPositionCaches = function () {
+            this.buildColPositions();
+            this.buildSlatPositions();
+        };
         TimeGrid.prototype.buildColPositions = function () {
             this.colPositions.build();
         };
@@ -818,7 +846,8 @@ Docs & License: https://fullcalendar.io/
         /* Hit System
         ------------------------------------------------------------------------------------------------------------------*/
         TimeGrid.prototype.positionToHit = function (positionLeft, positionTop) {
-            var _a = this, dateEnv = _a.dateEnv, snapsPerSlot = _a.snapsPerSlot, slatPositions = _a.slatPositions, colPositions = _a.colPositions;
+            var dateEnv = this.context.dateEnv;
+            var _a = this, snapsPerSlot = _a.snapsPerSlot, slatPositions = _a.slatPositions, colPositions = _a.colPositions;
             var colIndex = colPositions.leftToIndex(positionLeft);
             var slatIndex = slatPositions.topToIndex(positionTop);
             if (colIndex != null && slatIndex != null) {
@@ -853,18 +882,22 @@ Docs & License: https://fullcalendar.io/
             if (state) {
                 this.eventRenderer.hideByHash(state.affectedInstances);
                 if (state.isEvent) {
-                    this.mirrorRenderer.renderSegs(state.segs, { isDragging: true, sourceSeg: state.sourceSeg });
+                    this.mirrorRenderer.renderSegs(this.context, state.segs, { isDragging: true, sourceSeg: state.sourceSeg });
                 }
                 else {
-                    this.fillRenderer.renderSegs('highlight', state.segs);
+                    this.fillRenderer.renderSegs('highlight', this.context, state.segs);
                 }
             }
         };
         TimeGrid.prototype._unrenderEventDrag = function (state) {
             if (state) {
                 this.eventRenderer.showByHash(state.affectedInstances);
-                this.mirrorRenderer.unrender(state.segs, { isDragging: true, sourceSeg: state.sourceSeg });
-                this.fillRenderer.unrender('highlight');
+                if (state.isEvent) {
+                    this.mirrorRenderer.unrender(this.context, state.segs, { isDragging: true, sourceSeg: state.sourceSeg });
+                }
+                else {
+                    this.fillRenderer.unrender('highlight', this.context);
+                }
             }
         };
         /* Event Resize Visualization
@@ -872,13 +905,13 @@ Docs & License: https://fullcalendar.io/
         TimeGrid.prototype._renderEventResize = function (state) {
             if (state) {
                 this.eventRenderer.hideByHash(state.affectedInstances);
-                this.mirrorRenderer.renderSegs(state.segs, { isResizing: true, sourceSeg: state.sourceSeg });
+                this.mirrorRenderer.renderSegs(this.context, state.segs, { isResizing: true, sourceSeg: state.sourceSeg });
             }
         };
         TimeGrid.prototype._unrenderEventResize = function (state) {
             if (state) {
                 this.eventRenderer.showByHash(state.affectedInstances);
-                this.mirrorRenderer.unrender(state.segs, { isResizing: true, sourceSeg: state.sourceSeg });
+                this.mirrorRenderer.unrender(this.context, state.segs, { isResizing: true, sourceSeg: state.sourceSeg });
             }
         };
         /* Selection
@@ -886,17 +919,23 @@ Docs & License: https://fullcalendar.io/
         // Renders a visual indication of a selection. Overrides the default, which was to simply render a highlight.
         TimeGrid.prototype._renderDateSelection = function (segs) {
             if (segs) {
-                if (this.opt('selectMirror')) {
-                    this.mirrorRenderer.renderSegs(segs, { isSelecting: true });
+                if (this.context.options.selectMirror) {
+                    this.mirrorRenderer.renderSegs(this.context, segs, { isSelecting: true });
                 }
                 else {
-                    this.fillRenderer.renderSegs('highlight', segs);
+                    this.fillRenderer.renderSegs('highlight', this.context, segs);
                 }
             }
         };
         TimeGrid.prototype._unrenderDateSelection = function (segs) {
-            this.mirrorRenderer.unrender(segs, { isSelecting: true });
-            this.fillRenderer.unrender('highlight');
+            if (segs) {
+                if (this.context.options.selectMirror) {
+                    this.mirrorRenderer.unrender(this.context, segs, { isSelecting: true });
+                }
+                else {
+                    this.fillRenderer.unrender('highlight', this.context);
+                }
+            }
         };
         return TimeGrid;
     }(core.DateComponent));
@@ -940,25 +979,26 @@ Docs & License: https://fullcalendar.io/
     ----------------------------------------------------------------------------------------------------------------------*/
     // Is a manager for the TimeGrid subcomponent and possibly the DayGrid subcomponent (if allDaySlot is on).
     // Responsible for managing width/height.
-    var TimeGridView = /** @class */ (function (_super) {
-        __extends(TimeGridView, _super);
-        function TimeGridView(context, viewSpec, dateProfileGenerator, parentEl) {
-            var _this = _super.call(this, context, viewSpec, dateProfileGenerator, parentEl) || this;
+    var AbstractTimeGridView = /** @class */ (function (_super) {
+        __extends(AbstractTimeGridView, _super);
+        function AbstractTimeGridView() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
             _this.splitter = new AllDaySplitter();
+            _this.renderSkeleton = core.memoizeRendering(_this._renderSkeleton, _this._unrenderSkeleton);
             /* Header Render Methods
             ------------------------------------------------------------------------------------------------------------------*/
             // Generates the HTML that will go before the day-of week header cells
             _this.renderHeadIntroHtml = function () {
-                var _a = _this, theme = _a.theme, dateEnv = _a.dateEnv;
+                var _a = _this.context, theme = _a.theme, dateEnv = _a.dateEnv, options = _a.options;
                 var range = _this.props.dateProfile.renderRange;
                 var dayCnt = core.diffDays(range.start, range.end);
                 var weekText;
-                if (_this.opt('weekNumbers')) {
+                if (options.weekNumbers) {
                     weekText = dateEnv.format(range.start, WEEK_HEADER_FORMAT);
                     return '' +
                         '<th class="fc-axis fc-week-number ' + theme.getClass('widgetHeader') + '" ' + _this.axisStyleAttr() + '>' +
                         core.buildGotoAnchorHtml(// aside from link, important for matchCellWidths
-                        _this, { date: range.start, type: 'week', forceOff: dayCnt > 1 }, core.htmlEscape(weekText) // inner HTML
+                        options, dateEnv, { date: range.start, type: 'week', forceOff: dayCnt > 1 }, core.htmlEscape(weekText) // inner HTML
                         ) +
                         '</th>';
                 }
@@ -970,7 +1010,7 @@ Docs & License: https://fullcalendar.io/
             ------------------------------------------------------------------------------------------------------------------*/
             // Generates the HTML that goes before the bg of the TimeGrid slot area. Long vertical column.
             _this.renderTimeGridBgIntroHtml = function () {
-                var theme = _this.theme;
+                var theme = _this.context.theme;
                 return '<td class="fc-axis ' + theme.getClass('widgetContent') + '" ' + _this.axisStyleAttr() + '></td>';
             };
             // Generates the HTML that goes before all other types of cells.
@@ -982,11 +1022,11 @@ Docs & License: https://fullcalendar.io/
             ------------------------------------------------------------------------------------------------------------------*/
             // Generates the HTML that goes before the all-day cells
             _this.renderDayGridBgIntroHtml = function () {
-                var theme = _this.theme;
+                var _a = _this.context, theme = _a.theme, options = _a.options;
                 return '' +
                     '<td class="fc-axis ' + theme.getClass('widgetContent') + '" ' + _this.axisStyleAttr() + '>' +
                     '<span>' + // needed for matchCellWidths
-                    core.getAllDayHtml(_this) +
+                    core.getAllDayHtml(options) +
                     '</span>' +
                     '</td>';
             };
@@ -995,36 +1035,47 @@ Docs & License: https://fullcalendar.io/
             _this.renderDayGridIntroHtml = function () {
                 return '<td class="fc-axis" ' + _this.axisStyleAttr() + '></td>';
             };
-            _this.el.classList.add('fc-timeGrid-view');
-            _this.el.innerHTML = _this.renderSkeletonHtml();
-            _this.scroller = new core.ScrollComponent('hidden', // overflow x
+            return _this;
+        }
+        AbstractTimeGridView.prototype.render = function (props, context) {
+            _super.prototype.render.call(this, props, context);
+            this.renderSkeleton(context);
+        };
+        AbstractTimeGridView.prototype.destroy = function () {
+            _super.prototype.destroy.call(this);
+            this.renderSkeleton.unrender();
+        };
+        AbstractTimeGridView.prototype._renderSkeleton = function (context) {
+            this.el.classList.add('fc-timeGrid-view');
+            this.el.innerHTML = this.renderSkeletonHtml();
+            this.scroller = new core.ScrollComponent('hidden', // overflow x
             'auto' // overflow y
             );
-            var timeGridWrapEl = _this.scroller.el;
-            _this.el.querySelector('.fc-body > tr > td').appendChild(timeGridWrapEl);
+            var timeGridWrapEl = this.scroller.el;
+            this.el.querySelector('.fc-body > tr > td').appendChild(timeGridWrapEl);
             timeGridWrapEl.classList.add('fc-time-grid-container');
             var timeGridEl = core.createElement('div', { className: 'fc-time-grid' });
             timeGridWrapEl.appendChild(timeGridEl);
-            _this.timeGrid = new TimeGrid(_this.context, timeGridEl, {
-                renderBgIntroHtml: _this.renderTimeGridBgIntroHtml,
-                renderIntroHtml: _this.renderTimeGridIntroHtml
+            this.timeGrid = new TimeGrid(timeGridEl, {
+                renderBgIntroHtml: this.renderTimeGridBgIntroHtml,
+                renderIntroHtml: this.renderTimeGridIntroHtml
             });
-            if (_this.opt('allDaySlot')) { // should we display the "all-day" area?
-                _this.dayGrid = new daygrid.DayGrid(// the all-day subcomponent of this view
-                _this.context, _this.el.querySelector('.fc-day-grid'), {
-                    renderNumberIntroHtml: _this.renderDayGridIntroHtml,
-                    renderBgIntroHtml: _this.renderDayGridBgIntroHtml,
-                    renderIntroHtml: _this.renderDayGridIntroHtml,
+            if (context.options.allDaySlot) { // should we display the "all-day" area?
+                this.dayGrid = new daygrid.DayGrid(// the all-day subcomponent of this view
+                this.el.querySelector('.fc-day-grid'), {
+                    renderNumberIntroHtml: this.renderDayGridIntroHtml,
+                    renderBgIntroHtml: this.renderDayGridBgIntroHtml,
+                    renderIntroHtml: this.renderDayGridIntroHtml,
                     colWeekNumbersVisible: false,
                     cellWeekNumbersVisible: false
                 });
                 // have the day-grid extend it's coordinate area over the <hr> dividing the two grids
-                _this.dayGrid.bottomCoordPadding = _this.el.querySelector('.fc-divider').offsetHeight;
+                var dividerEl = this.el.querySelector('.fc-divider');
+                this.dayGrid.bottomCoordPadding = dividerEl.getBoundingClientRect().height;
             }
-            return _this;
-        }
-        TimeGridView.prototype.destroy = function () {
-            _super.prototype.destroy.call(this);
+        };
+        AbstractTimeGridView.prototype._unrenderSkeleton = function () {
+            this.el.classList.remove('fc-timeGrid-view');
             this.timeGrid.destroy();
             if (this.dayGrid) {
                 this.dayGrid.destroy();
@@ -1035,11 +1086,11 @@ Docs & License: https://fullcalendar.io/
         ------------------------------------------------------------------------------------------------------------------*/
         // Builds the HTML skeleton for the view.
         // The day-grid and time-grid components will render inside containers defined by this HTML.
-        TimeGridView.prototype.renderSkeletonHtml = function () {
-            var theme = this.theme;
+        AbstractTimeGridView.prototype.renderSkeletonHtml = function () {
+            var _a = this.context, theme = _a.theme, options = _a.options;
             return '' +
                 '<table class="' + theme.getClass('tableGrid') + '">' +
-                (this.opt('columnHeader') ?
+                (options.columnHeader ?
                     '<thead class="fc-head">' +
                         '<tr>' +
                         '<td class="fc-head-container ' + theme.getClass('widgetHeader') + '">&nbsp;</td>' +
@@ -1049,7 +1100,7 @@ Docs & License: https://fullcalendar.io/
                 '<tbody class="fc-body">' +
                 '<tr>' +
                 '<td class="' + theme.getClass('widgetContent') + '">' +
-                (this.opt('allDaySlot') ?
+                (options.allDaySlot ?
                     '<div class="fc-day-grid"></div>' +
                         '<hr class="fc-divider ' + theme.getClass('widgetHeader') + '" />' :
                     '') +
@@ -1060,18 +1111,18 @@ Docs & License: https://fullcalendar.io/
         };
         /* Now Indicator
         ------------------------------------------------------------------------------------------------------------------*/
-        TimeGridView.prototype.getNowIndicatorUnit = function () {
+        AbstractTimeGridView.prototype.getNowIndicatorUnit = function () {
             return this.timeGrid.getNowIndicatorUnit();
         };
         // subclasses should implement
         // renderNowIndicator(date: DateMarker) {
         // }
-        TimeGridView.prototype.unrenderNowIndicator = function () {
+        AbstractTimeGridView.prototype.unrenderNowIndicator = function () {
             this.timeGrid.unrenderNowIndicator();
         };
         /* Dimensions
         ------------------------------------------------------------------------------------------------------------------*/
-        TimeGridView.prototype.updateSize = function (isResize, viewHeight, isAuto) {
+        AbstractTimeGridView.prototype.updateSize = function (isResize, viewHeight, isAuto) {
             _super.prototype.updateSize.call(this, isResize, viewHeight, isAuto); // will call updateBaseSize. important that executes first
             this.timeGrid.updateSize(isResize);
             if (this.dayGrid) {
@@ -1079,7 +1130,7 @@ Docs & License: https://fullcalendar.io/
             }
         };
         // Adjusts the vertical dimensions of the view to the specified values
-        TimeGridView.prototype.updateBaseSize = function (isResize, viewHeight, isAuto) {
+        AbstractTimeGridView.prototype.updateBaseSize = function (isResize, viewHeight, isAuto) {
             var _this = this;
             var eventLimit;
             var scrollerHeight;
@@ -1106,7 +1157,7 @@ Docs & License: https://fullcalendar.io/
             // limit number of events in the all-day area
             if (this.dayGrid) {
                 this.dayGrid.removeSegPopover(); // kill the "more" popover if displayed
-                eventLimit = this.opt('eventLimit');
+                eventLimit = this.context.options.eventLimit;
                 if (eventLimit && typeof eventLimit !== 'number') {
                     eventLimit = TIMEGRID_ALL_DAY_EVENT_LIMIT; // make sure "auto" goes to a real number
                 }
@@ -1138,16 +1189,15 @@ Docs & License: https://fullcalendar.io/
             }
         };
         // given a desired total height of the view, returns what the height of the scroller should be
-        TimeGridView.prototype.computeScrollerHeight = function (viewHeight) {
+        AbstractTimeGridView.prototype.computeScrollerHeight = function (viewHeight) {
             return viewHeight -
                 core.subtractInnerElHeight(this.el, this.scroller.el); // everything that's NOT the scroller
         };
         /* Scroll
         ------------------------------------------------------------------------------------------------------------------*/
         // Computes the initial pre-configured scroll state prior to allowing the user to change it
-        TimeGridView.prototype.computeInitialDateScroll = function () {
-            var scrollTime = core.createDuration(this.opt('scrollTime'));
-            var top = this.timeGrid.computeTimeTop(scrollTime.milliseconds);
+        AbstractTimeGridView.prototype.computeDateScroll = function (duration) {
+            var top = this.timeGrid.computeTimeTop(duration);
             // zoom can give weird floating-point values. rather scroll a little bit further
             top = Math.ceil(top);
             if (top) {
@@ -1155,49 +1205,57 @@ Docs & License: https://fullcalendar.io/
             }
             return { top: top };
         };
-        TimeGridView.prototype.queryDateScroll = function () {
+        AbstractTimeGridView.prototype.queryDateScroll = function () {
             return { top: this.scroller.getScrollTop() };
         };
-        TimeGridView.prototype.applyDateScroll = function (scroll) {
+        AbstractTimeGridView.prototype.applyDateScroll = function (scroll) {
             if (scroll.top !== undefined) {
                 this.scroller.setScrollTop(scroll.top);
             }
         };
         // Generates an HTML attribute string for setting the width of the axis, if it is known
-        TimeGridView.prototype.axisStyleAttr = function () {
+        AbstractTimeGridView.prototype.axisStyleAttr = function () {
             if (this.axisWidth != null) {
                 return 'style="width:' + this.axisWidth + 'px"';
             }
             return '';
         };
-        return TimeGridView;
+        return AbstractTimeGridView;
     }(core.View));
-    TimeGridView.prototype.usesMinMaxTime = true; // indicates that minTime/maxTime affects rendering
+    AbstractTimeGridView.prototype.usesMinMaxTime = true; // indicates that minTime/maxTime affects rendering
 
     var SimpleTimeGrid = /** @class */ (function (_super) {
         __extends(SimpleTimeGrid, _super);
-        function SimpleTimeGrid(context, timeGrid) {
-            var _this = _super.call(this, context, timeGrid.el) || this;
+        function SimpleTimeGrid(timeGrid) {
+            var _this = _super.call(this, timeGrid.el) || this;
             _this.buildDayRanges = core.memoize(buildDayRanges);
             _this.slicer = new TimeGridSlicer();
             _this.timeGrid = timeGrid;
-            context.calendar.registerInteractiveComponent(_this, {
-                el: _this.timeGrid.el
-            });
             return _this;
         }
+        SimpleTimeGrid.prototype.firstContext = function (context) {
+            context.calendar.registerInteractiveComponent(this, {
+                el: this.timeGrid.el
+            });
+        };
         SimpleTimeGrid.prototype.destroy = function () {
             _super.prototype.destroy.call(this);
-            this.calendar.unregisterInteractiveComponent(this);
+            this.context.calendar.unregisterInteractiveComponent(this);
         };
-        SimpleTimeGrid.prototype.render = function (props) {
+        SimpleTimeGrid.prototype.render = function (props, context) {
+            var dateEnv = this.context.dateEnv;
             var dateProfile = props.dateProfile, dayTable = props.dayTable;
-            var dayRanges = this.dayRanges = this.buildDayRanges(dayTable, dateProfile, this.dateEnv);
-            this.timeGrid.receiveProps(__assign({}, this.slicer.sliceProps(props, dateProfile, null, this.timeGrid, dayRanges), { dateProfile: dateProfile, cells: dayTable.cells[0] }));
+            var dayRanges = this.dayRanges = this.buildDayRanges(dayTable, dateProfile, dateEnv);
+            var timeGrid = this.timeGrid;
+            timeGrid.receiveContext(context); // hack because context is used in sliceProps
+            timeGrid.receiveProps(__assign({}, this.slicer.sliceProps(props, dateProfile, null, context.calendar, timeGrid, dayRanges), { dateProfile: dateProfile, cells: dayTable.cells[0] }), context);
         };
         SimpleTimeGrid.prototype.renderNowIndicator = function (date) {
             this.timeGrid.renderNowIndicator(this.slicer.sliceNowDate(date, this.timeGrid, this.dayRanges), date);
         };
+        SimpleTimeGrid.prototype.buildPositionCaches = function () {
+            this.timeGrid.buildPositionCaches();
+        };
         SimpleTimeGrid.prototype.queryHit = function (positionLeft, positionTop) {
             var rawHit = this.timeGrid.positionToHit(positionLeft, positionTop);
             if (rawHit) {
@@ -1252,34 +1310,18 @@ Docs & License: https://fullcalendar.io/
         return TimeGridSlicer;
     }(core.Slicer));
 
-    var TimeGridView$1 = /** @class */ (function (_super) {
+    var TimeGridView = /** @class */ (function (_super) {
         __extends(TimeGridView, _super);
-        function TimeGridView(_context, viewSpec, dateProfileGenerator, parentEl) {
-            var _this = _super.call(this, _context, viewSpec, dateProfileGenerator, parentEl) || this;
+        function TimeGridView() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
             _this.buildDayTable = core.memoize(buildDayTable);
-            if (_this.opt('columnHeader')) {
-                _this.header = new core.DayHeader(_this.context, _this.el.querySelector('.fc-head-container'));
-            }
-            _this.simpleTimeGrid = new SimpleTimeGrid(_this.context, _this.timeGrid);
-            if (_this.dayGrid) {
-                _this.simpleDayGrid = new daygrid.SimpleDayGrid(_this.context, _this.dayGrid);
-            }
             return _this;
         }
-        TimeGridView.prototype.destroy = function () {
-            _super.prototype.destroy.call(this);
-            if (this.header) {
-                this.header.destroy();
-            }
-            this.simpleTimeGrid.destroy();
-            if (this.simpleDayGrid) {
-                this.simpleDayGrid.destroy();
-            }
-        };
-        TimeGridView.prototype.render = function (props) {
-            _super.prototype.render.call(this, props); // for flags for updateSize
-            var dateProfile = this.props.dateProfile;
-            var dayTable = this.buildDayTable(dateProfile, this.dateProfileGenerator);
+        TimeGridView.prototype.render = function (props, context) {
+            _super.prototype.render.call(this, props, context); // for flags for updateSize. also _renderSkeleton/_unrenderSkeleton
+            var _a = this.props, dateProfile = _a.dateProfile, dateProfileGenerator = _a.dateProfileGenerator;
+            var nextDayThreshold = context.nextDayThreshold;
+            var dayTable = this.buildDayTable(dateProfile, dateProfileGenerator);
             var splitProps = this.splitter.splitProps(props);
             if (this.header) {
                 this.header.receiveProps({
@@ -1287,20 +1329,42 @@ Docs & License: https://fullcalendar.io/
                     dates: dayTable.headerDates,
                     datesRepDistinctDays: true,
                     renderIntroHtml: this.renderHeadIntroHtml
-                });
+                }, context);
             }
             this.simpleTimeGrid.receiveProps(__assign({}, splitProps['timed'], { dateProfile: dateProfile,
-                dayTable: dayTable }));
+                dayTable: dayTable }), context);
             if (this.simpleDayGrid) {
                 this.simpleDayGrid.receiveProps(__assign({}, splitProps['allDay'], { dateProfile: dateProfile,
-                    dayTable: dayTable, nextDayThreshold: this.nextDayThreshold, isRigid: false }));
+                    dayTable: dayTable,
+                    nextDayThreshold: nextDayThreshold, isRigid: false }), context);
+            }
+            this.startNowIndicator(dateProfile, dateProfileGenerator);
+        };
+        TimeGridView.prototype._renderSkeleton = function (context) {
+            _super.prototype._renderSkeleton.call(this, context);
+            if (context.options.columnHeader) {
+                this.header = new core.DayHeader(this.el.querySelector('.fc-head-container'));
+            }
+            this.simpleTimeGrid = new SimpleTimeGrid(this.timeGrid);
+            if (this.dayGrid) {
+                this.simpleDayGrid = new daygrid.SimpleDayGrid(this.dayGrid);
+            }
+        };
+        TimeGridView.prototype._unrenderSkeleton = function () {
+            _super.prototype._unrenderSkeleton.call(this);
+            if (this.header) {
+                this.header.destroy();
+            }
+            this.simpleTimeGrid.destroy();
+            if (this.simpleDayGrid) {
+                this.simpleDayGrid.destroy();
             }
         };
         TimeGridView.prototype.renderNowIndicator = function (date) {
             this.simpleTimeGrid.renderNowIndicator(date);
         };
         return TimeGridView;
-    }(TimeGridView));
+    }(AbstractTimeGridView));
     function buildDayTable(dateProfile, dateProfileGenerator) {
         var daySeries = new core.DaySeries(dateProfile.renderRange, dateProfileGenerator);
         return new core.DayTable(daySeries, false);
@@ -1310,7 +1374,7 @@ Docs & License: https://fullcalendar.io/
         defaultView: 'timeGridWeek',
         views: {
             timeGrid: {
-                class: TimeGridView$1,
+                class: TimeGridView,
                 allDaySlot: true,
                 slotDuration: '00:30:00',
                 slotEventOverlap: true // a bad name. confused with overlap/constraint system
@@ -1326,10 +1390,10 @@ Docs & License: https://fullcalendar.io/
         }
     });
 
-    exports.AbstractTimeGridView = TimeGridView;
+    exports.AbstractTimeGridView = AbstractTimeGridView;
     exports.TimeGrid = TimeGrid;
     exports.TimeGridSlicer = TimeGridSlicer;
-    exports.TimeGridView = TimeGridView$1;
+    exports.TimeGridView = TimeGridView;
     exports.buildDayRanges = buildDayRanges;
     exports.buildDayTable = buildDayTable;
     exports.default = main;