@fullcalendar/timeline 6.1.15 → 7.0.0-beta.1

package/index.global.js

@@ -1,5 +1,5 @@
 /*!
-FullCalendar Timeline Plugin v6.1.15
+FullCalendar Timeline Plugin v7.0.0-beta.1
 Docs & License: https://fullcalendar.io/docs/timeline-view-no-resources
 (c) 2024 Adam Shaw
 */
@@ -448,152 +448,91 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
         return { date, text, rowUnit, colspan: 1, isWeekStart: false };
     }
 
-    class TimelineHeaderTh extends internal$1.BaseComponent {
+    class TimelineSlatCell extends internal$1.BaseComponent {
         constructor() {
             super(...arguments);
-            this.refineRenderProps = internal$1.memoizeObjArg(refineRenderProps);
-            this.buildCellNavLinkAttrs = internal$1.memoize(buildCellNavLinkAttrs);
+            // ref
+            this.innerElRef = preact.createRef();
         }
         render() {
             let { props, context } = this;
-            let { dateEnv, options } = context;
-            let { cell, dateProfile, tDateProfile } = props;
-            // the cell.rowUnit is f'd
-            // giving 'month' for a 3-day view
-            // workaround: to infer day, do NOT time
-            let dateMeta = internal$1.getDateMeta(cell.date, props.todayRange, props.nowDate, dateProfile);
-            let renderProps = this.refineRenderProps({
-                level: props.rowLevel,
-                dateMarker: cell.date,
-                text: cell.text,
-                dateEnv: context.dateEnv,
-                viewApi: context.viewApi,
-            });
-            return (preact.createElement(internal$1.ContentContainer, { elTag: "th", elClasses: [
+            let { dateEnv, options, theme } = context;
+            let { date, tDateProfile, isEm } = props;
+            let dateMeta = internal$1.getDateMeta(props.date, props.todayRange, props.nowDate, props.dateProfile);
+            let renderProps = Object.assign(Object.assign({ date: dateEnv.toDate(props.date) }, dateMeta), { view: context.viewApi });
+            return (preact.createElement(internal$1.ContentContainer, { elTag: "div", elClasses: [
+                    'fc-flex-column',
+                    'fc-align-start',
+                    'fc-cell',
                     'fc-timeline-slot',
-                    'fc-timeline-slot-label',
-                    cell.isWeekStart && 'fc-timeline-slot-em',
-                    ...( // TODO: so slot classnames for week/month/bigger. see note above about rowUnit
-                    cell.rowUnit === 'time' ?
-                        internal$1.getSlotClassNames(dateMeta, context.theme) :
-                        internal$1.getDayClassNames(dateMeta, context.theme)),
+                    'fc-timeline-slot-lane',
+                    isEm ? 'fc-timeline-slot-em' : '',
+                    tDateProfile.isTimeScale ? (internal$1.isInt(dateEnv.countDurationsBetween(// best to do this here?
+                    tDateProfile.normalizedRange.start, props.date, tDateProfile.labelInterval)) ?
+                        'fc-timeline-slot-major' :
+                        'fc-timeline-slot-minor') : '',
+                    ...(props.isDay ?
+                        internal$1.getDayClassNames(dateMeta, theme) :
+                        internal$1.getSlotClassNames(dateMeta, theme)),
                 ], elAttrs: {
-                    colSpan: cell.colspan,
-                    'data-date': dateEnv.formatIso(cell.date, {
-                        omitTime: !tDateProfile.isTimeScale,
+                    'data-date': dateEnv.formatIso(date, {
                         omitTimeZoneOffset: true,
+                        omitTime: !tDateProfile.isTimeScale,
                     }),
-                }, renderProps: renderProps, generatorName: "slotLabelContent", customGenerator: options.slotLabelContent, defaultGenerator: renderInnerContent, classNameGenerator: options.slotLabelClassNames, didMount: options.slotLabelDidMount, willUnmount: options.slotLabelWillUnmount }, (InnerContent) => (preact.createElement("div", { className: "fc-timeline-slot-frame", style: { height: props.rowInnerHeight } },
-                preact.createElement(InnerContent, { elTag: "a", elClasses: [
-                        'fc-timeline-slot-cushion',
-                        'fc-scrollgrid-sync-inner',
-                        props.isSticky && 'fc-sticky',
-                    ], elAttrs: this.buildCellNavLinkAttrs(context, cell.date, cell.rowUnit) })))));
+                }, elStyle: {
+                    width: props.width,
+                }, renderProps: renderProps, generatorName: "slotLaneContent", customGenerator: options.slotLaneContent, classNameGenerator: options.slotLaneClassNames, didMount: options.slotLaneDidMount, willUnmount: options.slotLaneWillUnmount }, (InnerContent) => (preact.createElement("div", { ref: this.innerElRef, className: 'fc-flex-column' },
+                preact.createElement(InnerContent, { elTag: "div", elClasses: ['fc-cell-inner'] })))));
         }
-    }
-    function buildCellNavLinkAttrs(context, cellDate, rowUnit) {
-        return (rowUnit && rowUnit !== 'time')
-            ? internal$1.buildNavLinkAttrs(context, cellDate, rowUnit)
-            : {};
-    }
-    function renderInnerContent(renderProps) {
-        return renderProps.text;
-    }
-    function refineRenderProps(input) {
-        return {
-            level: input.level,
-            date: input.dateEnv.toDate(input.dateMarker),
-            view: input.viewApi,
-            text: input.text,
-        };
-    }
-
-    class TimelineHeaderRows extends internal$1.BaseComponent {
-        render() {
-            let { dateProfile, tDateProfile, rowInnerHeights, todayRange, nowDate } = this.props;
-            let { cellRows } = tDateProfile;
-            return (preact.createElement(preact.Fragment, null, cellRows.map((rowCells, rowLevel) => {
-                let isLast = rowLevel === cellRows.length - 1;
-                let isChrono = tDateProfile.isTimeScale && isLast; // the final row, with times?
-                let classNames = [
-                    'fc-timeline-header-row',
-                    isChrono ? 'fc-timeline-header-row-chrono' : '',
-                ];
-                return ( // eslint-disable-next-line react/no-array-index-key
-                preact.createElement("tr", { key: rowLevel, className: classNames.join(' ') }, rowCells.map((cell) => (preact.createElement(TimelineHeaderTh, { key: cell.date.toISOString(), cell: cell, rowLevel: rowLevel, dateProfile: dateProfile, tDateProfile: tDateProfile, todayRange: todayRange, nowDate: nowDate, rowInnerHeight: rowInnerHeights && rowInnerHeights[rowLevel], isSticky: !isLast })))));
-            })));
+        componentDidMount() {
+            const innerEl = this.innerElRef.current;
+            this.detachWidth = internal$1.watchWidth(innerEl, (width) => {
+                internal$1.setRef(this.props.innerWidthRef, width);
+            });
+        }
+        componentWillUnmount() {
+            this.detachWidth();
+            internal$1.setRef(this.props.innerWidthRef, null);
         }
     }
 
-    class TimelineCoords {
-        constructor(slatRootEl, // okay to expose?
-        slatEls, dateProfile, tDateProfile, dateEnv, isRtl) {
-            this.slatRootEl = slatRootEl;
-            this.dateProfile = dateProfile;
-            this.tDateProfile = tDateProfile;
-            this.dateEnv = dateEnv;
-            this.isRtl = isRtl;
-            this.outerCoordCache = new internal$1.PositionCache(slatRootEl, slatEls, true, // isHorizontal
-            false);
-            // for the inner divs within the slats
-            // used for event rendering and scrollTime, to disregard slat border
-            this.innerCoordCache = new internal$1.PositionCache(slatRootEl, internal$1.findDirectChildren(slatEls, 'div'), true, // isHorizontal
-            false);
-        }
-        isDateInRange(date) {
-            return internal$1.rangeContainsMarker(this.dateProfile.currentRange, date);
-        }
-        // results range from negative width of area to 0
-        dateToCoord(date) {
-            let { tDateProfile } = this;
-            let snapCoverage = this.computeDateSnapCoverage(date);
-            let slotCoverage = snapCoverage / tDateProfile.snapsPerSlot;
-            let slotIndex = Math.floor(slotCoverage);
-            slotIndex = Math.min(slotIndex, tDateProfile.slotCnt - 1);
-            let partial = slotCoverage - slotIndex;
-            let { innerCoordCache, outerCoordCache } = this;
-            if (this.isRtl) {
-                return outerCoordCache.originClientRect.width - (outerCoordCache.rights[slotIndex] -
-                    (innerCoordCache.getWidth(slotIndex) * partial));
-            }
-            return (outerCoordCache.lefts[slotIndex] +
-                (innerCoordCache.getWidth(slotIndex) * partial));
-        }
-        rangeToCoords(range) {
-            return {
-                start: this.dateToCoord(range.start),
-                end: this.dateToCoord(range.end),
-            };
-        }
-        durationToCoord(duration) {
-            let { dateProfile, tDateProfile, dateEnv, isRtl } = this;
-            let coord = 0;
-            if (dateProfile) {
-                let date = dateEnv.add(dateProfile.activeRange.start, duration);
-                if (!tDateProfile.isTimeScale) {
-                    date = internal$1.startOfDay(date);
-                }
-                coord = this.dateToCoord(date);
-                // hack to overcome the left borders of non-first slat
-                if (!isRtl && coord) {
-                    coord += 1;
+    class TimelineSlats extends internal$1.BaseComponent {
+        constructor() {
+            super(...arguments);
+            this.innerWidthRefMap = new internal$1.RefMap(() => {
+                internal$1.afterSize(this.handleInnerWidths);
+            });
+            this.handleInnerWidths = () => {
+                const innerWidthMap = this.innerWidthRefMap.current;
+                let max = 0;
+                for (const innerWidth of innerWidthMap.values()) {
+                    max = Math.max(max, innerWidth);
                 }
-            }
-            return coord;
-        }
-        coordFromLeft(coord) {
-            if (this.isRtl) {
-                return this.outerCoordCache.originClientRect.width - coord;
-            }
-            return coord;
+                // TODO: check to see if changed before firing ref!? YES. do in other places too
+                internal$1.setRef(this.props.innerWidthRef, max);
+            };
         }
-        // returned value is between 0 and the number of snaps
-        computeDateSnapCoverage(date) {
-            return computeDateSnapCoverage(date, this.tDateProfile, this.dateEnv);
+        render() {
+            let { props, innerWidthRefMap } = this;
+            let { tDateProfile, slotWidth } = props;
+            let { slotDates, isWeekStarts } = tDateProfile;
+            let isDay = !tDateProfile.isTimeScale && !tDateProfile.largeUnit;
+            return (preact.createElement("div", { className: "fc-timeline-slots fc-fill fc-flex-row" }, slotDates.map((slotDate, i) => {
+                let key = slotDate.toISOString();
+                return (preact.createElement(TimelineSlatCell, { key: key, date: slotDate, dateProfile: props.dateProfile, tDateProfile: tDateProfile, nowDate: props.nowDate, todayRange: props.todayRange, isEm: isWeekStarts[i], isDay: isDay, 
+                    // ref
+                    innerWidthRef: innerWidthRefMap.createRef(key), 
+                    // dimensions
+                    width: slotWidth }));
+            })));
         }
     }
+
+    /*
+    TODO: rename this file!
+    */
     // returned value is between 0 and the number of snaps
-    function computeDateSnapCoverage(date, tDateProfile, dateEnv) {
+    function computeDateSnapCoverage$1(date, tDateProfile, dateEnv) {
         let snapDiff = dateEnv.countDurationsBetween(tDateProfile.normalizedRange.start, date, tDateProfile.snapDuration);
         if (snapDiff < 0) {
             return 0;
@@ -613,6 +552,9 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
         }
         return snapCoverage;
     }
+    /*
+    TODO: audit!!!
+    */
     function coordToCss(hcoord, isRtl) {
         if (hcoord === null) {
             return { left: '', right: '' };
@@ -622,6 +564,9 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
         }
         return { left: hcoord, right: '' };
     }
+    /*
+    TODO: audit!!!
+    */
     function coordsToCss(hcoords, isRtl) {
         if (!hcoords) {
             return { left: '', right: '' };
@@ -631,216 +576,141 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
         }
         return { left: hcoords.start, right: -hcoords.end };
     }
-
-    class TimelineHeader extends internal$1.BaseComponent {
-        constructor() {
-            super(...arguments);
-            this.rootElRef = preact.createRef();
-        }
-        render() {
-            let { props, context } = this;
-            // TODO: very repetitive
-            // TODO: make part of tDateProfile?
-            let timerUnit = internal$1.greatestDurationDenominator(props.tDateProfile.slotDuration).unit;
-            // WORKAROUND: make ignore slatCoords when out of sync with dateProfile
-            let slatCoords = props.slatCoords && props.slatCoords.dateProfile === props.dateProfile ? props.slatCoords : null;
-            return (preact.createElement(internal$1.NowTimer, { unit: timerUnit }, (nowDate, todayRange) => (preact.createElement("div", { className: "fc-timeline-header", ref: this.rootElRef },
-                preact.createElement("table", { "aria-hidden": true, className: "fc-scrollgrid-sync-table", style: { minWidth: props.tableMinWidth, width: props.clientWidth } },
-                    props.tableColGroupNode,
-                    preact.createElement("tbody", null,
-                        preact.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 (
-                preact.createElement("div", { className: "fc-timeline-now-indicator-container" }, (slatCoords && slatCoords.isDateInRange(nowDate)) && (preact.createElement(internal$1.NowIndicatorContainer, { elClasses: ['fc-timeline-now-indicator-arrow'], elStyle: coordToCss(slatCoords.dateToCoord(nowDate), context.isRtl), isAxis: true, date: nowDate }))))))));
+    /*
+    TODO: DRY up with elsewhere?
+    */
+    function horizontalsToCss(hcoord, isRtl) {
+        if (!hcoord) {
+            return {};
         }
-        componentDidMount() {
-            this.updateSize();
+        if (isRtl) {
+            return { right: hcoord.start, width: hcoord.size };
         }
-        componentDidUpdate() {
-            this.updateSize();
+        else {
+            return { left: hcoord.start, width: hcoord.size };
         }
-        updateSize() {
-            if (this.props.onMaxCushionWidth) {
-                this.props.onMaxCushionWidth(this.computeMaxCushionWidth());
-            }
+    }
+    function horizontalCoordToCss(start, isRtl) {
+        if (isRtl) {
+            return { right: start };
         }
-        computeMaxCushionWidth() {
-            return Math.max(...internal$1.findElements(this.rootElRef.current, '.fc-timeline-header-row:last-child .fc-timeline-slot-cushion').map((el) => el.getBoundingClientRect().width));
+        else {
+            return { left: start };
         }
     }
 
-    class TimelineSlatCell extends internal$1.BaseComponent {
-        render() {
-            let { props, context } = this;
-            let { dateEnv, options, theme } = context;
-            let { date, tDateProfile, isEm } = props;
-            let dateMeta = internal$1.getDateMeta(props.date, props.todayRange, props.nowDate, props.dateProfile);
-            let renderProps = Object.assign(Object.assign({ date: dateEnv.toDate(props.date) }, dateMeta), { view: context.viewApi });
-            return (preact.createElement(internal$1.ContentContainer, { elTag: "td", elRef: props.elRef, elClasses: [
-                    'fc-timeline-slot',
-                    'fc-timeline-slot-lane',
-                    isEm && 'fc-timeline-slot-em',
-                    tDateProfile.isTimeScale ? (internal$1.isInt(dateEnv.countDurationsBetween(tDateProfile.normalizedRange.start, props.date, tDateProfile.labelInterval)) ?
-                        'fc-timeline-slot-major' :
-                        'fc-timeline-slot-minor') : '',
-                    ...(props.isDay ?
-                        internal$1.getDayClassNames(dateMeta, theme) :
-                        internal$1.getSlotClassNames(dateMeta, theme)),
-                ], elAttrs: {
-                    'data-date': dateEnv.formatIso(date, {
-                        omitTimeZoneOffset: true,
-                        omitTime: !tDateProfile.isTimeScale,
-                    }),
-                }, renderProps: renderProps, generatorName: "slotLaneContent", customGenerator: options.slotLaneContent, classNameGenerator: options.slotLaneClassNames, didMount: options.slotLaneDidMount, willUnmount: options.slotLaneWillUnmount }, (InnerContent) => (preact.createElement(InnerContent, { elTag: "div" }))));
+    function createVerticalStyle(props) {
+        if (props) {
+            return {
+                top: props.start,
+                height: props.size,
+            };
         }
     }
-
-    class TimelineSlatsBody extends internal$1.BaseComponent {
-        render() {
-            let { props } = this;
-            let { tDateProfile, cellElRefs } = props;
-            let { slotDates, isWeekStarts } = tDateProfile;
-            let isDay = !tDateProfile.isTimeScale && !tDateProfile.largeUnit;
-            return (preact.createElement("tbody", null,
-                preact.createElement("tr", null, slotDates.map((slotDate, i) => {
-                    let key = slotDate.toISOString();
-                    return (preact.createElement(TimelineSlatCell, { key: key, elRef: cellElRefs.createRef(key), date: slotDate, dateProfile: props.dateProfile, tDateProfile: tDateProfile, nowDate: props.nowDate, todayRange: props.todayRange, isEm: isWeekStarts[i], isDay: isDay }));
-                }))));
+    function createHorizontalStyle(props, isRtl) {
+        if (props) {
+            return {
+                [isRtl ? 'right' : 'left']: props.start,
+                width: props.size,
+            };
         }
     }
-
-    class TimelineSlats extends internal$1.BaseComponent {
-        constructor() {
-            super(...arguments);
-            this.rootElRef = preact.createRef();
-            this.cellElRefs = new internal$1.RefMap();
-            this.handleScrollRequest = (request) => {
-                let { onScrollLeftRequest } = this.props;
-                let { coords } = this;
-                if (onScrollLeftRequest && coords) {
-                    if (request.time) {
-                        let scrollLeft = coords.coordFromLeft(coords.durationToCoord(request.time));
-                        onScrollLeftRequest(scrollLeft);
-                    }
-                    return true;
-                }
-                return null; // best?
-            };
+    // Timeline-specific
+    // -------------------------------------------------------------------------------------------------
+    const MIN_SLOT_WIDTH = 30; // for real
+    /*
+    TODO: DRY with computeSlatHeight?
+    */
+    function computeSlotWidth(slatCnt, slatsPerLabel, slatMinWidth, labelInnerWidth, viewportWidth) {
+        if (labelInnerWidth == null || viewportWidth == null) {
+            return [undefined, undefined, false];
+        }
+        slatMinWidth = Math.max(slatMinWidth || 0, (labelInnerWidth + 1) / slatsPerLabel, MIN_SLOT_WIDTH);
+        const slatTryWidth = viewportWidth / slatCnt;
+        let slatLiquid;
+        let slatWidth;
+        if (slatTryWidth >= slatMinWidth) {
+            slatLiquid = true;
+            slatWidth = slatTryWidth;
         }
-        render() {
-            let { props, context } = this;
-            return (preact.createElement("div", { className: "fc-timeline-slots", ref: this.rootElRef },
-                preact.createElement("table", { "aria-hidden": true, className: context.theme.getClass('table'), style: {
-                        minWidth: props.tableMinWidth,
-                        width: props.clientWidth,
-                    } },
-                    props.tableColGroupNode,
-                    preact.createElement(TimelineSlatsBody, { cellElRefs: this.cellElRefs, dateProfile: props.dateProfile, tDateProfile: props.tDateProfile, nowDate: props.nowDate, todayRange: props.todayRange }))));
+        else {
+            slatLiquid = false;
+            slatWidth = Math.max(slatMinWidth, slatTryWidth);
         }
-        componentDidMount() {
-            this.updateSizing();
-            this.scrollResponder = this.context.createScrollResponder(this.handleScrollRequest);
+        return [slatWidth * slatCnt, slatWidth, slatLiquid];
+    }
+    function timeToCoord(// pixels
+    time, dateEnv, dateProfile, tDateProfile, slowWidth) {
+        let date = dateEnv.add(dateProfile.activeRange.start, time);
+        if (!tDateProfile.isTimeScale) {
+            date = internal$1.startOfDay(date);
         }
-        componentDidUpdate(prevProps) {
-            this.updateSizing();
-            this.scrollResponder.update(prevProps.dateProfile !== this.props.dateProfile);
+        return dateToCoord(date, dateEnv, tDateProfile, slowWidth);
+    }
+    function dateToCoord(// pixels
+    date, dateEnv, tDateProfile, slotWidth) {
+        let snapCoverage = computeDateSnapCoverage(date, tDateProfile, dateEnv);
+        let slotCoverage = snapCoverage / tDateProfile.snapsPerSlot;
+        return slotCoverage * slotWidth;
+    }
+    /*
+    returned value is between 0 and the number of snaps
+    */
+    function computeDateSnapCoverage(date, tDateProfile, dateEnv) {
+        let snapDiff = dateEnv.countDurationsBetween(tDateProfile.normalizedRange.start, date, tDateProfile.snapDuration);
+        if (snapDiff < 0) {
+            return 0;
         }
-        componentWillUnmount() {
-            this.scrollResponder.detach();
-            if (this.props.onCoords) {
-                this.props.onCoords(null);
-            }
+        if (snapDiff >= tDateProfile.snapDiffToIndex.length) {
+            return tDateProfile.snapCnt;
         }
-        updateSizing() {
-            let { props, context } = this;
-            if (props.clientWidth !== null && // is sizing stable?
-                this.scrollResponder
-            // ^it's possible to have clientWidth immediately after mount (when returning from print view), but w/o scrollResponder
-            ) {
-                let rootEl = this.rootElRef.current;
-                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);
-                    }
-                    this.scrollResponder.update(false); // TODO: wouldn't have to do this if coords were in state
-                }
-            }
+        let snapDiffInt = Math.floor(snapDiff);
+        let snapCoverage = tDateProfile.snapDiffToIndex[snapDiffInt];
+        if (internal$1.isInt(snapCoverage)) { // not an in-between value
+            snapCoverage += snapDiff - snapDiffInt; // add the remainder
         }
-        positionToHit(leftPosition) {
-            let { outerCoordCache } = this.coords;
-            let { dateEnv, isRtl } = this.context;
-            let { tDateProfile } = this.props;
-            let slatIndex = outerCoordCache.leftToIndex(leftPosition);
-            if (slatIndex != null) {
-                // somewhat similar to what TimeGrid does. consolidate?
-                let slatWidth = outerCoordCache.getWidth(slatIndex);
-                let partial = isRtl ?
-                    (outerCoordCache.rights[slatIndex] - leftPosition) / slatWidth :
-                    (leftPosition - outerCoordCache.lefts[slatIndex]) / slatWidth;
-                let localSnapIndex = Math.floor(partial * tDateProfile.snapsPerSlot);
-                let start = dateEnv.add(tDateProfile.slotDates[slatIndex], internal$1.multiplyDuration(tDateProfile.snapDuration, localSnapIndex));
-                let end = dateEnv.add(start, tDateProfile.snapDuration);
-                return {
-                    dateSpan: {
-                        range: { start, end },
-                        allDay: !this.props.tDateProfile.isTimeScale,
-                    },
-                    dayEl: this.cellElRefs.currentMap[slatIndex],
-                    left: outerCoordCache.lefts[slatIndex],
-                    right: outerCoordCache.rights[slatIndex],
-                };
-            }
-            return null;
+        else {
+            // a fractional value, meaning the date is not visible
+            // always round up in this case. works for start AND end dates in a range.
+            snapCoverage = Math.ceil(snapCoverage);
         }
-    }
-    function collectCellEls(elMap, slotDates) {
-        return slotDates.map((slotDate) => {
-            let key = slotDate.toISOString();
-            return elMap[key];
-        });
+        return snapCoverage;
     }
 
-    function computeSegHCoords(segs, minWidth, timelineCoords) {
-        let hcoords = [];
-        if (timelineCoords) {
-            for (let seg of segs) {
-                let res = timelineCoords.rangeToCoords(seg);
-                let start = Math.round(res.start); // for barely-overlapping collisions
-                let end = Math.round(res.end); //
-                if (end - start < minWidth) {
-                    end = start + minWidth;
-                }
-                hcoords.push({ start, end });
-            }
+    function computeManySegHorizontals(segs, segMinWidth, dateEnv, tDateProfile, slotWidth) {
+        const res = {};
+        for (const seg of segs) {
+            res[seg.eventRange.instance.instanceId] = computeSegHorizontals(seg, segMinWidth, dateEnv, tDateProfile, slotWidth);
         }
-        return hcoords;
+        return res;
+    }
+    function computeSegHorizontals(seg, segMinWidth, dateEnv, tDateProfile, slotWidth) {
+        const startCoord = dateToCoord(seg.start, dateEnv, tDateProfile, slotWidth);
+        const endCoord = dateToCoord(seg.end, dateEnv, tDateProfile, slotWidth);
+        let size = endCoord - startCoord;
+        if (segMinWidth) {
+            size = Math.max(size, segMinWidth);
+        }
+        return { start: startCoord, size };
     }
-    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
+    function computeFgSegPlacements(// mostly horizontals
+    segs, segHorizontals, segHeights, // keyed by instanceId
     strictOrder, maxStackCnt) {
-        let segInputs = [];
-        let crudePlacements = []; // when we don't know dims
+        let segEntries = [];
         for (let i = 0; i < segs.length; i += 1) {
             let seg = segs[i];
             let instanceId = seg.eventRange.instance.instanceId;
-            let height = eventInstanceHeights[instanceId];
-            let hcoords = segHCoords[i];
-            if (height && hcoords) {
-                segInputs.push({
+            let height = segHeights.get(instanceId);
+            let hcoords = segHorizontals[instanceId];
+            if (height != null && hcoords != null) {
+                segEntries.push({
                     index: i,
-                    span: hcoords,
-                    thickness: height,
-                });
-            }
-            else {
-                crudePlacements.push({
                     seg,
-                    hcoords,
-                    top: null,
+                    span: {
+                        start: hcoords.start,
+                        end: hcoords.start + hcoords.size,
+                    },
+                    thickness: height,
                 });
             }
         }
@@ -851,80 +721,84 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
         if (maxStackCnt != null) {
             hierarchy.maxStackCnt = maxStackCnt;
         }
-        let hiddenEntries = hierarchy.addSegs(segInputs);
-        let hiddenPlacements = hiddenEntries.map((entry) => ({
-            seg: segs[entry.index],
-            hcoords: entry.span,
-            top: null,
-        }));
+        let hiddenEntries = hierarchy.addSegs(segEntries);
         let hiddenGroups = internal$1.groupIntersectingEntries(hiddenEntries);
-        let moreLinkInputs = [];
-        let moreLinkCrudePlacements = [];
-        const extractSeg = (entry) => segs[entry.index];
-        for (let i = 0; i < hiddenGroups.length; i += 1) {
-            let hiddenGroup = hiddenGroups[i];
-            let sortedSegs = hiddenGroup.entries.map(extractSeg);
-            let height = moreLinkHeights[internal$1.buildIsoString(internal$1.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,
-                });
-            }
-        }
+        let hiddenGroupEntries = hiddenGroups.map((hiddenGroup, index) => ({
+            index: segs.length + index,
+            segGroup: hiddenGroup,
+            span: hiddenGroup.span,
+            thickness: 1, // HACK to ensure it's placed
+        }));
         // add more-links into the hierarchy, but don't limit
         hierarchy.maxStackCnt = -1;
-        hierarchy.addSegs(moreLinkInputs);
+        hierarchy.addSegs(hiddenGroupEntries);
         let visibleRects = hierarchy.toRects();
-        let visiblePlacements = [];
-        let maxHeight = 0;
+        let segTops = {};
+        let hiddenGroupTops = {};
         for (let rect of visibleRects) {
-            let 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);
+            const { seg, segGroup } = rect;
+            if (seg) { // regular seg
+                segTops[seg.eventRange.instance.instanceId] = rect.levelCoord;
+            }
+            else { // hiddenGroup
+                hiddenGroupTops[segGroup.key] = rect.levelCoord;
+            }
         }
         return [
-            visiblePlacements.concat(crudePlacements, hiddenPlacements, moreLinkCrudePlacements),
-            maxHeight,
+            segTops,
+            computeMaxBottom(segs, segTops, segHeights),
+            hiddenGroups,
+            hiddenGroupTops,
         ];
     }
+    function computeMaxBottom(segs, segTops, segHeights) {
+        let max = 0;
+        for (const seg of segs) {
+            const { instanceId } = seg.eventRange.instance;
+            const top = segTops[instanceId];
+            const height = segHeights.get(instanceId);
+            if (top != null && height != null) {
+                max = Math.max(max, top + height);
+            }
+        }
+        return max;
+    }
+    /*
+    TODO: converge with computeMaxBottom, but keys are different
+    */
+    function computeMoreLinkMaxBottom(hiddenGroups, hiddenGroupTops, hiddenGroupHeights) {
+        let max = 0;
+        for (const hiddenGroup of hiddenGroups) {
+            const top = hiddenGroupTops[hiddenGroup.key];
+            const height = hiddenGroupHeights.get(hiddenGroup.key);
+            if (top != null && height != null) {
+                max = Math.max(max, top + height);
+            }
+        }
+        return max;
+    }
 
     class TimelineLaneBg extends internal$1.BaseComponent {
         render() {
             let { props } = this;
             let highlightSeg = [].concat(props.eventResizeSegs, props.dateSelectionSegs);
-            return props.timelineCoords && (preact.createElement("div", { className: "fc-timeline-bg" },
-                this.renderSegs(props.businessHourSegs || [], props.timelineCoords, 'non-business'),
-                this.renderSegs(props.bgEventSegs || [], props.timelineCoords, 'bg-event'),
-                this.renderSegs(highlightSeg, props.timelineCoords, 'highlight')));
-        }
-        renderSegs(segs, timelineCoords, fillType) {
-            let { todayRange, nowDate } = this.props;
-            let { isRtl } = this.context;
-            let segHCoords = computeSegHCoords(segs, 0, timelineCoords);
-            let children = segs.map((seg, i) => {
-                let hcoords = segHCoords[i];
-                let hStyle = coordsToCss(hcoords, isRtl);
+            return (preact.createElement("div", { className: "fc-timeline-bg" },
+                this.renderSegs(props.businessHourSegs || [], 'non-business'),
+                this.renderSegs(props.bgEventSegs || [], 'bg-event'),
+                this.renderSegs(highlightSeg, 'highlight')));
+        }
+        renderSegs(segs, fillType) {
+            let { tDateProfile, todayRange, nowDate, slotWidth } = this.props;
+            let { dateEnv, isRtl } = this.context;
+            return (preact.createElement(preact.Fragment, null, segs.map((seg) => {
+                let hStyle; // TODO
+                if (slotWidth != null) {
+                    let segHorizontal = computeSegHorizontals(seg, undefined, dateEnv, tDateProfile, slotWidth);
+                    hStyle = horizontalsToCss(segHorizontal, isRtl);
+                }
                 return (preact.createElement("div", { key: internal$1.buildEventRangeKey(seg.eventRange), className: "fc-timeline-bg-harness", style: hStyle }, fillType === 'bg-event' ?
-                    preact.createElement(internal$1.BgEvent, Object.assign({ seg: seg }, internal$1.getSegMeta(seg, todayRange, nowDate))) :
-                    internal$1.renderFill(fillType)));
-            });
-            return preact.createElement(preact.Fragment, null, children);
+                    preact.createElement(internal$1.BgEvent, Object.assign({ eventRange: seg.eventRange, isStart: seg.isStart, isEnd: seg.isEnd }, internal$1.getEventRangeMeta(seg.eventRange, todayRange, nowDate))) : (internal$1.renderFill(fillType))));
+            })));
         }
     }
 
@@ -933,8 +807,8 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
             let normalRange = normalizeRange(origRange, tDateProfile, dateEnv);
             let segs = [];
             // protect against when the span is entirely in an invalid date region
-            if (computeDateSnapCoverage(normalRange.start, tDateProfile, dateEnv)
-                < computeDateSnapCoverage(normalRange.end, tDateProfile, dateEnv)) {
+            if (computeDateSnapCoverage$1(normalRange.start, tDateProfile, dateEnv)
+                < computeDateSnapCoverage$1(normalRange.end, tDateProfile, dateEnv)) {
                 // intersect the footprint's range with the grid's range
                 let slicedRange = internal$1.intersectRanges(normalRange, tDateProfile.normalizedRange);
                 if (slicedRange) {
@@ -960,48 +834,86 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
     });
     class TimelineEvent extends internal$1.BaseComponent {
         render() {
-            let { props } = this;
-            return (preact.createElement(internal$1.StandardEvent, Object.assign({}, props, { elClasses: ['fc-timeline-event', 'fc-h-event'], defaultTimeFormat: DEFAULT_TIME_FORMAT, defaultDisplayEventTime: !props.isTimeScale })));
+            let { props, context } = this;
+            let { options } = context;
+            return (preact.createElement(internal$1.StandardEvent, Object.assign({}, props, { elClasses: [
+                    'fc-timeline-event',
+                    'fc-h-event',
+                    options.eventOverlap === false // TODO: fix bad default
+                        ? 'fc-timeline-event-spacious'
+                        : ''
+                ], defaultTimeFormat: DEFAULT_TIME_FORMAT, defaultDisplayEventTime: !props.isTimeScale })));
         }
     }
 
     class TimelineLaneMoreLink extends internal$1.BaseComponent {
         render() {
-            let { props, context } = this;
-            let { hiddenSegs, placement, resourceId } = props;
-            let { top, hcoords } = placement;
-            let isVisible = hcoords && top !== null;
-            let hStyle = coordsToCss(hcoords, context.isRtl);
+            let { props } = this;
+            let { hiddenSegs, resourceId, forcedInvisibleMap } = props;
             let extraDateSpan = resourceId ? { resourceId } : {};
-            return (preact.createElement(internal$1.MoreLinkContainer, { elRef: props.elRef, elClasses: ['fc-timeline-more-link'], elStyle: Object.assign({ visibility: isVisible ? '' : 'hidden', top: top || 0 }, hStyle), allDayDate: null, moreCnt: hiddenSegs.length, allSegs: hiddenSegs, hiddenSegs: hiddenSegs, dateProfile: props.dateProfile, todayRange: props.todayRange, extraDateSpan: extraDateSpan, popoverContent: () => (preact.createElement(preact.Fragment, null, hiddenSegs.map((seg) => {
-                    let instanceId = seg.eventRange.instance.instanceId;
-                    return (preact.createElement("div", { key: instanceId, style: { visibility: props.isForcedInvisible[instanceId] ? 'hidden' : '' } },
-                        preact.createElement(TimelineEvent, Object.assign({ isTimeScale: props.isTimeScale, seg: seg, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: instanceId === props.eventSelection }, internal$1.getSegMeta(seg, props.todayRange, props.nowDate)))));
-                }))) }, (InnerContent) => (preact.createElement(InnerContent, { elTag: "div", elClasses: ['fc-timeline-more-link-inner', 'fc-sticky'] }))));
+            return (preact.createElement(internal$1.MoreLinkContainer, { elClasses: ['fc-timeline-more-link'], allDayDate: null, segs: hiddenSegs, hiddenSegs: hiddenSegs, dateProfile: props.dateProfile, todayRange: props.todayRange, extraDateSpan: extraDateSpan, popoverContent: () => (preact.createElement(preact.Fragment, null, hiddenSegs.map((seg) => {
+                    let { eventRange } = seg;
+                    let instanceId = eventRange.instance.instanceId;
+                    return (preact.createElement("div", { key: instanceId, style: { visibility: forcedInvisibleMap[instanceId] ? 'hidden' : '' } },
+                        preact.createElement(TimelineEvent, Object.assign({ isTimeScale: props.isTimeScale, eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: instanceId === props.eventSelection }, internal$1.getEventRangeMeta(eventRange, props.todayRange, props.nowDate)))));
+                }))) }, (InnerContent) => (preact.createElement(InnerContent, { elTag: "div", elClasses: ['fc-timeline-more-link-inner', 'fc-sticky-x'] }))));
+        }
+    }
+
+    /*
+    TODO: make DRY with other Event Harnesses
+    */
+    class TimelineEventHarness extends preact.Component {
+        constructor() {
+            super(...arguments);
+            // ref
+            this.rootElRef = preact.createRef();
+        }
+        render() {
+            const { props } = this;
+            return (preact.createElement("div", { className: "fc-abs", style: props.style, ref: this.rootElRef }, props.children));
+        }
+        componentDidMount() {
+            const rootEl = this.rootElRef.current; // TODO: make dynamic with useEffect
+            this.detachHeight = internal$1.watchHeight(rootEl, (height) => {
+                internal$1.setRef(this.props.heightRef, height);
+            });
+        }
+        componentWillUnmount() {
+            this.detachHeight();
+            internal$1.setRef(this.props.heightRef, null);
         }
     }
 
+    /*
+    TODO: split TimelineLaneBg and TimelineLaneFg?
+    */
     class TimelineLane extends internal$1.BaseComponent {
         constructor() {
             super(...arguments);
-            this.slicer = new TimelineLaneSlicer();
+            // memo
             this.sortEventSegs = internal$1.memoize(internal$1.sortEventSegs);
-            this.harnessElRefs = new internal$1.RefMap();
-            this.moreElRefs = new internal$1.RefMap();
-            this.innerElRef = preact.createRef();
-            // TODO: memoize event positioning
-            this.state = {
-                eventInstanceHeights: {},
-                moreLinkHeights: {},
+            // refs
+            this.segHeightRefMap = new internal$1.RefMap(() => {
+                internal$1.afterSize(this.handleSegHeights);
+            });
+            this.moreLinkHeightRefMap = new internal$1.RefMap(() => {
+                internal$1.afterSize(this.handleMoreLinkHeights);
+            });
+            // internal
+            this.slicer = new TimelineLaneSlicer();
+            this.handleMoreLinkHeights = () => {
+                this.setState({ moreLinkHeightRev: this.moreLinkHeightRefMap.rev }); // will trigger rerender
             };
-            this.handleResize = (isForced) => {
-                if (isForced) {
-                    this.updateSize();
-                }
+            this.handleSegHeights = () => {
+                this.setState({ segHeightRev: this.segHeightRefMap.rev }); // will trigger rerender
             };
         }
+        /*
+        TODO: lots of memoization needed here!
+        */
         render() {
-            let { props, state, context } = this;
+            let { props, context, segHeightRefMap } = this;
             let { options } = context;
             let { dateProfile, tDateProfile } = props;
             let slicedProps = this.slicer.sliceProps(props, dateProfile, tDateProfile.isTimeScale ? null : props.nextDayThreshold, context, // wish we didn't have to pass in the rest of the args...
@@ -1010,106 +922,290 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
                 (slicedProps.eventResize ? slicedProps.eventResize.segs : null) ||
                 [];
             let fgSegs = this.sortEventSegs(slicedProps.fgEventSegs, options.eventOrder);
-            let fgSegHCoords = computeSegHCoords(fgSegs, options.eventMinWidth, props.timelineCoords);
-            let [fgPlacements, fgHeight] = computeFgSegPlacements(fgSegs, fgSegHCoords, state.eventInstanceHeights, state.moreLinkHeights, options.eventOrderStrict, options.eventMaxStack);
-            let isForcedInvisible = // TODO: more convenient
+            let fgSegHorizontals = props.slotWidth != null
+                ? computeManySegHorizontals(fgSegs, options.eventMinWidth, context.dateEnv, tDateProfile, props.slotWidth)
+                : {};
+            let [fgSegTops, fgSegsBottom, hiddenGroups, hiddenGroupTops] = computeFgSegPlacements(// verticals
+            fgSegs, fgSegHorizontals, segHeightRefMap.current, options.eventOrderStrict, options.eventMaxStack);
+            let moreLinksBottom = computeMoreLinkMaxBottom(hiddenGroups, hiddenGroupTops, this.moreLinkHeightRefMap.current);
+            let innerHeight = Math.max(moreLinksBottom, fgSegsBottom);
+            let forcedInvisibleMap = // TODO: more convenient/DRY
              (slicedProps.eventDrag ? slicedProps.eventDrag.affectedInstances : null) ||
                 (slicedProps.eventResize ? slicedProps.eventResize.affectedInstances : null) ||
                 {};
             return (preact.createElement(preact.Fragment, null,
-                preact.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 }),
-                preact.createElement("div", { className: "fc-timeline-events fc-scrollgrid-sync-inner", ref: this.innerElRef, style: { height: fgHeight } },
-                    this.renderFgSegs(fgPlacements, isForcedInvisible, false, false, false),
-                    this.renderFgSegs(buildMirrorPlacements(mirrorSegs, props.timelineCoords, fgPlacements), {}, Boolean(slicedProps.eventDrag), Boolean(slicedProps.eventResize), false))));
+                preact.createElement(TimelineLaneBg, { tDateProfile: tDateProfile, nowDate: props.nowDate, todayRange: props.todayRange, 
+                    // content
+                    bgEventSegs: slicedProps.bgEventSegs, businessHourSegs: slicedProps.businessHourSegs, dateSelectionSegs: slicedProps.dateSelectionSegs, eventResizeSegs: slicedProps.eventResize ? slicedProps.eventResize.segs : [] /* bad new empty array? */, 
+                    // dimensions
+                    slotWidth: props.slotWidth }),
+                preact.createElement("div", { className: [
+                        'fc-timeline-events',
+                        'fc-content-box',
+                        options.eventOverlap === false // TODO: fix bad default
+                            ? 'fc-timeline-events-overlap-disabled'
+                            : 'fc-timeline-events-overlap-enabled'
+                    ].join(' '), style: { height: innerHeight } },
+                    this.renderFgSegs(fgSegs, fgSegHorizontals, fgSegTops, forcedInvisibleMap, hiddenGroups, hiddenGroupTops, false, // isDragging
+                    false, // isResizing
+                    false),
+                    this.renderFgSegs(mirrorSegs, props.slotWidth // TODO: memoize
+                        ? computeManySegHorizontals(mirrorSegs, options.eventMinWidth, context.dateEnv, tDateProfile, props.slotWidth)
+                        : {}, fgSegTops, {}, // forcedInvisibleMap
+                    [], {}, Boolean(slicedProps.eventDrag), Boolean(slicedProps.eventResize), false))));
+        }
+        renderFgSegs(segs, segHorizontals, segTops, forcedInvisibleMap, hiddenGroups, hiddenGroupTops, isDragging, isResizing, isDateSelecting) {
+            let { props, context, segHeightRefMap, moreLinkHeightRefMap } = this;
+            let isMirror = isDragging || isResizing || isDateSelecting;
+            return (preact.createElement(preact.Fragment, null,
+                segs.map((seg) => {
+                    const { eventRange } = seg;
+                    const { instanceId } = eventRange.instance;
+                    const segTop = segTops[instanceId];
+                    const segHorizontal = segHorizontals[instanceId];
+                    const isVisible = isMirror ||
+                        (segHorizontal && segTop != null && !forcedInvisibleMap[instanceId]);
+                    return (preact.createElement(TimelineEventHarness, { key: instanceId, style: Object.assign({ visibility: isVisible ? '' : 'hidden', top: segTop || 0 }, horizontalsToCss(segHorizontal, context.isRtl)), heightRef: isMirror ? undefined : segHeightRefMap.createRef(instanceId) },
+                        preact.createElement(TimelineEvent, Object.assign({ isTimeScale: props.tDateProfile.isTimeScale, eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: isDragging, isResizing: isResizing, isDateSelecting: isDateSelecting, isSelected: instanceId === props.eventSelection /* TODO: bad for mirror? */ }, internal$1.getEventRangeMeta(eventRange, props.todayRange, props.nowDate)))));
+                }),
+                hiddenGroups.map((hiddenGroup) => (preact.createElement(TimelineEventHarness, { key: hiddenGroup.key, style: Object.assign({ top: hiddenGroupTops[hiddenGroup.key] || 0 }, horizontalsToCss({
+                        start: hiddenGroup.span.start,
+                        size: hiddenGroup.span.end - hiddenGroup.span.start
+                    }, context.isRtl)), heightRef: moreLinkHeightRefMap.createRef(hiddenGroup.key) },
+                    preact.createElement(TimelineLaneMoreLink, { hiddenSegs: hiddenGroup.segs /* TODO: make SegGroup generic! */, dateProfile: props.dateProfile, nowDate: props.nowDate, todayRange: props.todayRange, isTimeScale: props.tDateProfile.isTimeScale, eventSelection: props.eventSelection, resourceId: props.resourceId, forcedInvisibleMap: forcedInvisibleMap }))))));
+        }
+    }
+
+    class TimelineHeaderCell extends internal$1.BaseComponent {
+        constructor() {
+            super(...arguments);
+            // memo
+            this.refineRenderProps = internal$1.memoizeObjArg(refineRenderProps);
+            this.buildCellNavLinkAttrs = internal$1.memoize(buildCellNavLinkAttrs);
+            // ref
+            this.innerElRef = preact.createRef();
+        }
+        render() {
+            let { props, context } = this;
+            let { dateEnv, options } = context;
+            let { cell, dateProfile, tDateProfile } = props;
+            // the cell.rowUnit is f'd
+            // giving 'month' for a 3-day view
+            // workaround: to infer day, do NOT time
+            let dateMeta = internal$1.getDateMeta(cell.date, props.todayRange, props.nowDate, dateProfile);
+            let renderProps = this.refineRenderProps({
+                level: props.rowLevel,
+                dateMarker: cell.date,
+                text: cell.text,
+                dateEnv: context.dateEnv,
+                viewApi: context.viewApi,
+            });
+            return (preact.createElement(internal$1.ContentContainer, { elTag: "div", elClasses: [
+                    'fc-timeline-slot-label',
+                    'fc-timeline-slot',
+                    cell.isWeekStart ? 'fc-timeline-slot-em' : '',
+                    'fc-header-cell',
+                    'fc-cell',
+                    'fc-flex-column',
+                    'fc-justify-center',
+                    props.isCentered ? 'fc-align-center' : 'fc-align-start',
+                    ...( // TODO: so slot classnames for week/month/bigger. see note above about rowUnit
+                    cell.rowUnit === 'time' ?
+                        internal$1.getSlotClassNames(dateMeta, context.theme) :
+                        internal$1.getDayClassNames(dateMeta, context.theme)),
+                ], elAttrs: {
+                    'data-date': dateEnv.formatIso(cell.date, {
+                        omitTime: !tDateProfile.isTimeScale,
+                        omitTimeZoneOffset: true,
+                    }),
+                }, elStyle: {
+                    width: props.slotWidth != null
+                        ? props.slotWidth * cell.colspan
+                        : undefined,
+                }, renderProps: renderProps, generatorName: "slotLabelContent", customGenerator: options.slotLabelContent, defaultGenerator: renderInnerContent, classNameGenerator: options.slotLabelClassNames, didMount: options.slotLabelDidMount, willUnmount: options.slotLabelWillUnmount }, (InnerContent) => (preact.createElement("div", { ref: this.innerElRef, className: [
+                    'fc-flex-column',
+                    props.isSticky ? 'fc-sticky-x' : '',
+                ].join(' ') },
+                preact.createElement(InnerContent, { elTag: "a", elClasses: [
+                        'fc-cell-inner',
+                        'fc-padding-md',
+                    ], elAttrs: this.buildCellNavLinkAttrs(context, cell.date, cell.rowUnit) })))));
         }
         componentDidMount() {
-            this.updateSize();
-            this.context.addResizeHandler(this.handleResize);
-        }
-        componentDidUpdate(prevProps, prevState) {
-            if (prevProps.eventStore !== this.props.eventStore || // external thing changed?
-                prevProps.timelineCoords !== this.props.timelineCoords || // external thing changed?
-                prevState.moreLinkHeights !== this.state.moreLinkHeights // HACK. see addStateEquality
-            ) {
-                this.updateSize();
-            }
+            const { props } = this;
+            const innerEl = this.innerElRef.current; // TODO: make dynamic with useEffect
+            this.detachSize = internal$1.watchSize(innerEl, (width, height) => {
+                internal$1.setRef(props.innerWidthRef, width);
+                internal$1.setRef(props.innerHeightRef, height);
+                // HACK for sticky-centering
+                innerEl.style.left = innerEl.style.right =
+                    (props.isCentered && props.isSticky)
+                        ? `calc(50% - ${width / 2}px)`
+                        : '';
+            });
         }
         componentWillUnmount() {
-            this.context.removeResizeHandler(this.handleResize);
+            const { props } = this;
+            this.detachSize();
+            internal$1.setRef(props.innerWidthRef, null);
+            internal$1.setRef(props.innerHeightRef, null);
         }
-        updateSize() {
-            let { props } = this;
-            let { timelineCoords } = props;
-            const innerEl = this.innerElRef.current;
-            if (props.onHeightChange) {
-                props.onHeightChange(innerEl, false);
-            }
-            if (timelineCoords) {
-                this.setState({
-                    eventInstanceHeights: internal$1.mapHash(this.harnessElRefs.currentMap, (harnessEl) => (Math.round(harnessEl.getBoundingClientRect().height))),
-                    moreLinkHeights: internal$1.mapHash(this.moreElRefs.currentMap, (moreEl) => (Math.round(moreEl.getBoundingClientRect().height))),
-                }, () => {
-                    if (props.onHeightChange) {
-                        props.onHeightChange(innerEl, true);
-                    }
-                });
-            }
-            // hack
-            if (props.syncParentMinHeight) {
-                innerEl.parentElement.style.minHeight = innerEl.style.height;
-            }
-        }
-        renderFgSegs(segPlacements, isForcedInvisible, isDragging, isResizing, isDateSelecting) {
-            let { harnessElRefs, moreElRefs, props, context } = this;
-            let isMirror = isDragging || isResizing || isDateSelecting;
-            return (preact.createElement(preact.Fragment, null, segPlacements.map((segPlacement) => {
-                let { seg, hcoords, top } = segPlacement;
-                if (Array.isArray(seg)) { // a more-link
-                    let isoStr = internal$1.buildIsoString(internal$1.computeEarliestSegStart(seg));
-                    return (preact.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 }));
+    }
+    // Utils
+    // -------------------------------------------------------------------------------------------------
+    function buildCellNavLinkAttrs(context, cellDate, rowUnit) {
+        return (rowUnit && rowUnit !== 'time')
+            ? internal$1.buildNavLinkAttrs(context, cellDate, rowUnit)
+            : {};
+    }
+    function renderInnerContent(renderProps) {
+        return renderProps.text;
+    }
+    function refineRenderProps(input) {
+        return {
+            level: input.level,
+            date: input.dateEnv.toDate(input.dateMarker),
+            view: input.viewApi,
+            text: input.text,
+        };
+    }
+
+    class TimelineHeaderRow extends internal$1.BaseComponent {
+        constructor() {
+            super(...arguments);
+            // refs
+            this.innerWidthRefMap = new internal$1.RefMap(() => {
+                internal$1.afterSize(this.handleInnerWidths);
+            });
+            this.innerHeightRefMap = new internal$1.RefMap(() => {
+                internal$1.afterSize(this.handleInnerHeights);
+            });
+            this.handleInnerWidths = () => {
+                const innerWidthMap = this.innerWidthRefMap.current;
+                let max = 0;
+                for (const innerWidth of innerWidthMap.values()) {
+                    max = Math.max(max, innerWidth);
+                }
+                // TODO: ensure not equal?
+                internal$1.setRef(this.props.innerWidthRef, max);
+            };
+            this.handleInnerHeights = () => {
+                const innerHeightMap = this.innerHeightRefMap.current;
+                let max = 0;
+                for (const innerHeight of innerHeightMap.values()) {
+                    max = Math.max(max, innerHeight);
                 }
-                let instanceId = seg.eventRange.instance.instanceId;
-                let isVisible = isMirror || Boolean(!isForcedInvisible[instanceId] && hcoords && top !== null);
-                let hStyle = coordsToCss(hcoords, context.isRtl);
-                return (preact.createElement("div", { key: 'e:' + instanceId /* "e" for "event" */, ref: isMirror ? null : harnessElRefs.createRef(instanceId), className: "fc-timeline-event-harness", style: Object.assign({ visibility: isVisible ? '' : 'hidden', top: top || 0 }, hStyle) },
-                    preact.createElement(TimelineEvent, Object.assign({ isTimeScale: props.tDateProfile.isTimeScale, seg: seg, isDragging: isDragging, isResizing: isResizing, isDateSelecting: isDateSelecting, isSelected: instanceId === props.eventSelection /* TODO: bad for mirror? */ }, internal$1.getSegMeta(seg, props.todayRange, props.nowDate)))));
+                // TODO: ensure not equal?
+                internal$1.setRef(this.props.innerHeighRef, max);
+            };
+        }
+        render() {
+            const { props, innerWidthRefMap, innerHeightRefMap } = this;
+            const isCentered = !(props.tDateProfile.isTimeScale && props.isLastRow);
+            const isSticky = !props.isLastRow;
+            return (preact.createElement("div", { className: 'fc-row', style: { height: props.height } }, props.cells.map((cell) => {
+                // TODO: make this part of the cell obj?
+                // TODO: rowUnit seems wrong sometimes. says 'month' when it should be day
+                // TODO: rowUnit is relevant to whole row. put it on a row object, not the cells
+                // TODO: use rowUnit to key the Row itself?
+                const key = cell.rowUnit + ':' + cell.date.toISOString();
+                return (preact.createElement(TimelineHeaderCell, { key: key, cell: cell, rowLevel: props.rowLevel, dateProfile: props.dateProfile, tDateProfile: props.tDateProfile, todayRange: props.todayRange, nowDate: props.nowDate, isCentered: isCentered, isSticky: isSticky, 
+                    // refs
+                    innerWidthRef: innerWidthRefMap.createRef(key), innerHeightRef: innerHeightRefMap.createRef(key), 
+                    // dimensions
+                    slotWidth: props.slotWidth }));
             })));
         }
+        componentWillUnmount() {
+            internal$1.setRef(this.props.innerWidthRef, null);
+            internal$1.setRef(this.props.innerHeighRef, null);
+        }
     }
-    TimelineLane.addStateEquality({
-        eventInstanceHeights: internal$1.isPropsEqual,
-        moreLinkHeights: internal$1.isPropsEqual,
-    });
-    function buildMirrorPlacements(mirrorSegs, timelineCoords, fgPlacements) {
-        if (!mirrorSegs.length || !timelineCoords) {
-            return [];
-        }
-        let topsByInstanceId = buildAbsoluteTopHash(fgPlacements); // TODO: cache this at first render?
-        return mirrorSegs.map((seg) => ({
-            seg,
-            hcoords: timelineCoords.rangeToCoords(seg),
-            top: topsByInstanceId[seg.eventRange.instance.instanceId],
-        }));
+
+    class TimelineNowIndicatorLine extends internal$1.BaseComponent {
+        render() {
+            const { props, context } = this;
+            return (preact.createElement("div", { className: "fc-timeline-now-indicator-container" },
+                preact.createElement(internal$1.NowIndicatorContainer // TODO: make separate component?
+                , { elClasses: ['fc-timeline-now-indicator-line'], elStyle: props.slotWidth != null
+                        ? horizontalCoordToCss(dateToCoord(props.nowDate, context.dateEnv, props.tDateProfile, props.slotWidth), context.isRtl)
+                        : {}, isAxis: false, date: props.nowDate })));
+        }
     }
-    function buildAbsoluteTopHash(placements) {
-        let topsByInstanceId = {};
-        for (let placement of placements) {
-            let { seg } = placement;
-            if (!Array.isArray(seg)) { // doesn't represent a more-link
-                topsByInstanceId[seg.eventRange.instance.instanceId] = placement.top;
-            }
+
+    class TimelineNowIndicatorArrow extends internal$1.BaseComponent {
+        render() {
+            const { props, context } = this;
+            return (preact.createElement("div", { className: "fc-timeline-now-indicator-container" },
+                preact.createElement(internal$1.NowIndicatorContainer, { elClasses: ['fc-timeline-now-indicator-arrow'], elStyle: props.slotWidth != null
+                        ? horizontalCoordToCss(dateToCoord(props.nowDate, context.dateEnv, props.tDateProfile, props.slotWidth), context.isRtl)
+                        : {}, isAxis: true, date: props.nowDate })));
         }
-        return topsByInstanceId;
     }
 
-    class TimelineGrid extends internal$1.DateComponent {
+    class TimelineView extends internal$1.DateComponent {
         constructor() {
             super(...arguments);
-            this.slatsRef = preact.createRef();
-            this.state = {
-                coords: null,
+            // memoized
+            this.buildTimelineDateProfile = internal$1.memoize(buildTimelineDateProfile);
+            this.computeSlotWidth = internal$1.memoize(computeSlotWidth);
+            // refs
+            this.headerScrollerRef = preact.createRef();
+            this.bodyScrollerRef = preact.createRef();
+            this.footerScrollerRef = preact.createRef();
+            this.headerRowInnerWidthMap = new internal$1.RefMap(() => {
+                internal$1.afterSize(this.handleSlotInnerWidths);
+            });
+            this.scrollTime = null;
+            // Sizing
+            // -----------------------------------------------------------------------------------------------
+            this.handleBodySlotInnerWidth = (innerWidth) => {
+                this.bodySlotInnerWidth = innerWidth;
+                internal$1.afterSize(this.handleSlotInnerWidths);
+            };
+            this.handleSlotInnerWidths = () => {
+                const { state } = this;
+                const slotInnerWidth = Math.max(this.headerRowInnerWidthMap.current.get(this.tDateProfile.cellRows.length - 1) || 0, this.bodySlotInnerWidth);
+                if (state.slotInnerWidth !== slotInnerWidth) {
+                    this.setState({ slotInnerWidth });
+                }
+            };
+            this.handleScrollerWidth = (scrollerWidth) => {
+                this.setState({
+                    scrollerWidth,
+                });
             };
-            this.handeEl = (el) => {
+            this.handleLeftScrollbarWidth = (leftScrollbarWidth) => {
+                this.setState({
+                    leftScrollbarWidth
+                });
+            };
+            this.handleRightScrollbarWidth = (rightScrollbarWidth) => {
+                this.setState({
+                    rightScrollbarWidth
+                });
+            };
+            this.handleTimeScroll = (scrollTime) => {
+                this.scrollTime = scrollTime;
+                this.updateScroll();
+            };
+            this.updateScroll = () => {
+                const { props, context, tDateProfile, scrollTime, slotWidth } = this;
+                if (scrollTime != null && slotWidth != null) {
+                    let x = timeToCoord(scrollTime, context.dateEnv, props.dateProfile, tDateProfile, slotWidth);
+                    if (x) {
+                        x += context.isRtl ? -1 : 1; // overcome border. TODO: DRY this up
+                    }
+                    this.syncedScroller.scrollTo({ x });
+                }
+            };
+            this.clearScroll = () => {
+                this.scrollTime = null;
+            };
+            // Hit System
+            // -----------------------------------------------------------------------------------------------
+            this.handeBodyEl = (el) => {
+                this.bodyEl = el;
                 if (el) {
                     this.context.registerInteractiveComponent(this, { el });
                 }
@@ -1117,45 +1213,143 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
                     this.context.unregisterInteractiveComponent(this);
                 }
             };
-            this.handleCoords = (coords) => {
-                this.setState({ coords });
-                if (this.props.onSlatCoords) {
-                    this.props.onSlatCoords(coords);
-                }
-            };
         }
         render() {
-            let { props, state, context } = this;
-            let { options } = context;
-            let { dateProfile, tDateProfile } = props;
-            let timerUnit = internal$1.greatestDurationDenominator(tDateProfile.slotDuration).unit;
-            return (preact.createElement("div", { className: "fc-timeline-body", ref: this.handeEl, style: {
-                    minWidth: props.tableMinWidth,
-                    height: props.clientHeight,
-                    width: props.clientWidth,
-                } },
-                preact.createElement(internal$1.NowTimer, { unit: timerUnit }, (nowDate, todayRange) => (preact.createElement(preact.Fragment, null,
-                    preact.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 }),
-                    preact.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, syncParentMinHeight: true }),
-                    (options.nowIndicator && state.coords && state.coords.isDateInRange(nowDate)) && (preact.createElement("div", { className: "fc-timeline-now-indicator-container" },
-                        preact.createElement(internal$1.NowIndicatorContainer, { elClasses: ['fc-timeline-now-indicator-line'], elStyle: coordToCss(state.coords.dateToCoord(nowDate), context.isRtl), isAxis: false, date: nowDate }))))))));
-        }
-        // Hit System
-        // ------------------------------------------------------------------------------------------
+            const { props, state, context } = this;
+            const { options } = context;
+            /* date */
+            const tDateProfile = this.tDateProfile = this.buildTimelineDateProfile(props.dateProfile, context.dateEnv, options, context.dateProfileGenerator);
+            const { cellRows } = tDateProfile;
+            const timerUnit = internal$1.greatestDurationDenominator(tDateProfile.slotDuration).unit;
+            /* table settings */
+            const verticalScrolling = !props.forPrint && !internal$1.getIsHeightAuto(options);
+            const stickyHeaderDates = !props.forPrint && internal$1.getStickyHeaderDates(options);
+            const stickyFooterScrollbar = !props.forPrint && internal$1.getStickyFooterScrollbar(options);
+            /* table positions */
+            const [canvasWidth, slotWidth] = this.computeSlotWidth(tDateProfile.slotCnt, tDateProfile.slotsPerLabel, options.slotMinWidth, state.slotInnerWidth, // is ACTUALLY the label width. rename?
+            state.scrollerWidth);
+            this.slotWidth = slotWidth;
+            return (preact.createElement(internal$1.NowTimer, { unit: timerUnit }, (nowDate, todayRange) => {
+                const enableNowIndicator = // TODO: DRY
+                 options.nowIndicator &&
+                    slotWidth != null &&
+                    internal$1.rangeContainsMarker(props.dateProfile.currentRange, nowDate);
+                return (preact.createElement(internal$1.ViewContainer, { viewSpec: context.viewSpec, elClasses: [
+                        'fc-timeline-view',
+                        'fc-flex-column',
+                        'fc-border',
+                    ] },
+                    preact.createElement(internal$1.Scroller, { horizontal: true, hideScrollbars: true, elClassNames: [
+                            'fc-timeline-header',
+                            'fc-rowgroup',
+                            stickyHeaderDates ? 'fc-sticky-header' : '',
+                        ], ref: this.headerScrollerRef },
+                        preact.createElement("div", { className: 'fc-rel fc-content-box' // origin for now-indicator
+                            , style: {
+                                width: canvasWidth,
+                                paddingLeft: state.leftScrollbarWidth,
+                                paddingRight: state.rightScrollbarWidth,
+                            } },
+                            preact.createElement("div", null, cellRows.map((cells, rowLevel) => {
+                                const isLast = rowLevel === cellRows.length - 1;
+                                return (preact.createElement(TimelineHeaderRow, { key: rowLevel, dateProfile: props.dateProfile, tDateProfile: tDateProfile, nowDate: nowDate, todayRange: todayRange, rowLevel: rowLevel, isLastRow: isLast, cells: cells, slotWidth: slotWidth, innerWidthRef: this.headerRowInnerWidthMap.createRef(rowLevel) }));
+                            })),
+                            enableNowIndicator && (
+                            // TODO: make this positioned WITHIN padding?
+                            preact.createElement(TimelineNowIndicatorArrow, { tDateProfile: tDateProfile, nowDate: nowDate, slotWidth: slotWidth })))),
+                    preact.createElement(internal$1.Scroller, { vertical: verticalScrolling, horizontal: true, elClassNames: [
+                            'fc-timeline-body',
+                            'fc-rowgroup',
+                            verticalScrolling ? 'fc-liquid' : '',
+                        ], ref: this.bodyScrollerRef, widthRef: this.handleScrollerWidth, leftScrollbarWidthRef: this.handleLeftScrollbarWidth, rightScrollbarWidthRef: this.handleRightScrollbarWidth },
+                        preact.createElement("div", { className: "fc-rel fc-grow", style: {
+                                width: canvasWidth,
+                            }, ref: this.handeBodyEl },
+                            preact.createElement(TimelineSlats, { dateProfile: props.dateProfile, tDateProfile: tDateProfile, nowDate: nowDate, todayRange: todayRange, 
+                                // ref
+                                innerWidthRef: this.handleBodySlotInnerWidth, 
+                                // dimensions
+                                slotWidth: slotWidth }),
+                            preact.createElement(TimelineLane, { dateProfile: props.dateProfile, tDateProfile: tDateProfile, nowDate: nowDate, todayRange: todayRange, nextDayThreshold: options.nextDayThreshold, eventStore: props.eventStore, eventUiBases: props.eventUiBases, businessHours: props.businessHours, dateSelection: props.dateSelection, eventDrag: props.eventDrag, eventResize: props.eventResize, eventSelection: props.eventSelection, slotWidth: slotWidth }),
+                            enableNowIndicator && (preact.createElement(TimelineNowIndicatorLine, { tDateProfile: tDateProfile, nowDate: nowDate, slotWidth: slotWidth })))),
+                    stickyFooterScrollbar && (preact.createElement(internal$1.Scroller, { ref: this.footerScrollerRef, horizontal: true },
+                        preact.createElement("div", { style: { width: canvasWidth } })))));
+            }));
+        }
+        // Lifecycle
+        // -----------------------------------------------------------------------------------------------
+        componentDidMount() {
+            this.syncedScroller = new internal$2.ScrollerSyncer(true); // horizontal=true
+            this.updateSyncedScroller();
+            this.resetScroll();
+            this.context.emitter.on('_timeScrollRequest', this.handleTimeScroll);
+            this.syncedScroller.addScrollEndListener(this.clearScroll);
+        }
+        componentDidUpdate(prevProps) {
+            this.updateSyncedScroller();
+            if (prevProps.dateProfile !== this.props.dateProfile && this.context.options.scrollTimeReset) {
+                this.resetScroll();
+            }
+            else {
+                // TODO: inefficient to update so often
+                this.updateScroll();
+            }
+        }
+        componentWillUnmount() {
+            this.syncedScroller.destroy();
+            this.context.emitter.off('_timeScrollRequest', this.handleTimeScroll);
+            this.syncedScroller.removeScrollEndListener(this.clearScroll);
+        }
+        // Scrolling
+        // -----------------------------------------------------------------------------------------------
+        updateSyncedScroller() {
+            this.syncedScroller.handleChildren([
+                this.headerScrollerRef.current,
+                this.bodyScrollerRef.current,
+                this.footerScrollerRef.current
+            ]);
+        }
+        resetScroll() {
+            this.handleTimeScroll(this.context.options.scrollTime);
+        }
         queryHit(positionLeft, positionTop, elWidth, elHeight) {
-            let slats = this.slatsRef.current;
-            let slatHit = slats.positionToHit(positionLeft);
-            if (slatHit) {
+            const { props, context, tDateProfile, slotWidth } = this;
+            const { dateEnv } = context;
+            if (slotWidth) {
+                const x = context.isRtl ? elWidth - positionLeft : positionLeft;
+                const slatIndex = Math.floor(x / slotWidth);
+                const slatX = slatIndex * slotWidth;
+                const partial = (x - slatX) / slotWidth; // floating point number between 0 and 1
+                const localSnapIndex = Math.floor(partial * tDateProfile.snapsPerSlot); // the snap # relative to start of slat
+                let startDate = dateEnv.add(tDateProfile.slotDates[slatIndex], internal$1.multiplyDuration(tDateProfile.snapDuration, localSnapIndex));
+                let endDate = dateEnv.add(startDate, tDateProfile.snapDuration);
+                // TODO: generalize this coord stuff to TimeGrid?
+                let snapWidth = slotWidth / tDateProfile.snapsPerSlot;
+                let startCoord = slatIndex * slotWidth + (snapWidth * localSnapIndex);
+                let endCoord = startCoord + snapWidth;
+                let left, right;
+                if (context.isRtl) {
+                    left = elWidth - endCoord;
+                    right = elWidth - startCoord;
+                }
+                else {
+                    left = startCoord;
+                    right = endCoord;
+                }
                 return {
-                    dateProfile: this.props.dateProfile,
-                    dateSpan: slatHit.dateSpan,
+                    dateProfile: props.dateProfile,
+                    dateSpan: {
+                        range: { start: startDate, end: endDate },
+                        allDay: !tDateProfile.isTimeScale,
+                    },
                     rect: {
-                        left: slatHit.left,
-                        right: slatHit.right,
+                        left,
+                        right,
                         top: 0,
                         bottom: elHeight,
                     },
-                    dayEl: slatHit.dayEl,
+                    // HACK. TODO: This is expensive to do every hit-query
+                    dayEl: this.bodyEl.querySelectorAll('.fc-timeline-slot')[slatIndex],
                     layer: 0,
                 };
             }
@@ -1163,94 +1357,12 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
         }
     }
 
-    class TimelineView extends internal$1.DateComponent {
-        constructor() {
-            super(...arguments);
-            this.buildTimelineDateProfile = internal$1.memoize(buildTimelineDateProfile);
-            this.scrollGridRef = preact.createRef();
-            this.state = {
-                slatCoords: null,
-                slotCushionMaxWidth: null,
-            };
-            this.handleSlatCoords = (slatCoords) => {
-                this.setState({ slatCoords });
-            };
-            this.handleScrollLeftRequest = (scrollLeft) => {
-                let scrollGrid = this.scrollGridRef.current;
-                scrollGrid.forceScrollLeft(0, scrollLeft);
-            };
-            this.handleMaxCushionWidth = (slotCushionMaxWidth) => {
-                this.setState({
-                    slotCushionMaxWidth: Math.ceil(slotCushionMaxWidth), // for less rerendering TODO: DRY
-                });
-            };
-        }
-        render() {
-            let { props, state, context } = this;
-            let { options } = context;
-            let stickyHeaderDates = !props.forPrint && internal$1.getStickyHeaderDates(options);
-            let stickyFooterScrollbar = !props.forPrint && internal$1.getStickyFooterScrollbar(options);
-            let tDateProfile = this.buildTimelineDateProfile(props.dateProfile, context.dateEnv, options, context.dateProfileGenerator);
-            let { slotMinWidth } = options;
-            let slatCols = buildSlatCols(tDateProfile, slotMinWidth || this.computeFallbackSlotMinWidth(tDateProfile));
-            let sections = [
-                {
-                    type: 'header',
-                    key: 'header',
-                    isSticky: stickyHeaderDates,
-                    chunks: [{
-                            key: 'timeline',
-                            content: (contentArg) => (preact.createElement(TimelineHeader, { dateProfile: props.dateProfile, clientWidth: contentArg.clientWidth, clientHeight: contentArg.clientHeight, tableMinWidth: contentArg.tableMinWidth, tableColGroupNode: contentArg.tableColGroupNode, tDateProfile: tDateProfile, slatCoords: state.slatCoords, onMaxCushionWidth: slotMinWidth ? null : this.handleMaxCushionWidth })),
-                        }],
-                },
-                {
-                    type: 'body',
-                    key: 'body',
-                    liquid: true,
-                    chunks: [{
-                            key: 'timeline',
-                            content: (contentArg) => (preact.createElement(TimelineGrid, Object.assign({}, props, { clientWidth: contentArg.clientWidth, clientHeight: contentArg.clientHeight, tableMinWidth: contentArg.tableMinWidth, tableColGroupNode: contentArg.tableColGroupNode, tDateProfile: tDateProfile, onSlatCoords: this.handleSlatCoords, onScrollLeftRequest: this.handleScrollLeftRequest }))),
-                        }],
-                },
-            ];
-            if (stickyFooterScrollbar) {
-                sections.push({
-                    type: 'footer',
-                    key: 'footer',
-                    isSticky: true,
-                    chunks: [{
-                            key: 'timeline',
-                            content: internal$1.renderScrollShim,
-                        }],
-                });
-            }
-            return (preact.createElement(internal$1.ViewContainer, { elClasses: [
-                    'fc-timeline',
-                    options.eventOverlap === false ?
-                        'fc-timeline-overlap-disabled' :
-                        '',
-                ], viewSpec: context.viewSpec },
-                preact.createElement(internal$2.ScrollGrid, { ref: this.scrollGridRef, liquid: !props.isHeightAuto && !props.forPrint, forPrint: props.forPrint, collapsibleWidth: false, colGroups: [
-                        { cols: slatCols },
-                    ], sections: sections })));
-        }
-        computeFallbackSlotMinWidth(tDateProfile) {
-            return Math.max(30, ((this.state.slotCushionMaxWidth || 0) / tDateProfile.slotsPerLabel));
-        }
-    }
-    function buildSlatCols(tDateProfile, slotMinWidth) {
-        return [{
-                span: tDateProfile.slotCnt,
-                minWidth: slotMinWidth || 1, // needs to be a non-zero number to trigger horizontal scrollbars!??????
-            }];
-    }
-
-    var css_248z = ".fc .fc-timeline-body{min-height:100%;position:relative;z-index:1}.fc .fc-timeline-slots{bottom:0;position:absolute;top:0;z-index:1}.fc .fc-timeline-slots>table{height:100%}.fc .fc-timeline-slot-minor{border-style:dotted}.fc .fc-timeline-slot-frame{align-items:center;display:flex;justify-content:center}.fc .fc-timeline-header-row-chrono .fc-timeline-slot-frame{justify-content:flex-start}.fc .fc-timeline-header-row:last-child .fc-timeline-slot-frame{overflow:hidden}.fc .fc-timeline-slot-cushion{padding:4px 5px;white-space:nowrap}.fc-direction-ltr .fc-timeline-slot{border-right:0!important}.fc-direction-rtl .fc-timeline-slot{border-left:0!important}.fc .fc-timeline-now-indicator-container{bottom:0;left:0;position:absolute;right:0;top:0;width:0;z-index:4}.fc .fc-timeline-now-indicator-arrow,.fc .fc-timeline-now-indicator-line{border-color:var(--fc-now-indicator-color);border-style:solid;pointer-events:none;position:absolute;top:0}.fc .fc-timeline-now-indicator-arrow{border-left-color:transparent;border-right-color:transparent;border-width:6px 5px 0;margin:0 -6px}.fc .fc-timeline-now-indicator-line{border-width:0 0 0 1px;bottom:0;margin:0 -1px}.fc .fc-timeline-events{position:relative;width:0;z-index:3}.fc .fc-timeline-event-harness,.fc .fc-timeline-more-link{position:absolute;top:0}.fc-timeline-event{z-index:1}.fc-timeline-event.fc-event-mirror{z-index:2}.fc-timeline-event{align-items:center;border-radius:0;display:flex;font-size:var(--fc-small-font-size);margin-bottom:1px;padding:2px 1px;position:relative}.fc-timeline-event .fc-event-main{flex-grow:1;flex-shrink:1;min-width:0}.fc-timeline-event .fc-event-time{font-weight:700}.fc-timeline-event .fc-event-time,.fc-timeline-event .fc-event-title{padding:0 2px;white-space:nowrap}.fc-direction-ltr .fc-timeline-event.fc-event-end,.fc-direction-ltr .fc-timeline-more-link{margin-right:1px}.fc-direction-rtl .fc-timeline-event.fc-event-end,.fc-direction-rtl .fc-timeline-more-link{margin-left:1px}.fc-timeline-overlap-disabled .fc-timeline-event{margin-bottom:0;padding-bottom:5px;padding-top:5px}.fc-timeline-event:not(.fc-event-end):after,.fc-timeline-event:not(.fc-event-start):before{border-color:transparent #000;border-style:solid;border-width:5px;content:\"\";flex-grow:0;flex-shrink:0;height:0;margin:0 1px;opacity:.5;width:0}.fc-direction-ltr .fc-timeline-event:not(.fc-event-start):before,.fc-direction-rtl .fc-timeline-event:not(.fc-event-end):after{border-left:0}.fc-direction-ltr .fc-timeline-event:not(.fc-event-end):after,.fc-direction-rtl .fc-timeline-event:not(.fc-event-start):before{border-right:0}.fc-timeline-more-link{background:var(--fc-more-link-bg-color);color:var(--fc-more-link-text-color);cursor:pointer;font-size:var(--fc-small-font-size);padding:1px}.fc-timeline-more-link-inner{display:inline-block;left:0;padding:2px;right:0}.fc .fc-timeline-bg{bottom:0;left:0;position:absolute;right:0;top:0;width:0;z-index:2}.fc .fc-timeline-bg .fc-non-business{z-index:1}.fc .fc-timeline-bg .fc-bg-event{z-index:2}.fc .fc-timeline-bg .fc-highlight{z-index:3}.fc .fc-timeline-bg-harness{bottom:0;position:absolute;top:0}";
+    var css_248z = ".fc-timeline-slots{z-index:1}.fc-timeline-slot-minor{border-style:dotted}.fc-timeline-now-indicator-container{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:4}.fc-timeline-now-indicator-arrow,.fc-timeline-now-indicator-line{border-color:var(--fc-now-indicator-color);border-style:solid;pointer-events:none;position:absolute;top:0}.fc-timeline-now-indicator-arrow{border-left-color:transparent;border-right-color:transparent;border-width:6px 5px 0;margin:0 -5px}.fc-timeline-now-indicator-line{border-width:0 0 0 1px;bottom:0}.fc-timeline-events{z-index:3}.fc-timeline-events-overlap-enabled{padding-bottom:10px}.fc-timeline-event{border-radius:0;font-size:var(--fc-small-font-size);margin-bottom:1px;z-index:1}.fc-timeline-event.fc-event-mirror{z-index:2}.fc-direction-ltr .fc-timeline-event.fc-event-end{margin-right:1px}.fc-direction-rtl .fc-timeline-event.fc-event-end{margin-left:1px}.fc-timeline-event-spacious{margin-bottom:0;padding-bottom:5px;padding-top:5px}.fc-timeline-event .fc-event-inner{align-items:center;display:flex;flex-direction:row;padding:2px 1px}.fc-timeline-event:not(.fc-event-end) .fc-event-inner:after,.fc-timeline-event:not(.fc-event-start) .fc-event-inner:before{border-color:transparent #000;border-style:solid;border-width:5px;content:\"\";flex-grow:0;flex-shrink:0;height:0;margin:0 1px;opacity:.5;width:0}.fc-direction-ltr .fc-timeline-event:not(.fc-event-start) .fc-event-inner:before,.fc-direction-rtl .fc-timeline-event:not(.fc-event-end) .fc-event-inner:after{border-left:0}.fc-direction-ltr .fc-timeline-event:not(.fc-event-end) .fc-event-inner:after,.fc-direction-rtl .fc-timeline-event:not(.fc-event-start) .fc-event-inner:before{border-right:0}.fc-timeline-event .fc-event-time{font-weight:700}.fc-timeline-event .fc-event-time,.fc-timeline-event .fc-event-title{padding:0 2px}.fc-timeline-more-link{align-items:flex-start;background:var(--fc-more-link-bg-color);color:var(--fc-more-link-text-color);cursor:pointer;display:flex;flex-direction:column;font-size:var(--fc-small-font-size);padding:1px}.fc-direction-ltr .fc-timeline-more-link{margin-right:1px}.fc-direction-rtl .fc-timeline-more-link{margin-left:1px}.fc-timeline-more-link-inner{padding:2px}.fc-timeline-bg{bottom:0;left:0;position:absolute;right:0;top:0;z-index:2}.fc-timeline-bg .fc-non-business{z-index:1}.fc-timeline-bg .fc-bg-event{z-index:2}.fc-timeline-bg .fc-highlight{z-index:3}.fc-timeline-bg-harness{bottom:0;position:absolute;top:0}";
     internal$1.injectStyles(css_248z);
 
     var plugin = core.createPlugin({
         name: '@fullcalendar/timeline',
-        premiumReleaseDate: '2024-07-12',
+        premiumReleaseDate: '2024-10-09',
         deps: [premiumCommonPlugin__default["default"]],
         initialView: 'timelineDay',
         views: {
@@ -1281,17 +1393,20 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
     var internal = {
         __proto__: null,
         TimelineView: TimelineView,
-        buildSlatCols: buildSlatCols,
         TimelineLane: TimelineLane,
         TimelineLaneBg: TimelineLaneBg,
-        TimelineHeader: TimelineHeader,
         TimelineSlats: TimelineSlats,
         buildTimelineDateProfile: buildTimelineDateProfile,
-        TimelineCoords: TimelineCoords,
+        createVerticalStyle: createVerticalStyle,
+        createHorizontalStyle: createHorizontalStyle,
+        computeSlotWidth: computeSlotWidth,
+        timeToCoord: timeToCoord,
         coordToCss: coordToCss,
         coordsToCss: coordsToCss,
         TimelineLaneSlicer: TimelineLaneSlicer,
-        TimelineHeaderRows: TimelineHeaderRows
+        TimelineHeaderRow: TimelineHeaderRow,
+        TimelineNowIndicatorArrow: TimelineNowIndicatorArrow,
+        TimelineNowIndicatorLine: TimelineNowIndicatorLine
     };
 
     core.globalPlugins.push(plugin);