@fullcalendar/timeline 5.7.2 → 5.10.1

package/main.cjs.js

@@ -1,5 +1,5 @@
 /*!
-FullCalendar Scheduler v5.7.2
+FullCalendar Scheduler v5.10.1
 Docs & License: https://fullcalendar.io/scheduler
 (c) 2021 Adam Shaw
 */
@@ -466,10 +466,7 @@ var TimelineHeaderThInner = /** @class */ (function (_super) {
     }
     TimelineHeaderThInner.prototype.render = function () {
         var _a = this, props = _a.props, context = _a.context;
-        var navLinkAttrs = props.navLinkData
-            ? { 'data-navlink': props.navLinkData, tabIndex: 0 }
-            : {};
-        return (common.createElement(common.ContentHook, { hookProps: props.hookProps, content: context.options.slotLabelContent, defaultContent: renderInnerContent }, function (innerElRef, innerContent) { return (common.createElement("a", tslib.__assign({ ref: innerElRef, className: 'fc-timeline-slot-cushion fc-scrollgrid-sync-inner' + (props.isSticky ? ' fc-sticky' : '') }, navLinkAttrs), innerContent)); }));
+        return (common.createElement(common.ContentHook, { hookProps: props.hookProps, content: context.options.slotLabelContent, defaultContent: renderInnerContent }, function (innerElRef, innerContent) { return (common.createElement("a", tslib.__assign({ ref: innerElRef, className: 'fc-timeline-slot-cushion fc-scrollgrid-sync-inner' + (props.isSticky ? ' fc-sticky' : '') }, props.navLinkAttrs), innerContent)); }));
     };
     return TimelineHeaderThInner;
 }(common.BaseComponent));
@@ -491,9 +488,11 @@ var TimelineHeaderTh = /** @class */ (function (_super) {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.refineHookProps = common.memoizeObjArg(refineHookProps);
         _this.normalizeClassNames = common.buildClassNameNormalizer();
+        _this.buildCellNavLinkAttrs = common.memoize(buildCellNavLinkAttrs);
         return _this;
     }
     TimelineHeaderTh.prototype.render = function () {
+        var _this = this;
         var _a = this, props = _a.props, context = _a.context;
         var dateEnv = context.dateEnv, options = context.options;
         var cell = props.cell, dateProfile = props.dateProfile, tDateProfile = props.tDateProfile;
@@ -507,9 +506,6 @@ var TimelineHeaderTh = /** @class */ (function (_super) {
         if (cell.isWeekStart) {
             classNames.push('fc-timeline-slot-em');
         }
-        var navLinkData = (options.navLinks && cell.rowUnit && cell.rowUnit !== 'time')
-            ? common.buildNavLinkData(cell.date, cell.rowUnit)
-            : null;
         var hookProps = this.refineHookProps({
             level: props.rowLevel,
             dateMarker: cell.date,
@@ -520,10 +516,15 @@ var TimelineHeaderTh = /** @class */ (function (_super) {
         var customClassNames = this.normalizeClassNames(options.slotLabelClassNames, hookProps);
         return (common.createElement(common.MountHook, { hookProps: hookProps, didMount: options.slotLabelDidMount, willUnmount: options.slotLabelWillUnmount }, function (rootElRef) { return (common.createElement("th", { ref: rootElRef, className: classNames.concat(customClassNames).join(' '), "data-date": dateEnv.formatIso(cell.date, { omitTime: !tDateProfile.isTimeScale, omitTimeZoneOffset: true }), colSpan: cell.colspan },
             common.createElement("div", { className: "fc-timeline-slot-frame", style: { height: props.rowInnerHeight } },
-                common.createElement(TimelineHeaderThInner, { hookProps: hookProps, isSticky: props.isSticky, navLinkData: navLinkData })))); }));
+                common.createElement(TimelineHeaderThInner, { hookProps: hookProps, isSticky: props.isSticky, navLinkAttrs: _this.buildCellNavLinkAttrs(context, cell.date, cell.rowUnit) })))); }));
     };
     return TimelineHeaderTh;
 }(common.BaseComponent));
