@fullcalendar/timeline 7.0.0-beta.3 → 7.0.0-rc.0

package/index.global.js

@@ -1,5 +1,5 @@
 /*!
-FullCalendar Timeline Plugin v7.0.0-beta.3
+FullCalendar Timeline Plugin v7.0.0-rc.0
 Docs & License: https://fullcalendar.io/docs/timeline-view-no-resources
 (c) 2024 Adam Shaw
 */
@@ -451,6 +451,8 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
     class TimelineSlatCell extends internal$1.BaseComponent {
         constructor() {
             super(...arguments);
+            // memo
+            this.getPublicDate = internal$1.memoize((dateEnv, date) => dateEnv.toDate(date));
             // ref
             this.innerElRef = preact.createRef();
         }
@@ -459,7 +461,7 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
             let { dateEnv, options } = 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 });
+            let renderProps = Object.assign(Object.assign({ date: this.getPublicDate(dateEnv, props.date) }, dateMeta), { view: context.viewApi });
             return (preact.createElement(internal$1.ContentContainer, { tag: "div", 
                 // fc-align-start shrinks width of InnerContent
                 // TODO: document this semantic className fc-timeline-slot-em
@@ -468,14 +470,16 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
                     'fc-timeline-slot-major' :
                     'fc-timeline-slot-minor'), 'fc-timeline-slot-lane fc-cell fc-flex-col fc-align-start', props.borderStart && 'fc-border-s', props.isDay ?
                     internal$1.getDayClassName(dateMeta) :
-                    internal$1.getSlotClassName(dateMeta)), attrs: {
-                    'data-date': dateEnv.formatIso(date, {
+                    internal$1.getSlotClassName(dateMeta)), attrs: Object.assign({ 'data-date': dateEnv.formatIso(date, {
                         omitTimeZoneOffset: true,
                         omitTime: !tDateProfile.isTimeScale,
-                    }),
-                }, style: {
+                    }) }, (dateMeta.isToday ? { 'aria-current': 'date' } : {})), style: {
                     width: props.width,
-                }, renderProps: renderProps, generatorName: "slotLaneContent", customGenerator: options.slotLaneContent, classNameGenerator: options.slotLaneClassNames, didMount: options.slotLaneDidMount, willUnmount: options.slotLaneWillUnmount }, (InnerContent) => (preact.createElement(InnerContent, { tag: "div", className: 'fc-cell-inner', elRef: this.innerElRef }))));
+                }, renderProps: renderProps, generatorName: "slotLaneContent", customGenerator: options.slotLaneContent, classNameGenerator: options.slotLaneClassNames, didMount: options.slotLaneDidMount, willUnmount: options.slotLaneWillUnmount }, (InnerContent) => (preact.createElement(InnerContent, { tag: "div", className: 'fc-cell-inner', style: {
+                    // HACK for Safari 16.4,
+                    // which can't use ResizeObserver on elements with natural width 0
+                    minWidth: 1,
+                }, elRef: this.innerElRef }))));
         }
         componentDidMount() {
             const innerEl = this.innerElRef.current;
@@ -510,7 +514,7 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
             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", style: { height: props.height } }, slotDates.map((slotDate, i) => {
+            return (preact.createElement("div", { "aria-hidden": true, className: "fc-timeline-slots fc-flex-row fc-fill", style: { height: props.height } }, 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, borderStart: Boolean(i), 
                     // ref
@@ -521,50 +525,132 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
         }
     }
 
-    /*
-    TODO: rename this file!
-    */
-    // returned value is between 0 and the number of snaps
-    function computeDateSnapCoverage$1(date, tDateProfile, dateEnv) {
-        let snapDiff = dateEnv.countDurationsBetween(tDateProfile.normalizedRange.start, date, tDateProfile.snapDuration);
-        if (snapDiff < 0) {
-            return 0;
+    class TimelineHeaderCell extends internal$1.BaseComponent {
+        constructor() {
+            super(...arguments);
+            // memo
+            this.refineRenderProps = internal$1.memoizeObjArg(refineRenderProps);
+            // ref
+            this.innerElRef = preact.createRef();
         }
-        if (snapDiff >= tDateProfile.snapDiffToIndex.length) {
-            return tDateProfile.snapCnt;
+        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,
+            });
+            let isNavLink = !dateMeta.isDisabled && (cell.rowUnit && cell.rowUnit !== 'time');
+            return (preact.createElement(internal$1.ContentContainer, { tag: "div", className: internal$1.joinClassNames('fc-timeline-slot-label fc-timeline-slot', cell.isWeekStart && 'fc-timeline-slot-em', // TODO: document this semantic className
+                'fc-header-cell fc-cell fc-flex-col fc-justify-center', props.borderStart && 'fc-border-s', 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.getSlotClassName(dateMeta) :
+                    internal$1.getDayClassName(dateMeta)), attrs: Object.assign({ 'data-date': dateEnv.formatIso(cell.date, {
+                        omitTime: !tDateProfile.isTimeScale,
+                        omitTimeZoneOffset: true,
+                    }) }, (dateMeta.isToday ? { 'aria-current': 'date' } : {})), style: {
+                    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(InnerContent, { tag: 'div', attrs: isNavLink
+                    // not tabbable because parent is aria-hidden
+                    ? internal$1.buildNavLinkAttrs(context, cell.date, cell.rowUnit, undefined, /* isTabbable = */ false)
+                    : {} // don't bother with aria-hidden because parent already hidden
+                , className: internal$1.joinClassNames('fc-cell-inner fc-padding-md', props.isSticky && 'fc-sticky-s'), elRef: this.innerElRef }))));
         }
-        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
+        componentDidMount() {
+            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)`
+                        : '';
+            });
         }
-        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);
+        componentWillUnmount() {
+            const { props } = this;
+            this.detachSize();
+            internal$1.setRef(props.innerWidthRef, null);
+            internal$1.setRef(props.innerHeightRef, null);
         }
-        return snapCoverage;
     }
-    /*
-    TODO: DRY up with elsewhere?
-    */
-    function horizontalsToCss(hcoord, isRtl) {
-        if (!hcoord) {
-            return {};
-        }
-        if (isRtl) {
-            return { right: hcoord.start, width: hcoord.size };
-        }
-        else {
-            return { left: hcoord.start, width: hcoord.size };
-        }
+    // Utils
+    // -------------------------------------------------------------------------------------------------
+    function renderInnerContent(renderProps) {
+        return renderProps.text;
     }
-    function horizontalCoordToCss(start, isRtl) {
-        if (isRtl) {
-            return { right: start };
+    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);
+                }
+                // TODO: ensure not equal?
+                internal$1.setRef(this.props.innerHeighRef, max);
+            };
         }
-        else {
-            return { left: start };
+        render() {
+            const { props, innerWidthRefMap, innerHeightRefMap } = this;
+            const isCentered = !(props.tDateProfile.isTimeScale && props.isLastRow);
+            const isSticky = !props.isLastRow;
+            return (preact.createElement("div", { className: internal$1.joinClassNames('fc-flex-row fc-grow', // TODO: move fc-grow to parent?
+                !props.isLastRow && 'fc-border-b') }, props.cells.map((cell, cellI) => {
+                // 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, borderStart: Boolean(cellI), 
+                    // 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);
         }
     }
 
@@ -619,13 +705,38 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
     }
     function dateToCoord(// pixels
     date, dateEnv, tDateProfile, slotWidth) {
-        let snapCoverage = computeDateSnapCoverage(date, tDateProfile, dateEnv);
+        let snapCoverage = computeDateSnapCoverage$1(date, tDateProfile, dateEnv);
         let slotCoverage = snapCoverage / tDateProfile.snapsPerSlot;
         return slotCoverage * slotWidth;
     }
     /*
     returned value is between 0 and the number of snaps
     */
+    function computeDateSnapCoverage$1(date, tDateProfile, dateEnv) {
+        let snapDiff = dateEnv.countDurationsBetween(tDateProfile.normalizedRange.start, date, tDateProfile.snapDuration);
+        if (snapDiff < 0) {
+            return 0;
+        }
+        if (snapDiff >= tDateProfile.snapDiffToIndex.length) {
+            return tDateProfile.snapCnt;
+        }
+        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
+        }
+        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);
+        }
+        return snapCoverage;
+    }
+
+    /*
+    TODO: rename this file!
+    */
+    // 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) {
@@ -644,7 +755,107 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
             // always round up in this case. works for start AND end dates in a range.
             snapCoverage = Math.ceil(snapCoverage);
         }
-        return snapCoverage;
+        return snapCoverage;
+    }
+    /*
+    TODO: DRY up with elsewhere?
+    */
+    function horizontalsToCss(hcoord, isRtl) {
+        if (!hcoord) {
+            return {};
+        }
+        if (isRtl) {
+            return { right: hcoord.start, width: hcoord.size };
+        }
+        else {
+            return { left: hcoord.start, width: hcoord.size };
+        }
+    }
+    function horizontalCoordToCss(start, isRtl) {
+        if (isRtl) {
+            return { right: start };
+        }
+        else {
+            return { left: start };
+        }
+    }
+
+    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?
+                , { className: 'fc-timeline-now-indicator-line', style: props.slotWidth != null
+                        ? horizontalCoordToCss(dateToCoord(props.nowDate, context.dateEnv, props.tDateProfile, props.slotWidth), context.isRtl)
+                        : {}, isAxis: false, date: props.nowDate })));
+        }
+    }
+
+    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, { className: 'fc-timeline-now-indicator-arrow', style: props.slotWidth != null
+                        ? horizontalCoordToCss(dateToCoord(props.nowDate, context.dateEnv, props.tDateProfile, props.slotWidth), context.isRtl)
+                        : {}, isAxis: true, date: props.nowDate })));
+        }
+    }
+
+    function getTimelineSlotEl(parentEl, index) {
+        return parentEl.querySelectorAll('.fc-timeline-slot')[index];
+    }
+
+    class TimelineLaneSlicer extends internal$1.Slicer {
+        sliceRange(origRange, dateProfile, dateProfileGenerator, tDateProfile, dateEnv) {
+            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)) {
+                // intersect the footprint's range with the grid's range
+                let slicedRange = internal$1.intersectRanges(normalRange, tDateProfile.normalizedRange);
+                if (slicedRange) {
+                    segs.push({
+                        startDate: slicedRange.start,
+                        endDate: slicedRange.end,
+                        isStart: slicedRange.start.valueOf() === normalRange.start.valueOf()
+                            && isValidDate(slicedRange.start, tDateProfile, dateProfile, dateProfileGenerator),
+                        isEnd: slicedRange.end.valueOf() === normalRange.end.valueOf()
+                            && isValidDate(internal$1.addMs(slicedRange.end, -1), tDateProfile, dateProfile, dateProfileGenerator),
+                    });
+                }
+            }
+            return segs;
+        }
+    }
+
+    const DEFAULT_TIME_FORMAT = internal$1.createFormatter({
+        hour: 'numeric',
+        minute: '2-digit',
+        omitZeroMinute: true,
+        meridiem: 'narrow',
+    });
+    class TimelineEvent extends internal$1.BaseComponent {
+        render() {
+            let { props, context } = this;
+            let { options } = context;
+            return (preact.createElement(internal$1.StandardEvent, Object.assign({}, props, { className: internal$1.joinClassNames('fc-timeline-event', options.eventOverlap === false // TODO: fix bad default
+                    && 'fc-timeline-event-spacious', 'fc-h-event'), defaultTimeFormat: DEFAULT_TIME_FORMAT, defaultDisplayEventTime: !props.isTimeScale })));
+        }
+    }
+
+    class TimelineLaneMoreLink extends internal$1.BaseComponent {
+        render() {
+            let { props } = this;
+            let { hiddenSegs, resourceId, forcedInvisibleMap } = props;
+            let dateSpanProps = resourceId ? { resourceId } : {};
+            return (preact.createElement(internal$1.MoreLinkContainer, { className: 'fc-timeline-more-link', allDayDate: null, segs: hiddenSegs, hiddenSegs: hiddenSegs, dateProfile: props.dateProfile, todayRange: props.todayRange, dateSpanProps: dateSpanProps, 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, { tag: "div", className: 'fc-timeline-more-link-inner fc-sticky-s' }))));
+        }
     }
 
     function computeManySegHorizontals(segs, segMinWidth, dateEnv, tDateProfile, slotWidth) {
@@ -711,83 +922,6 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
         ];
     }
 
-    class TimelineLaneBg extends internal$1.BaseComponent {
-        render() {
-            let { props } = this;
-            let highlightSeg = [].concat(props.eventResizeSegs, props.dateSelectionSegs);
-            return (preact.createElement(preact.Fragment, null,
-                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-fill-y", style: hStyle }, fillType === 'bg-event' ?
-                    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))));
-            })));
-        }
-    }
-
-    class TimelineLaneSlicer extends internal$1.Slicer {
-        sliceRange(origRange, dateProfile, dateProfileGenerator, tDateProfile, dateEnv) {
-            let normalRange = normalizeRange(origRange, tDateProfile, dateEnv);
-            let segs = [];
-            // protect against when the span is entirely in an invalid date region
-            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) {
-                    segs.push({
-                        startDate: slicedRange.start,
-                        endDate: slicedRange.end,
-                        isStart: slicedRange.start.valueOf() === normalRange.start.valueOf()
-                            && isValidDate(slicedRange.start, tDateProfile, dateProfile, dateProfileGenerator),
-                        isEnd: slicedRange.end.valueOf() === normalRange.end.valueOf()
-                            && isValidDate(internal$1.addMs(slicedRange.end, -1), tDateProfile, dateProfile, dateProfileGenerator),
-                    });
-                }
-            }
-            return segs;
-        }
-    }
-
-    const DEFAULT_TIME_FORMAT = internal$1.createFormatter({
-        hour: 'numeric',
-        minute: '2-digit',
-        omitZeroMinute: true,
-        meridiem: 'narrow',
-    });
-    class TimelineEvent extends internal$1.BaseComponent {
-        render() {
-            let { props, context } = this;
-            let { options } = context;
-            return (preact.createElement(internal$1.StandardEvent, Object.assign({}, props, { className: internal$1.joinClassNames('fc-timeline-event', options.eventOverlap === false // TODO: fix bad default
-                    && 'fc-timeline-event-spacious', 'fc-h-event'), defaultTimeFormat: DEFAULT_TIME_FORMAT, defaultDisplayEventTime: !props.isTimeScale })));
-        }
-    }
-
-    class TimelineLaneMoreLink extends internal$1.BaseComponent {
-        render() {
-            let { props } = this;
-            let { hiddenSegs, resourceId, forcedInvisibleMap } = props;
-            let dateSpanProps = resourceId ? { resourceId } : {};
-            return (preact.createElement(internal$1.MoreLinkContainer, { className: 'fc-timeline-more-link', allDayDate: null, segs: hiddenSegs, hiddenSegs: hiddenSegs, dateProfile: props.dateProfile, todayRange: props.todayRange, dateSpanProps: dateSpanProps, 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, { tag: "div", className: 'fc-timeline-more-link-inner fc-sticky-s' }))));
-        }
-    }
-
     /*
     TODO: make DRY with other Event Harnesses
     */
@@ -813,10 +947,7 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
         }
     }
 
-    /*
-    TODO: split TimelineLaneBg and TimelineLaneFg?
-    */
-    class TimelineLane extends internal$1.BaseComponent {
+    class TimelineFg extends internal$1.BaseComponent {
         constructor() {
             super(...arguments);
             // memo
@@ -828,8 +959,6 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
             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
             };
@@ -843,39 +972,30 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
         render() {
             let { props, context, segHeightRefMap, moreLinkHeightRefMap } = 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...
-            dateProfile, context.dateProfileGenerator, tDateProfile, context.dateEnv);
-            let mirrorSegs = (slicedProps.eventDrag ? slicedProps.eventDrag.segs : null) ||
-                (slicedProps.eventResize ? slicedProps.eventResize.segs : null) ||
+            let { tDateProfile } = props;
+            let mirrorSegs = (props.eventDrag ? props.eventDrag.segs : null) ||
+                (props.eventResize ? props.eventResize.segs : null) ||
                 [];
-            let fgSegs = this.sortEventSegs(slicedProps.fgEventSegs, options.eventOrder);
+            let fgSegs = this.sortEventSegs(props.fgEventSegs, options.eventOrder);
             let fgSegHorizontals = props.slotWidth != null
                 ? computeManySegHorizontals(fgSegs, options.eventMinWidth, context.dateEnv, tDateProfile, props.slotWidth)
                 : {};
             let [fgSegTops, hiddenGroups, hiddenGroupTops, totalHeight] = computeFgSegPlacements(fgSegs, fgSegHorizontals, segHeightRefMap.current, moreLinkHeightRefMap.current, options.eventOrderStrict, options.eventMaxStack);
+            this.totalHeight = totalHeight;
             let forcedInvisibleMap = // TODO: more convenient/DRY
-             (slicedProps.eventDrag ? slicedProps.eventDrag.affectedInstances : null) ||
-                (slicedProps.eventResize ? slicedProps.eventResize.affectedInstances : null) ||
+             (props.eventDrag ? props.eventDrag.affectedInstances : null) ||
+                (props.eventResize ? props.eventResize.affectedInstances : null) ||
                 {};
-            return (preact.createElement(preact.Fragment, null,
-                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: internal$1.joinClassNames('fc-timeline-events', options.eventOverlap === false // TODO: fix bad default
-                        ? 'fc-timeline-events-overlap-disabled'
-                        : 'fc-timeline-events-overlap-enabled', 'fc-content-box'), style: { height: totalHeight } },
-                    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
-                    [], // hiddenGroups
-                    new Map(), // hiddenGroupTops
-                    Boolean(slicedProps.eventDrag), Boolean(slicedProps.eventResize), false))));
+            return (preact.createElement("div", { className: 'fc-timeline-events fc-rel', style: { height: totalHeight } },
+                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
+                [], // hiddenGroups
+                new Map(), // hiddenGroupTops
+                Boolean(props.eventDrag), Boolean(props.eventResize), false)));
         }
         renderFgSegs(segs, segHorizontals, segTops, forcedInvisibleMap, hiddenGroups, hiddenGroupTops, isDragging, isResizing, isDateSelecting) {
             let { props, context, segHeightRefMap, moreLinkHeightRefMap } = this;
@@ -897,158 +1017,43 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
                     }, context.isRtl)), heightRef: moreLinkHeightRefMap.createRef(hiddenGroup.key) },
                     preact.createElement(TimelineLaneMoreLink, { hiddenSegs: hiddenGroup.segs, 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, { tag: "div", className: internal$1.joinClassNames('fc-timeline-slot-label fc-timeline-slot', cell.isWeekStart && 'fc-timeline-slot-em', // TODO: document this semantic className
-                'fc-header-cell fc-cell fc-flex-col fc-justify-center', props.borderStart && 'fc-border-s', 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.getSlotClassName(dateMeta) :
-                    internal$1.getDayClassName(dateMeta)), attrs: {
-                    'data-date': dateEnv.formatIso(cell.date, {
-                        omitTime: !tDateProfile.isTimeScale,
-                        omitTimeZoneOffset: true,
-                    }),
-                }, style: {
-                    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(InnerContent, { tag: "a", attrs: this.buildCellNavLinkAttrs(context, cell.date, cell.rowUnit), className: internal$1.joinClassNames('fc-cell-inner fc-padding-md', props.isSticky && 'fc-sticky-s'), elRef: this.innerElRef }))));
-        }
-        componentDidMount() {
-            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() {
-            const { props } = this;
-            this.detachSize();
-            internal$1.setRef(props.innerWidthRef, null);
-            internal$1.setRef(props.innerHeightRef, null);
-        }
-    }
-    // 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);
-                }
-                // TODO: ensure not equal?
-                internal$1.setRef(this.props.innerHeighRef, max);
-            };
+        /*
+        componentDidMount(): void {
+          // might want to do firedTotalHeight, but won't be ready on first render
         }
-        render() {
-            const { props, innerWidthRefMap, innerHeightRefMap } = this;
-            const isCentered = !(props.tDateProfile.isTimeScale && props.isLastRow);
-            const isSticky = !props.isLastRow;
-            return (preact.createElement("div", { className: internal$1.joinClassNames('fc-flex-row fc-grow', // TODO: move fc-grow to parent?
-                !props.isLastRow && 'fc-border-b') }, props.cells.map((cell, cellI) => {
-                // 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, borderStart: Boolean(cellI), 
-                    // refs
-                    innerWidthRef: innerWidthRefMap.createRef(key), innerHeightRef: innerHeightRefMap.createRef(key), 
-                    // dimensions
-                    slotWidth: props.slotWidth }));
-            })));
+        */
+        componentDidUpdate() {
+            if (this.totalHeight !== this.firedTotalHeight) {
+                this.firedTotalHeight = this.totalHeight;
+                internal$1.setRef(this.props.heightRef, this.totalHeight);
+            }
         }
         componentWillUnmount() {
-            internal$1.setRef(this.props.innerWidthRef, null);
-            internal$1.setRef(this.props.innerHeighRef, null);
+            internal$1.setRef(this.props.heightRef, null);
         }
     }
 
-    class TimelineNowIndicatorLine extends internal$1.BaseComponent {
+    class TimelineBg 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?
-                , { className: 'fc-timeline-now-indicator-line', style: props.slotWidth != null
-                        ? horizontalCoordToCss(dateToCoord(props.nowDate, context.dateEnv, props.tDateProfile, props.slotWidth), context.isRtl)
-                        : {}, isAxis: false, date: props.nowDate })));
+            let { props } = this;
+            let highlightSeg = [].concat(props.eventResizeSegs || [], props.dateSelectionSegs);
+            return (preact.createElement(preact.Fragment, null,
+                this.renderSegs(props.businessHourSegs || [], 'non-business'),
+                this.renderSegs(props.bgEventSegs || [], 'bg-event'),
+                this.renderSegs(highlightSeg, 'highlight')));
         }
-    }
-
-    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, { className: 'fc-timeline-now-indicator-arrow', style: props.slotWidth != null
-                        ? horizontalCoordToCss(dateToCoord(props.nowDate, context.dateEnv, props.tDateProfile, props.slotWidth), context.isRtl)
-                        : {}, isAxis: true, date: props.nowDate })));
+        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-fill-y", style: hStyle }, fillType === 'bg-event' ?
+                    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))));
+            })));
         }
     }
 
@@ -1066,6 +1071,7 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
                 internal$1.afterSize(this.handleSlotInnerWidths);
             });
             this.scrollTime = null;
+            this.slicer = new TimelineLaneSlicer();
             // Sizing
             // -----------------------------------------------------------------------------------------------
             this.handleBodySlotInnerWidth = (innerWidth) => {
@@ -1073,39 +1079,34 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
                 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 });
+                const headerSlotInnerWidth = this.headerRowInnerWidthMap.current.get(this.tDateProfile.cellRows.length - 1);
+                const { bodySlotInnerWidth } = this;
+                if (headerSlotInnerWidth != null && bodySlotInnerWidth != null) {
+                    const slotInnerWidth = Math.max(headerSlotInnerWidth, bodySlotInnerWidth);
+                    if (slotInnerWidth !== this.state.slotInnerWidth) {
+                        this.setState({ slotInnerWidth });
+                    }
                 }
             };
-            this.handleClientWidth = (clientWidth) => {
+            this.handleTotalWidth = (totalWidth) => {
                 this.setState({
-                    clientWidth,
+                    totalWidth,
                 });
             };
-            this.handleEndScrollbarWidth = (endScrollbarWidth) => {
+            this.handleClientWidth = (clientWidth) => {
                 this.setState({
-                    endScrollbarWidth
+                    clientWidth,
                 });
             };
-            this.handleTimeScroll = (scrollTime) => {
+            this.handleTimeScrollRequest = (scrollTime) => {
                 this.scrollTime = scrollTime;
-                this.updateScroll();
+                this.applyTimeScroll();
             };
-            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 += 1; // overcome border. TODO: DRY this up
-                    }
-                    this.syncedScroller.scrollTo({ x });
+            this.handleTimeScrollEnd = (isUser) => {
+                if (isUser) {
+                    this.scrollTime = null;
                 }
             };
-            this.clearScroll = () => {
-                this.scrollTime = null;
-            };
             // Hit System
             // -----------------------------------------------------------------------------------------------
             this.handeBodyEl = (el) => {
@@ -1121,6 +1122,10 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
         render() {
             const { props, state, context } = this;
             const { options } = context;
+            const { totalWidth, clientWidth } = state;
+            const endScrollbarWidth = (totalWidth != null && clientWidth != null)
+                ? totalWidth - clientWidth
+                : undefined;
             /* date */
             const tDateProfile = this.tDateProfile = this.buildTimelineDateProfile(props.dateProfile, context.dateEnv, options, context.dateProfileGenerator);
             const { cellRows } = tDateProfile;
@@ -1131,8 +1136,11 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
             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.clientWidth);
+            clientWidth);
             this.slotWidth = slotWidth;
+            /* sliced */
+            let slicedProps = this.slicer.sliceProps(props, props.dateProfile, tDateProfile.isTimeScale ? null : options.nextDayThreshold, context, // wish we didn't have to pass in the rest of the args...
+            props.dateProfile, context.dateProfileGenerator, tDateProfile, context.dateEnv);
             return (preact.createElement(internal$1.NowTimer, { unit: timerUnit }, (nowDate, todayRange) => {
                 const enableNowIndicator = // TODO: DRY
                  options.nowIndicator &&
@@ -1152,18 +1160,30 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
                                 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 && (preact.createElement(TimelineNowIndicatorArrow, { tDateProfile: tDateProfile, nowDate: nowDate, slotWidth: slotWidth }))),
-                        Boolean(state.endScrollbarWidth) && (preact.createElement("div", { className: 'fc-border-s fc-filler', style: { minWidth: state.endScrollbarWidth } }))),
-                    preact.createElement(internal$1.Scroller, { vertical: verticalScrolling, horizontal: true, hideScrollbars: props.forPrint, className: internal$1.joinClassNames('fc-timeline-body fc-flex-col', verticalScrolling && 'fc-liquid'), ref: this.bodyScrollerRef, clientWidthRef: this.handleClientWidth, endScrollbarWidthRef: this.handleEndScrollbarWidth },
-                        preact.createElement("div", { className: "fc-rel fc-grow", style: { width: canvasWidth }, ref: this.handeBodyEl },
+                        Boolean(endScrollbarWidth) && (preact.createElement("div", { className: 'fc-border-s fc-filler', style: { minWidth: endScrollbarWidth } }))),
+                    preact.createElement(internal$1.Scroller, { vertical: verticalScrolling, horizontal: true, hideScrollbars: stickyFooterScrollbar ||
+                            props.forPrint // prevents blank space in print-view on Safari
+                        , className: internal$1.joinClassNames('fc-timeline-body fc-flex-col', verticalScrolling && 'fc-liquid'), ref: this.bodyScrollerRef, clientWidthRef: this.handleClientWidth },
+                        preact.createElement("div", { "aria-label": options.eventsHint, 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 }),
+                            preact.createElement(TimelineBg, { tDateProfile: tDateProfile, nowDate: nowDate, todayRange: todayRange, 
+                                // content
+                                bgEventSegs: slicedProps.bgEventSegs, businessHourSegs: slicedProps.businessHourSegs, dateSelectionSegs: slicedProps.dateSelectionSegs, eventResizeSegs: slicedProps.eventResize ? slicedProps.eventResize.segs : null, 
+                                // dimensions
+                                slotWidth: slotWidth }),
+                            preact.createElement(TimelineFg, { dateProfile: props.dateProfile, tDateProfile: tDateProfile, nowDate: nowDate, todayRange: todayRange, 
+                                // content
+                                fgEventSegs: slicedProps.fgEventSegs, eventDrag: slicedProps.eventDrag, eventResize: slicedProps.eventResize, eventSelection: slicedProps.eventSelection, 
+                                // dimensions
+                                slotWidth: slotWidth }),
+                            preact.createElement("div", { className: 'fc-timeline-lane-footer' }),
                             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 } })))));
+                    Boolean(stickyFooterScrollbar) && (preact.createElement(internal$1.FooterScrollbar, { isSticky: true, canvasWidth: canvasWidth, scrollerRef: this.footerScrollerRef })),
+                    preact.createElement(internal$1.Ruler, { widthRef: this.handleTotalWidth })));
             }));
         }
         // Lifecycle
@@ -1172,8 +1192,8 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
             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);
+            this.context.emitter.on('_timeScrollRequest', this.handleTimeScrollRequest);
+            this.syncedScroller.addScrollEndListener(this.handleTimeScrollEnd);
         }
         componentDidUpdate(prevProps) {
             this.updateSyncedScroller();
@@ -1182,13 +1202,13 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
             }
             else {
                 // TODO: inefficient to update so often
-                this.updateScroll();
+                this.applyTimeScroll();
             }
         }
         componentWillUnmount() {
             this.syncedScroller.destroy();
-            this.context.emitter.off('_timeScrollRequest', this.handleTimeScroll);
-            this.syncedScroller.removeScrollEndListener(this.clearScroll);
+            this.context.emitter.off('_timeScrollRequest', this.handleTimeScrollRequest);
+            this.syncedScroller.removeScrollEndListener(this.handleTimeScrollEnd);
         }
         // Scrolling
         // -----------------------------------------------------------------------------------------------
@@ -1200,7 +1220,17 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
             ]);
         }
         resetScroll() {
-            this.handleTimeScroll(this.context.options.scrollTime);
+            this.handleTimeScrollRequest(this.context.options.scrollTime);
+        }
+        applyTimeScroll() {
+            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 += 1; // overcome border. TODO: DRY this up
+                }
+                this.syncedScroller.scrollTo({ x });
+            }
         }
         queryHit(positionLeft, positionTop, elWidth, elHeight) {
             const { props, context, tDateProfile, slotWidth } = this;
@@ -1238,8 +1268,7 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
                         top: 0,
                         bottom: elHeight,
                     },
-                    // HACK. TODO: This is expensive to do every hit-query
-                    dayEl: this.bodyEl.querySelectorAll('.fc-timeline-slot')[slatIndex],
+                    getDayEl: () => getTimelineSlotEl(this.bodyEl, slatIndex),
                     layer: 0,
                 };
             }
@@ -1247,12 +1276,12 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
         }
     }
 
-    var css_248z = ".fc-timeline-slots{z-index:1}.fc-timeline-events{position:relative;z-index:2}.fc-timeline-slot-minor{border-style:dotted}.fc-timeline-events-overlap-enabled{padding-bottom:10px}.fc-timeline-event{border-radius:0;font-size:var(--fc-small-font-size);margin-bottom:1px}.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 .fc-event-inner{align-items:center;display:flex;flex-direction:row;padding:2px 1px}.fc-timeline-event-spacious .fc-event-inner{padding-bottom:5px;padding-top:5px}.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-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-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-now-indicator-container{bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;z-index:4}.fc-timeline-now-indicator-arrow{border-bottom-style:solid;border-bottom-width:0;border-color:var(--fc-now-indicator-color);border-left:5px solid transparent;border-right:5px solid transparent;border-top-style:solid;border-top-width:6px;height:0;margin:0 -5px;position:absolute;top:0;width:0}.fc-timeline-now-indicator-line{border-left:1px solid var(--fc-now-indicator-color);bottom:0;position:absolute;top:0}";
+    var css_248z = ".fc-timeline-lane-footer{padding-bottom:10px}.fc-timeline-overlap-disabled .fc-timeline-lane-footer{padding-bottom:0}.fc-timeline-slot-minor{border-style:dotted}.fc-timeline-event{border-radius:0;font-size:var(--fc-small-font-size);margin-bottom:1px}.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 .fc-event-inner{align-items:center;display:flex;flex-direction:row;padding:2px 1px}.fc-timeline-event-spacious .fc-event-inner{padding-bottom:5px;padding-top:5px}.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-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-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-now-indicator-container{bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;z-index:2}.fc-timeline-now-indicator-arrow{border-bottom-style:solid;border-bottom-width:0;border-color:var(--fc-now-indicator-color);border-left:5px solid transparent;border-right:5px solid transparent;border-top-style:solid;border-top-width:6px;height:0;margin:0 -5px;position:absolute;top:0;width:0}.fc-timeline-now-indicator-line{border-left:1px solid var(--fc-now-indicator-color);bottom:0;position:absolute;top:0}";
     internal$1.injectStyles(css_248z);
 
     var plugin = core.createPlugin({
         name: '@fullcalendar/timeline',
-        premiumReleaseDate: '2024-12-19',
+        premiumReleaseDate: '2025-02-21',
         deps: [premiumCommonPlugin__default["default"]],
         initialView: 'timelineDay',
         views: {
@@ -1283,8 +1312,8 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
     var internal = {
         __proto__: null,
         TimelineView: TimelineView,
-        TimelineLane: TimelineLane,
-        TimelineLaneBg: TimelineLaneBg,
+        TimelineFg: TimelineFg,
+        TimelineBg: TimelineBg,
         TimelineSlats: TimelineSlats,
         buildTimelineDateProfile: buildTimelineDateProfile,
         createVerticalStyle: createVerticalStyle,
@@ -1294,7 +1323,8 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
         TimelineLaneSlicer: TimelineLaneSlicer,
         TimelineHeaderRow: TimelineHeaderRow,
         TimelineNowIndicatorArrow: TimelineNowIndicatorArrow,
-        TimelineNowIndicatorLine: TimelineNowIndicatorLine
+        TimelineNowIndicatorLine: TimelineNowIndicatorLine,
+        getTimelineSlotEl: getTimelineSlotEl
     };
 
     core.globalPlugins.push(plugin);