+function buildCellNavLinkAttrs(context, cellDate, rowUnit) {
+    return (rowUnit && rowUnit !== 'time')
+        ? common.buildNavLinkAttrs(context, cellDate, rowUnit)
+        : {};
+}
 
 var TimelineHeaderRows = /** @class */ (function (_super) {
     tslib.__extends(TimelineHeaderRows, _super);
@@ -547,49 +548,6 @@ var TimelineHeaderRows = /** @class */ (function (_super) {
     return TimelineHeaderRows;
 }(common.BaseComponent));
 
-var TimelineHeader = /** @class */ (function (_super) {
-    tslib.__extends(TimelineHeader, _super);
-    function TimelineHeader() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.rootElRef = common.createRef();
-        return _this;
-    }
-    TimelineHeader.prototype.render = function () {
-        var _this = this;
-        var _a = this, props = _a.props, context = _a.context;
-        // TODO: very repetitive
-        // TODO: make part of tDateProfile?
-        var timerUnit = common.greatestDurationDenominator(props.tDateProfile.slotDuration).unit;
-        // WORKAROUND: make ignore slatCoords when out of sync with dateProfile
-        var slatCoords = props.slatCoords && props.slatCoords.dateProfile === props.dateProfile ? props.slatCoords : null;
-        return (common.createElement(common.NowTimer, { unit: timerUnit }, function (nowDate, todayRange) { return (common.createElement("div", { className: "fc-timeline-header", ref: _this.rootElRef },
-            common.createElement("table", { className: "fc-scrollgrid-sync-table", style: { minWidth: props.tableMinWidth, width: props.clientWidth } },
-                props.tableColGroupNode,
-                common.createElement("tbody", null,
-                    common.createElement(TimelineHeaderRows, { dateProfile: props.dateProfile, tDateProfile: props.tDateProfile, nowDate: nowDate, todayRange: todayRange, rowInnerHeights: props.rowInnerHeights }))),
-            context.options.nowIndicator && (
-            // need to have a container regardless of whether the current view has a visible now indicator
-            // because apparently removal of the element resets the scroll for some reasons (issue #5351).
-            // this issue doesn't happen for the timeline body however (
-            common.createElement("div", { className: "fc-timeline-now-indicator-container" }, (slatCoords && slatCoords.isDateInRange(nowDate)) && (common.createElement(common.NowIndicatorRoot, { isAxis: true, date: nowDate }, function (rootElRef, classNames, innerElRef, innerContent) { return (common.createElement("div", { ref: rootElRef, className: ['fc-timeline-now-indicator-arrow'].concat(classNames).join(' '), style: { left: slatCoords.dateToCoord(nowDate) } }, innerContent)); })))))); }));
-    };
-    TimelineHeader.prototype.componentDidMount = function () {
-        this.updateSize();
-    };
-    TimelineHeader.prototype.componentDidUpdate = function () {
-        this.updateSize();
-    };
-    TimelineHeader.prototype.updateSize = function () {
-        if (this.props.onMaxCushionWidth) {
-            this.props.onMaxCushionWidth(this.computeMaxCushionWidth());
-        }
-    };
-    TimelineHeader.prototype.computeMaxCushionWidth = function () {
-        return Math.max.apply(Math, common.findElements(this.rootElRef.current, '.fc-timeline-header-row:last-child .fc-timeline-slot-cushion').map(function (el) { return el.getBoundingClientRect().width; }));
-    };
-    return TimelineHeader;
-}(common.BaseComponent));
-
 var TimelineCoords = /** @class */ (function () {
     function TimelineCoords(slatRootEl, // okay to expose?
     slatEls, dateProfile, tDateProfile, dateEnv, isRtl) {
@@ -605,17 +563,10 @@ var TimelineCoords = /** @class */ (function () {
         this.innerCoordCache = new common.PositionCache(slatRootEl, common.findDirectChildren(slatEls, 'div'), true, // isHorizontal
         false);
     }
-    TimelineCoords.prototype.rangeToCoords = function (range) {
-        if (this.isRtl) {
-            return { right: this.dateToCoord(range.start), left: this.dateToCoord(range.end) };
-        }
-        return { left: this.dateToCoord(range.start), right: this.dateToCoord(range.end) };
-    };
     TimelineCoords.prototype.isDateInRange = function (date) {
         return common.rangeContainsMarker(this.dateProfile.currentRange, date);
     };
-    // for LTR, results range from 0 to width of area
-    // for RTL, results range from negative width of area to 0
+    // results range from negative width of area to 0
     TimelineCoords.prototype.dateToCoord = function (date) {
         var tDateProfile = this.tDateProfile;
         var snapCoverage = this.computeDateSnapCoverage(date);
@@ -625,31 +576,43 @@ var TimelineCoords = /** @class */ (function () {
         var partial = slotCoverage - slotIndex;
         var _a = this, innerCoordCache = _a.innerCoordCache, outerCoordCache = _a.outerCoordCache;
         if (this.isRtl) {
-            return (outerCoordCache.rights[slotIndex] -
-                (innerCoordCache.getWidth(slotIndex) * partial)) - outerCoordCache.originClientRect.width;
+            return outerCoordCache.originClientRect.width - (outerCoordCache.rights[slotIndex] -
+                (innerCoordCache.getWidth(slotIndex) * partial));
         }
         return (outerCoordCache.lefts[slotIndex] +
             (innerCoordCache.getWidth(slotIndex) * partial));
     };
-    // returned value is between 0 and the number of snaps
-    TimelineCoords.prototype.computeDateSnapCoverage = function (date) {
-        return computeDateSnapCoverage(date, this.tDateProfile, this.dateEnv);
+    TimelineCoords.prototype.rangeToCoords = function (range) {
+        return {
+            start: this.dateToCoord(range.start),
+            end: this.dateToCoord(range.end),
+        };
     };
-    TimelineCoords.prototype.computeDurationLeft = function (duration) {
+    TimelineCoords.prototype.durationToCoord = function (duration) {
         var _a = this, dateProfile = _a.dateProfile, tDateProfile = _a.tDateProfile, dateEnv = _a.dateEnv, isRtl = _a.isRtl;
-        var left = 0;
+        var coord = 0;
         if (dateProfile) {
             var date = dateEnv.add(dateProfile.activeRange.start, duration);
             if (!tDateProfile.isTimeScale) {
                 date = common.startOfDay(date);
             }
-            left = this.dateToCoord(date);
+            coord = this.dateToCoord(date);
             // hack to overcome the left borders of non-first slat
-            if (!isRtl && left) {
-                left += 1;
+            if (!isRtl && coord) {
+                coord += 1;
             }
         }
-        return left;
+        return coord;
+    };
+    TimelineCoords.prototype.coordFromLeft = function (coord) {
+        if (this.isRtl) {
+            return this.outerCoordCache.originClientRect.width - coord;
+        }
+        return coord;
+    };
+    // returned value is between 0 and the number of snaps
+    TimelineCoords.prototype.computeDateSnapCoverage = function (date) {
+        return computeDateSnapCoverage(date, this.tDateProfile, this.dateEnv);
     };
     return TimelineCoords;
 }());
@@ -674,6 +637,67 @@ function computeDateSnapCoverage(date, tDateProfile, dateEnv) {
     }
     return snapCoverage;
 }
+function coordToCss(hcoord, isRtl) {
+    if (hcoord === null) {
+        return { left: '', right: '' };
+    }
+    if (isRtl) {
+        return { right: hcoord, left: '' };
+    }
+    return { left: hcoord, right: '' };
+}
+function coordsToCss(hcoords, isRtl) {
+    if (!hcoords) {
+        return { left: '', right: '' };
+    }
+    if (isRtl) {
+        return { right: hcoords.start, left: -hcoords.end };
+    }
+    return { left: hcoords.start, right: -hcoords.end };
+}
+
+var TimelineHeader = /** @class */ (function (_super) {
+    tslib.__extends(TimelineHeader, _super);
+    function TimelineHeader() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.rootElRef = common.createRef();
+        return _this;
+    }
+    TimelineHeader.prototype.render = function () {
+        var _this = this;
+        var _a = this, props = _a.props, context = _a.context;
+        // TODO: very repetitive
+        // TODO: make part of tDateProfile?
+        var timerUnit = common.greatestDurationDenominator(props.tDateProfile.slotDuration).unit;
+        // WORKAROUND: make ignore slatCoords when out of sync with dateProfile
+        var slatCoords = props.slatCoords && props.slatCoords.dateProfile === props.dateProfile ? props.slatCoords : null;
+        return (common.createElement(common.NowTimer, { unit: timerUnit }, function (nowDate, todayRange) { return (common.createElement("div", { className: "fc-timeline-header", ref: _this.rootElRef },
+            common.createElement("table", { "aria-hidden": true, className: "fc-scrollgrid-sync-table", style: { minWidth: props.tableMinWidth, width: props.clientWidth } },
+                props.tableColGroupNode,
+                common.createElement("tbody", null,
+                    common.createElement(TimelineHeaderRows, { dateProfile: props.dateProfile, tDateProfile: props.tDateProfile, nowDate: nowDate, todayRange: todayRange, rowInnerHeights: props.rowInnerHeights }))),
+            context.options.nowIndicator && (
+            // need to have a container regardless of whether the current view has a visible now indicator
+            // because apparently removal of the element resets the scroll for some reasons (issue #5351).
+            // this issue doesn't happen for the timeline body however (
+            common.createElement("div", { className: "fc-timeline-now-indicator-container" }, (slatCoords && slatCoords.isDateInRange(nowDate)) && (common.createElement(common.NowIndicatorRoot, { isAxis: true, date: nowDate }, function (rootElRef, classNames, innerElRef, innerContent) { return (common.createElement("div", { ref: rootElRef, className: ['fc-timeline-now-indicator-arrow'].concat(classNames).join(' '), style: coordToCss(slatCoords.dateToCoord(nowDate), context.isRtl) }, innerContent)); })))))); }));
+    };
+    TimelineHeader.prototype.componentDidMount = function () {
+        this.updateSize();
+    };
+    TimelineHeader.prototype.componentDidUpdate = function () {
+        this.updateSize();
+    };
+    TimelineHeader.prototype.updateSize = function () {
+        if (this.props.onMaxCushionWidth) {
+            this.props.onMaxCushionWidth(this.computeMaxCushionWidth());
+        }
+    };
+    TimelineHeader.prototype.computeMaxCushionWidth = function () {
+        return Math.max.apply(Math, common.findElements(this.rootElRef.current, '.fc-timeline-header-row:last-child .fc-timeline-slot-cushion').map(function (el) { return el.getBoundingClientRect().width; }));
+    };
+    return TimelineHeader;
+}(common.BaseComponent));
 
 var TimelineSlatCell = /** @class */ (function (_super) {
     tslib.__extends(TimelineSlatCell, _super);
@@ -735,7 +759,7 @@ var TimelineSlats = /** @class */ (function (_super) {
             var coords = _this.coords;
             if (onScrollLeftRequest && coords) {
                 if (request.time) {
-                    var scrollLeft = coords.computeDurationLeft(request.time);
+                    var scrollLeft = coords.coordFromLeft(coords.durationToCoord(request.time));
                     onScrollLeftRequest(scrollLeft);
                 }
                 return true;
@@ -747,7 +771,7 @@ var TimelineSlats = /** @class */ (function (_super) {
     TimelineSlats.prototype.render = function () {
         var _a = this, props = _a.props, context = _a.context;
         return (common.createElement("div", { className: "fc-timeline-slots", ref: this.rootElRef },
-            common.createElement("table", { className: context.theme.getClass('table'), style: {
+            common.createElement("table", { "aria-hidden": true, className: context.theme.getClass('table'), style: {
                     minWidth: props.tableMinWidth,
                     width: props.clientWidth,
                 } },
@@ -775,7 +799,7 @@ var TimelineSlats = /** @class */ (function (_super) {
         // ^it's possible to have clientWidth immediately after mount (when returning from print view), but w/o scrollResponder
         ) {
             var rootEl = this.rootElRef.current;
-            if (rootEl.offsetWidth) {
+            if (rootEl.offsetWidth) { // not hidden by css
                 this.coords = new TimelineCoords(this.rootElRef.current, collectCellEls(this.cellElRefs.currentMap, props.tDateProfile.slotDates), props.dateProfile, props.tDateProfile, context.dateEnv, context.isRtl);
                 if (props.onCoords) {
                     props.onCoords(this.coords);
@@ -819,6 +843,109 @@ function collectCellEls(elMap, slotDates) {
     });
 }
 
+function computeSegHCoords(segs, minWidth, timelineCoords) {
+    var hcoords = [];
+    if (timelineCoords) {
+        for (var _i = 0, segs_1 = segs; _i < segs_1.length; _i++) {
+            var seg = segs_1[_i];
+            var res = timelineCoords.rangeToCoords(seg);
+            var start = Math.round(res.start); // for barely-overlapping collisions
+            var end = Math.round(res.end); //
+            if (end - start < minWidth) {
+                end = start + minWidth;
+            }
+            hcoords.push({ start: start, end: end });
+        }
+    }
+    return hcoords;
+}
+function computeFgSegPlacements(segs, segHCoords, // might not have for every seg
+eventInstanceHeights, // might not have for every seg
+moreLinkHeights, // might not have for every more-link
+strictOrder, maxStackCnt) {
+    var segInputs = [];
+    var crudePlacements = []; // when we don't know dims
+    for (var i = 0; i < segs.length; i += 1) {
+        var seg = segs[i];
+        var instanceId = seg.eventRange.instance.instanceId;
+        var height = eventInstanceHeights[instanceId];
+        var hcoords = segHCoords[i];
+        if (height && hcoords) {
+            segInputs.push({
+                index: i,
+                span: hcoords,
+                thickness: height,
+            });
+        }
+        else {
+            crudePlacements.push({
+                seg: seg,
+                hcoords: hcoords,
+                top: null,
+            });
+        }
+    }
+    var hierarchy = new common.SegHierarchy();
+    if (strictOrder != null) {
+        hierarchy.strictOrder = strictOrder;
+    }
+    if (maxStackCnt != null) {
+        hierarchy.maxStackCnt = maxStackCnt;
+    }
+    var hiddenEntries = hierarchy.addSegs(segInputs);
+    var hiddenPlacements = hiddenEntries.map(function (entry) { return ({
+        seg: segs[entry.index],
+        hcoords: entry.span,
+        top: null,
+    }); });
+    var hiddenGroups = common.groupIntersectingEntries(hiddenEntries);
+    var moreLinkInputs = [];
+    var moreLinkCrudePlacements = [];
+    var extractSeg = function (entry) { return segs[entry.index]; };
+    for (var i = 0; i < hiddenGroups.length; i += 1) {
+        var hiddenGroup = hiddenGroups[i];
+        var sortedSegs = hiddenGroup.entries.map(extractSeg);
+        var height = moreLinkHeights[common.buildIsoString(common.computeEarliestSegStart(sortedSegs))]; // not optimal :(
+        if (height != null) {
+            // NOTE: the hiddenGroup's spanStart/spanEnd are already computed by rangeToCoords. computed during input.
+            moreLinkInputs.push({
+                index: segs.length + i,
+                thickness: height,
+                span: hiddenGroup.span,
+            });
+        }
+        else {
+            moreLinkCrudePlacements.push({
+                seg: sortedSegs,
+                hcoords: hiddenGroup.span,
+                top: null,
+            });
+        }
+    }
+    // add more-links into the hierarchy, but don't limit
+    hierarchy.maxStackCnt = -1;
+    hierarchy.addSegs(moreLinkInputs);
+    var visibleRects = hierarchy.toRects();
+    var visiblePlacements = [];
+    var maxHeight = 0;
+    for (var _i = 0, visibleRects_1 = visibleRects; _i < visibleRects_1.length; _i++) {
+        var rect = visibleRects_1[_i];
+        var segIndex = rect.index;
+        visiblePlacements.push({
+            seg: segIndex < segs.length
+                ? segs[segIndex] // a real seg
+                : hiddenGroups[segIndex - segs.length].entries.map(extractSeg),
+            hcoords: rect.span,
+            top: rect.levelCoord,
+        });
+        maxHeight = Math.max(maxHeight, rect.levelCoord + rect.thickness);
+    }
+    return [
+        visiblePlacements.concat(crudePlacements, hiddenPlacements, moreLinkCrudePlacements),
+        maxHeight,
+    ];
+}
+
 var TimelineLaneBg = /** @class */ (function (_super) {
     tslib.__extends(TimelineLaneBg, _super);
     function TimelineLaneBg() {
@@ -834,12 +961,12 @@ var TimelineLaneBg = /** @class */ (function (_super) {
     };
     TimelineLaneBg.prototype.renderSegs = function (segs, timelineCoords, fillType) {
         var _a = this.props, todayRange = _a.todayRange, nowDate = _a.nowDate;
-        var children = segs.map(function (seg) {
-            var coords = timelineCoords.rangeToCoords(seg); // seg has { start, end }
-            return (common.createElement("div", { key: common.buildEventRangeKey(seg.eventRange), className: "fc-timeline-bg-harness", style: {
-                    left: coords.left,
-                    right: -coords.right, // outwards from right edge (which is same as left edge)
-                } }, fillType === 'bg-event' ?
+        var isRtl = this.context.isRtl;
+        var segHCoords = computeSegHCoords(segs, 0, timelineCoords);
+        var children = segs.map(function (seg, i) {
+            var hcoords = segHCoords[i];
+            var hStyle = coordsToCss(hcoords, isRtl);
+            return (common.createElement("div", { key: common.buildEventRangeKey(seg.eventRange), className: "fc-timeline-bg-harness", style: hStyle }, fillType === 'bg-event' ?
                 common.createElement(common.BgEvent, tslib.__assign({ seg: seg }, common.getSegMeta(seg, todayRange, nowDate))) :
                 common.renderFill(fillType)));
         });
@@ -904,144 +1031,36 @@ var TimelineLaneMoreLink = /** @class */ (function (_super) {
     }
     TimelineLaneMoreLink.prototype.render = function () {
         var _this = this;
-        var props = this.props;
+        var _a = this, props = _a.props, context = _a.context;
         var hiddenSegs = props.hiddenSegs, elRef = props.elRef, placement = props.placement, resourceId = props.resourceId;
+        var top = placement.top, hcoords = placement.hcoords;
+        var isVisible = hcoords && top !== null;
+        var hStyle = coordsToCss(hcoords, context.isRtl);
         var extraDateSpan = resourceId ? { resourceId: resourceId } : {};
         return (common.createElement(common.MoreLinkRoot, { allDayDate: null, moreCnt: hiddenSegs.length, allSegs: hiddenSegs, hiddenSegs: hiddenSegs, alignmentElRef: this.rootElRef, dateProfile: props.dateProfile, todayRange: props.todayRange, extraDateSpan: extraDateSpan, popoverContent: function () { return (common.createElement(common.Fragment, null, hiddenSegs.map(function (seg) {
                 var instanceId = seg.eventRange.instance.instanceId;
                 return (common.createElement("div", { key: instanceId, style: { visibility: props.isForcedInvisible[instanceId] ? 'hidden' : '' } },
                     common.createElement(TimelineEvent, tslib.__assign({ isTimeScale: props.isTimeScale, seg: seg, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: instanceId === props.eventSelection }, common.getSegMeta(seg, props.todayRange, props.nowDate)))));
-            }))); } }, function (rootElRef, classNames, innerElRef, innerContent, handleClick) { return (common.createElement("a", { ref: function (el) {
+            }))); } }, function (rootElRef, classNames, innerElRef, innerContent, handleClick, title, isExpanded, popoverId) { return (common.createElement("a", { ref: function (el) {
                 common.setRef(rootElRef, el); // for MoreLinkRoot
                 common.setRef(elRef, el); // for props props
                 common.setRef(_this.rootElRef, el); // for this component
-            }, className: ['fc-timeline-more-link'].concat(classNames).join(' '), style: {
-                left: placement.left,
-                right: -placement.right,
-                top: placement.top,
-                visibility: placement.isVisible ? '' : 'hidden',
-            }, onClick: handleClick },
+            }, className: ['fc-timeline-more-link'].concat(classNames).join(' '), style: tslib.__assign({ visibility: isVisible ? '' : 'hidden', top: top || 0 }, hStyle), onClick: handleClick, title: title, "aria-expanded": isExpanded, "aria-controls": popoverId },
             common.createElement("div", { ref: innerElRef, className: "fc-timeline-more-link-inner fc-sticky" }, innerContent))); }));
     };
     return TimelineLaneMoreLink;
 }(common.BaseComponent));
 
-function computeFgSegPlacements(segs, timelineCoords, eventInstanceHeights, moreLinkHeights, minWidth, isRtl, strictOrder, maxStackCnt) {
-    var segInputs = [];
-    var crudePlacements = []; // when we don't know height
-    if (timelineCoords) {
-        for (var i = 0; i < segs.length; i += 1) {
-            var seg = segs[i];
-            var instanceId = seg.eventRange.instance.instanceId;
-            var height = eventInstanceHeights[instanceId];
-            var horizontalCoords = timelineCoords.rangeToCoords(seg);
-            var left = Math.round(horizontalCoords.left); // for barely-overlapping collisions
-            var right = Math.round(horizontalCoords.right); //
-            if (right - left < minWidth) {
-                if (isRtl) {
-                    left = right - minWidth;
-                }
-                else {
-                    right = left + minWidth;
-                }
-            }
-            if (height != null) {
-                segInputs.push({
-                    index: i,
-                    spanStart: left,
-                    spanEnd: right,
-                    thickness: height,
-                });
-            }
-            else {
-                crudePlacements.push({
-                    seg: seg,
-                    isVisible: false,
-                    left: left,
-                    right: right,
-                    top: 0,
-                });
-            }
-        }
-    }
-    var hierarchy = new common.SegHierarchy();
-    if (strictOrder != null) {
-        hierarchy.strictOrder = strictOrder;
-    }
-    if (maxStackCnt != null) {
-        hierarchy.maxStackCnt = maxStackCnt;
-    }
-    var hiddenEntries = hierarchy.addSegs(segInputs);
-    var hiddenPlacements = hiddenEntries.map(function (entry) { return ({
-        seg: segs[entry.segInput.index],
-        isVisible: false,
-        left: entry.spanStart,
-        right: entry.spanEnd,
-        top: 0,
-    }); });
-    var hiddenGroups = common.groupIntersectingEntries(hiddenEntries);
-    var moreLinkInputs = [];
-    var moreLinkCrudePlacements = [];
-    var extractSeg = function (entry) { return segs[entry.segInput.index]; };
-    for (var i = 0; i < hiddenGroups.length; i += 1) {
-        var hiddenGroup = hiddenGroups[i];
-        var sortedSegs = hiddenGroup.entries.map(extractSeg);
-        var height = moreLinkHeights[common.buildIsoString(common.computeEarliestSegStart(sortedSegs))]; // not optimal :(
-        if (height != null) {
-            // NOTE: the hiddenGroup's spanStart/spanEnd are already computed by rangeToCoords. computed during input.
-            moreLinkInputs.push({
-                index: segs.length + i,
-                spanStart: hiddenGroup.spanStart,
-                spanEnd: hiddenGroup.spanEnd,
-                thickness: height,
-            });
-        }
-        else {
-            moreLinkCrudePlacements.push({
-                seg: sortedSegs,
-                isVisible: false,
-                left: hiddenGroup.spanStart,
-                right: hiddenGroup.spanEnd,
-                top: 0,
-            });
-        }
-    }
-    // add more-links into the hierarchy, but don't limit
-    hierarchy.maxStackCnt = -1;
-    hierarchy.addSegs(moreLinkInputs);
-    var visibleRects = hierarchy.toRects();
-    var visiblePlacements = [];
-    var maxHeight = 0;
-    for (var _i = 0, visibleRects_1 = visibleRects; _i < visibleRects_1.length; _i++) {
-        var rect = visibleRects_1[_i];
-        var segIndex = rect.segInput.index;
-        visiblePlacements.push({
-            seg: segIndex < segs.length
-                ? segs[segIndex] // a real seg
-                : hiddenGroups[segIndex - segs.length].entries.map(extractSeg),
-            isVisible: true,
-            left: rect.spanStart,
-            right: rect.spanEnd,
-            top: rect.levelCoord,
-        });
-        maxHeight = Math.max(maxHeight, rect.levelCoord + rect.thickness);
-    }
-    return [
-        visiblePlacements.concat(crudePlacements, hiddenPlacements, moreLinkCrudePlacements),
-        maxHeight,
-    ];
-}
-
 var TimelineLane = /** @class */ (function (_super) {
     tslib.__extends(TimelineLane, _super);
     function TimelineLane() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.slicer = new TimelineLaneSlicer();
         _this.sortEventSegs = common.memoize(common.sortEventSegs);
-        _this.computeFgSegPlacements = common.memoize(computeFgSegPlacements);
         _this.harnessElRefs = new common.RefMap();
         _this.moreElRefs = new common.RefMap();
         _this.innerElRef = common.createRef();
+        // TODO: memoize event positioning
         _this.state = {
             eventInstanceHeights: {},
             moreLinkHeights: {},
@@ -1058,7 +1077,8 @@ var TimelineLane = /** @class */ (function (_super) {
             (slicedProps.eventResize ? slicedProps.eventResize.segs : null) ||
             [];
         var fgSegs = this.sortEventSegs(slicedProps.fgEventSegs, options.eventOrder);
-        var _b = this.computeFgSegPlacements(fgSegs, props.timelineCoords, state.eventInstanceHeights, state.moreLinkHeights, options.eventMinWidth, context.isRtl, options.eventOrderStrict, options.eventMaxStack), fgPlacements = _b[0], fgHeight = _b[1];
+        var fgSegHCoords = computeSegHCoords(fgSegs, options.eventMinWidth, props.timelineCoords);
+        var _b = computeFgSegPlacements(fgSegs, fgSegHCoords, state.eventInstanceHeights, state.moreLinkHeights, options.eventOrderStrict, options.eventMaxStack), fgPlacements = _b[0], fgHeight = _b[1];
         var isForcedInvisible = // TODO: more convenient
          (slicedProps.eventDrag ? slicedProps.eventDrag.affectedInstances : null) ||
             (slicedProps.eventResize ? slicedProps.eventResize.affectedInstances : null) ||
@@ -1066,7 +1086,7 @@ var TimelineLane = /** @class */ (function (_super) {
         return (common.createElement(common.Fragment, null,
             common.createElement(TimelineLaneBg, { businessHourSegs: slicedProps.businessHourSegs, bgEventSegs: slicedProps.bgEventSegs, timelineCoords: props.timelineCoords, eventResizeSegs: slicedProps.eventResize ? slicedProps.eventResize.segs : [] /* bad new empty array? */, dateSelectionSegs: slicedProps.dateSelectionSegs, nowDate: props.nowDate, todayRange: props.todayRange }),
             common.createElement("div", { className: "fc-timeline-events fc-scrollgrid-sync-inner", ref: this.innerElRef, style: { height: fgHeight } },
-                this.renderFgSegs(fgPlacements, isForcedInvisible),
+                this.renderFgSegs(fgPlacements, isForcedInvisible, false, false, false),
                 this.renderFgSegs(buildMirrorPlacements(mirrorSegs, props.timelineCoords, fgPlacements), {}, Boolean(slicedProps.eventDrag), Boolean(slicedProps.eventResize), false))));
     };
     TimelineLane.prototype.componentDidMount = function () {
@@ -1099,22 +1119,18 @@ var TimelineLane = /** @class */ (function (_super) {
         }
     };
     TimelineLane.prototype.renderFgSegs = function (segPlacements, isForcedInvisible, isDragging, isResizing, isDateSelecting) {
-        var _a = this, harnessElRefs = _a.harnessElRefs, moreElRefs = _a.moreElRefs, props = _a.props;
+        var _a = this, harnessElRefs = _a.harnessElRefs, moreElRefs = _a.moreElRefs, props = _a.props, context = _a.context;
         var isMirror = isDragging || isResizing || isDateSelecting;
         return (common.createElement(common.Fragment, null, segPlacements.map(function (segPlacement) {
-            var seg = segPlacement.seg;
+            var seg = segPlacement.seg, hcoords = segPlacement.hcoords, top = segPlacement.top;
             if (Array.isArray(seg)) { // a more-link
                 var isoStr = common.buildIsoString(common.computeEarliestSegStart(seg));
                 return (common.createElement(TimelineLaneMoreLink, { key: 'm:' + isoStr /* "m" for "more" */, elRef: moreElRefs.createRef(isoStr), hiddenSegs: seg, placement: segPlacement, dateProfile: props.dateProfile, nowDate: props.nowDate, todayRange: props.todayRange, isTimeScale: props.tDateProfile.isTimeScale, eventSelection: props.eventSelection, resourceId: props.resourceId, isForcedInvisible: isForcedInvisible }));
             }
             var instanceId = seg.eventRange.instance.instanceId;
-            var isVisible = segPlacement.isVisible && !isForcedInvisible[instanceId];
-            return (common.createElement("div", { key: 'e:' + instanceId /* "e" for "event" */, ref: isMirror ? null : harnessElRefs.createRef(instanceId), className: "fc-timeline-event-harness", style: {
-                    left: segPlacement.left,
-                    right: -segPlacement.right,
-                    top: segPlacement.top,
-                    visibility: isVisible ? '' : 'hidden',
-                } },
+            var isVisible = isMirror || Boolean(!isForcedInvisible[instanceId] && hcoords && top !== null);
+            var hStyle = coordsToCss(hcoords, context.isRtl);
+            return (common.createElement("div", { key: 'e:' + instanceId /* "e" for "event" */, ref: isMirror ? null : harnessElRefs.createRef(instanceId), className: "fc-timeline-event-harness", style: tslib.__assign({ visibility: isVisible ? '' : 'hidden', top: top || 0 }, hStyle) },
                 common.createElement(TimelineEvent, tslib.__assign({ isTimeScale: props.tDateProfile.isTimeScale, seg: seg, isDragging: isDragging, isResizing: isResizing, isDateSelecting: isDateSelecting, isSelected: instanceId === props.eventSelection /* TODO: bad for mirror? */ }, common.getSegMeta(seg, props.todayRange, props.nowDate)))));
         })));
     };
@@ -1129,16 +1145,11 @@ function buildMirrorPlacements(mirrorSegs, timelineCoords, fgPlacements) {
         return [];
     }
     var topsByInstanceId = buildAbsoluteTopHash(fgPlacements); // TODO: cache this at first render?
-    return mirrorSegs.map(function (seg) {
-        var horizontalCoords = timelineCoords.rangeToCoords(seg);
-        return {
-            seg: seg,
-            isVisible: true,
-            left: horizontalCoords.left,
-            right: horizontalCoords.right,
-            top: topsByInstanceId[seg.eventRange.instance.instanceId],
-        };
-    });
+    return mirrorSegs.map(function (seg) { return ({
+        seg: seg,
+        hcoords: timelineCoords.rangeToCoords(seg),
+        top: topsByInstanceId[seg.eventRange.instance.instanceId],
+    }); });
 }
 function buildAbsoluteTopHash(placements) {
     var topsByInstanceId = {};
@@ -1191,7 +1202,7 @@ var TimelineGrid = /** @class */ (function (_super) {
                 common.createElement(TimelineSlats, { ref: _this.slatsRef, dateProfile: dateProfile, tDateProfile: tDateProfile, nowDate: nowDate, todayRange: todayRange, clientWidth: props.clientWidth, tableColGroupNode: props.tableColGroupNode, tableMinWidth: props.tableMinWidth, onCoords: _this.handleCoords, onScrollLeftRequest: props.onScrollLeftRequest }),
                 common.createElement(TimelineLane, { dateProfile: dateProfile, tDateProfile: props.tDateProfile, nowDate: nowDate, todayRange: todayRange, nextDayThreshold: options.nextDayThreshold, businessHours: props.businessHours, eventStore: props.eventStore, eventUiBases: props.eventUiBases, dateSelection: props.dateSelection, eventSelection: props.eventSelection, eventDrag: props.eventDrag, eventResize: props.eventResize, timelineCoords: state.coords }),
                 (options.nowIndicator && state.coords && state.coords.isDateInRange(nowDate)) && (common.createElement("div", { className: "fc-timeline-now-indicator-container" },
-                    common.createElement(common.NowIndicatorRoot, { isAxis: false, date: nowDate }, function (rootElRef, classNames, innerElRef, innerContent) { return (common.createElement("div", { ref: rootElRef, className: ['fc-timeline-now-indicator-line'].concat(classNames).join(' '), style: { left: state.coords.dateToCoord(nowDate) } }, innerContent)); }))))); })));
+                    common.createElement(common.NowIndicatorRoot, { isAxis: false, date: nowDate }, function (rootElRef, classNames, innerElRef, innerContent) { return (common.createElement("div", { ref: rootElRef, className: ['fc-timeline-now-indicator-line'].concat(classNames).join(' '), style: coordToCss(state.coords.dateToCoord(nowDate), context.isRtl) }, innerContent)); }))))); })));
     };
     // Hit System
     // ------------------------------------------------------------------------------------------
@@ -1342,4 +1353,6 @@ exports.TimelineSlats = TimelineSlats;
 exports.TimelineView = TimelineView;
 exports.buildSlatCols = buildSlatCols;
 exports.buildTimelineDateProfile = buildTimelineDateProfile;
+exports.coordToCss = coordToCss;
+exports.coordsToCss = coordsToCss;
 exports.default = main;

package/main.css

@@ -40,6 +40,13 @@ vertical slots in both the header AND the body
 .fc .fc-timeline-header-row-chrono .fc-timeline-slot-frame {
       justify-content: flex-start; /* horizontal align left or right */
     }
+.fc .fc-timeline-header-row:last-child { /* guaranteed NOT to have sticky elements */
+  }
+.fc .fc-timeline-header-row:last-child .fc-timeline-slot-frame {
+      /* so text doesn't bleed out and cause extra scroll */
+      /* (won't work with sticky elements) */
+      overflow: hidden;
+    }
 .fc .fc-timeline-slot-cushion {
     padding: 4px 5px; /* TODO: unify with fc-col-header? */
     white-space: nowrap;