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

package/internal.js

@@ -1,4 +1,4 @@
-import { config, createFormatter, greatestDurationDenominator, asCleanDays, createDuration, wholeDivideDurations, asRoughMs, addDays, startOfDay, asRoughSeconds, asRoughMinutes, diffWholeDays, isInt, computeVisibleDayRange, padStart, BaseComponent, getDateMeta, ContentContainer, joinClassNames, getDayClassName, getSlotClassName, watchWidth, setRef, RefMap, afterSize, getEventKey, SegHierarchy, groupIntersectingSegs, buildEventRangeKey, BgEvent, getEventRangeMeta, renderFill, Slicer, intersectRanges, addMs, StandardEvent, MoreLinkContainer, watchHeight, memoize, sortEventSegs, memoizeObjArg, watchSize, buildNavLinkAttrs, NowIndicatorContainer, DateComponent, getIsHeightAuto, getStickyHeaderDates, getStickyFooterScrollbar, NowTimer, rangeContainsMarker, ViewContainer, Scroller, multiplyDuration, injectStyles } from '@fullcalendar/core/internal.js';
+import { config, createFormatter, greatestDurationDenominator, asCleanDays, createDuration, wholeDivideDurations, asRoughMs, addDays, startOfDay, asRoughSeconds, asRoughMinutes, diffWholeDays, isInt, computeVisibleDayRange, padStart, BaseComponent, memoize, getDateMeta, ContentContainer, joinClassNames, getDayClassName, getSlotClassName, watchWidth, setRef, RefMap, afterSize, memoizeObjArg, buildNavLinkAttrs, watchSize, NowIndicatorContainer, Slicer, intersectRanges, addMs, StandardEvent, MoreLinkContainer, getEventRangeMeta, getEventKey, SegHierarchy, groupIntersectingSegs, watchHeight, sortEventSegs, buildEventRangeKey, BgEvent, renderFill, DateComponent, getIsHeightAuto, getStickyHeaderDates, getStickyFooterScrollbar, NowTimer, rangeContainsMarker, ViewContainer, Scroller, FooterScrollbar, Ruler, multiplyDuration, injectStyles } from '@fullcalendar/core/internal.js';
 import { createRef, createElement, Fragment, Component } from '@fullcalendar/core/preact.js';
 import { ScrollerSyncer } from '@fullcalendar/scrollgrid/internal.js';
 
@@ -443,6 +443,8 @@ function buildCellObject(date, text, rowUnit) {
 class TimelineSlatCell extends BaseComponent {
     constructor() {
         super(...arguments);
+        // memo
+        this.getPublicDate = memoize((dateEnv, date) => dateEnv.toDate(date));
         // ref
         this.innerElRef = createRef();
     }
@@ -451,7 +453,7 @@ class TimelineSlatCell extends BaseComponent {
         let { dateEnv, options } = context;
         let { date, tDateProfile, isEm } = props;
         let dateMeta = 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 (createElement(ContentContainer, { tag: "div", 
             // fc-align-start shrinks width of InnerContent
             // TODO: document this semantic className fc-timeline-slot-em
@@ -460,14 +462,16 @@ class TimelineSlatCell extends BaseComponent {
                 '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 ?
                 getDayClassName(dateMeta) :
-                getSlotClassName(dateMeta)), attrs: {
-                'data-date': dateEnv.formatIso(date, {
+                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) => (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) => (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;
@@ -502,7 +506,7 @@ class TimelineSlats extends BaseComponent {
         let { tDateProfile, slotWidth } = props;
         let { slotDates, isWeekStarts } = tDateProfile;
         let isDay = !tDateProfile.isTimeScale && !tDateProfile.largeUnit;
-        return (createElement("div", { className: "fc-timeline-slots fc-fill fc-flex-row", style: { height: props.height } }, slotDates.map((slotDate, i) => {
+        return (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 (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
@@ -513,50 +517,132 @@ class TimelineSlats extends BaseComponent {
     }
 }
 
-/*
-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 BaseComponent {
+    constructor() {
+        super(...arguments);
+        // memo
+        this.refineRenderProps = memoizeObjArg(refineRenderProps);
+        // ref
+        this.innerElRef = 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 = 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 (createElement(ContentContainer, { tag: "div", className: 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' ?
+                getSlotClassName(dateMeta) :
+                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) => (createElement(InnerContent, { tag: 'div', attrs: isNavLink
+                // not tabbable because parent is aria-hidden
+                ? buildNavLinkAttrs(context, cell.date, cell.rowUnit, undefined, /* isTabbable = */ false)
+                : {} // don't bother with aria-hidden because parent already hidden
+            , className: 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 (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 = watchSize(innerEl, (width, height) => {
+            setRef(props.innerWidthRef, width);
+            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();
+        setRef(props.innerWidthRef, null);
+        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 BaseComponent {
+    constructor() {
+        super(...arguments);
+        // refs
+        this.innerWidthRefMap = new RefMap(() => {
+            afterSize(this.handleInnerWidths);
+        });
+        this.innerHeightRefMap = new RefMap(() => {
+            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?
+            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?
+            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 (createElement("div", { className: 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 (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() {
+        setRef(this.props.innerWidthRef, null);
+        setRef(this.props.innerHeighRef, null);
     }
 }
 
@@ -611,13 +697,38 @@ time, dateEnv, dateProfile, tDateProfile, slowWidth) {
 }
 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 (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) {
@@ -636,7 +747,107 @@ function computeDateSnapCoverage(date, tDateProfile, dateEnv) {
         // 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 BaseComponent {
+    render() {
+        const { props, context } = this;
+        return (createElement("div", { className: "fc-timeline-now-indicator-container" },
+            createElement(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 BaseComponent {
+    render() {
+        const { props, context } = this;
+        return (createElement("div", { className: "fc-timeline-now-indicator-container" },
+            createElement(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 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 = 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(addMs(slicedRange.end, -1), tDateProfile, dateProfile, dateProfileGenerator),
+                });
+            }
+        }
+        return segs;
+    }
+}
+
+const DEFAULT_TIME_FORMAT = createFormatter({
+    hour: 'numeric',
+    minute: '2-digit',
+    omitZeroMinute: true,
+    meridiem: 'narrow',
+});
+class TimelineEvent extends BaseComponent {
+    render() {
+        let { props, context } = this;
+        let { options } = context;
+        return (createElement(StandardEvent, Object.assign({}, props, { className: 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 BaseComponent {
+    render() {
+        let { props } = this;
+        let { hiddenSegs, resourceId, forcedInvisibleMap } = props;
+        let dateSpanProps = resourceId ? { resourceId } : {};
+        return (createElement(MoreLinkContainer, { className: 'fc-timeline-more-link', allDayDate: null, segs: hiddenSegs, hiddenSegs: hiddenSegs, dateProfile: props.dateProfile, todayRange: props.todayRange, dateSpanProps: dateSpanProps, popoverContent: () => (createElement(Fragment, null, hiddenSegs.map((seg) => {
+                let { eventRange } = seg;
+                let instanceId = eventRange.instance.instanceId;
+                return (createElement("div", { key: instanceId, style: { visibility: forcedInvisibleMap[instanceId] ? 'hidden' : '' } },
+                    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 }, getEventRangeMeta(eventRange, props.todayRange, props.nowDate)))));
+            }))) }, (InnerContent) => (createElement(InnerContent, { tag: "div", className: 'fc-timeline-more-link-inner fc-sticky-s' }))));
+    }
 }
 
 function computeManySegHorizontals(segs, segMinWidth, dateEnv, tDateProfile, slotWidth) {
@@ -703,83 +914,6 @@ hiddenGroupHeights, strictOrder, maxDepth) {
     ];
 }
 
-class TimelineLaneBg extends BaseComponent {
-    render() {
-        let { props } = this;
-        let highlightSeg = [].concat(props.eventResizeSegs, props.dateSelectionSegs);
-        return (createElement(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 (createElement(Fragment, null, segs.map((seg) => {
-            let hStyle; // TODO
-            if (slotWidth != null) {
-                let segHorizontal = computeSegHorizontals(seg, undefined, dateEnv, tDateProfile, slotWidth);
-                hStyle = horizontalsToCss(segHorizontal, isRtl);
-            }
-            return (createElement("div", { key: buildEventRangeKey(seg.eventRange), className: "fc-fill-y", style: hStyle }, fillType === 'bg-event' ?
-                createElement(BgEvent, Object.assign({ eventRange: seg.eventRange, isStart: seg.isStart, isEnd: seg.isEnd }, getEventRangeMeta(seg.eventRange, todayRange, nowDate))) : (renderFill(fillType))));
-        })));
-    }
-}
-
-class TimelineLaneSlicer extends 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 = 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(addMs(slicedRange.end, -1), tDateProfile, dateProfile, dateProfileGenerator),
-                });
-            }
-        }
-        return segs;
-    }
-}
-
-const DEFAULT_TIME_FORMAT = createFormatter({
-    hour: 'numeric',
-    minute: '2-digit',
-    omitZeroMinute: true,
-    meridiem: 'narrow',
-});
-class TimelineEvent extends BaseComponent {
-    render() {
-        let { props, context } = this;
-        let { options } = context;
-        return (createElement(StandardEvent, Object.assign({}, props, { className: 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 BaseComponent {
-    render() {
-        let { props } = this;
-        let { hiddenSegs, resourceId, forcedInvisibleMap } = props;
-        let dateSpanProps = resourceId ? { resourceId } : {};
-        return (createElement(MoreLinkContainer, { className: 'fc-timeline-more-link', allDayDate: null, segs: hiddenSegs, hiddenSegs: hiddenSegs, dateProfile: props.dateProfile, todayRange: props.todayRange, dateSpanProps: dateSpanProps, popoverContent: () => (createElement(Fragment, null, hiddenSegs.map((seg) => {
-                let { eventRange } = seg;
-                let instanceId = eventRange.instance.instanceId;
-                return (createElement("div", { key: instanceId, style: { visibility: forcedInvisibleMap[instanceId] ? 'hidden' : '' } },
-                    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 }, getEventRangeMeta(eventRange, props.todayRange, props.nowDate)))));
-            }))) }, (InnerContent) => (createElement(InnerContent, { tag: "div", className: 'fc-timeline-more-link-inner fc-sticky-s' }))));
-    }
-}
-
 /*
 TODO: make DRY with other Event Harnesses
 */
@@ -805,10 +939,7 @@ class TimelineEventHarness extends Component {
     }
 }
 
-/*
-TODO: split TimelineLaneBg and TimelineLaneFg?
-*/
-class TimelineLane extends BaseComponent {
+class TimelineFg extends BaseComponent {
     constructor() {
         super(...arguments);
         // memo
@@ -820,8 +951,6 @@ class TimelineLane extends BaseComponent {
         this.moreLinkHeightRefMap = new RefMap(() => {
             afterSize(this.handleMoreLinkHeights);
         });
-        // internal
-        this.slicer = new TimelineLaneSlicer();
         this.handleMoreLinkHeights = () => {
             this.setState({ moreLinkHeightRev: this.moreLinkHeightRefMap.rev }); // will trigger rerender
         };
@@ -835,39 +964,30 @@ class TimelineLane extends BaseComponent {
     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 (createElement(Fragment, null,
-            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 }),
-            createElement("div", { className: 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 (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;
@@ -889,158 +1009,43 @@ class TimelineLane extends BaseComponent {
                 }, context.isRtl)), heightRef: moreLinkHeightRefMap.createRef(hiddenGroup.key) },
                 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 BaseComponent {
-    constructor() {
-        super(...arguments);
-        // memo
-        this.refineRenderProps = memoizeObjArg(refineRenderProps);
-        this.buildCellNavLinkAttrs = memoize(buildCellNavLinkAttrs);
-        // ref
-        this.innerElRef = 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 = 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 (createElement(ContentContainer, { tag: "div", className: 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' ?
-                getSlotClassName(dateMeta) :
-                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) => (createElement(InnerContent, { tag: "a", attrs: this.buildCellNavLinkAttrs(context, cell.date, cell.rowUnit), className: 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 = watchSize(innerEl, (width, height) => {
-            setRef(props.innerWidthRef, width);
-            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();
-        setRef(props.innerWidthRef, null);
-        setRef(props.innerHeightRef, null);
-    }
-}
-// Utils
-// -------------------------------------------------------------------------------------------------
-function buildCellNavLinkAttrs(context, cellDate, rowUnit) {
-    return (rowUnit && rowUnit !== 'time')
-        ? 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 BaseComponent {
-    constructor() {
-        super(...arguments);
-        // refs
-        this.innerWidthRefMap = new RefMap(() => {
-            afterSize(this.handleInnerWidths);
-        });
-        this.innerHeightRefMap = new RefMap(() => {
-            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?
-            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?
-            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 (createElement("div", { className: 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 (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;
+            setRef(this.props.heightRef, this.totalHeight);
+        }
     }
     componentWillUnmount() {
-        setRef(this.props.innerWidthRef, null);
-        setRef(this.props.innerHeighRef, null);
+        setRef(this.props.heightRef, null);
     }
 }
 
-class TimelineNowIndicatorLine extends BaseComponent {
+class TimelineBg extends BaseComponent {
     render() {
-        const { props, context } = this;
-        return (createElement("div", { className: "fc-timeline-now-indicator-container" },
-            createElement(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 (createElement(Fragment, null,
+            this.renderSegs(props.businessHourSegs || [], 'non-business'),
+            this.renderSegs(props.bgEventSegs || [], 'bg-event'),
+            this.renderSegs(highlightSeg, 'highlight')));
     }
-}
-
-class TimelineNowIndicatorArrow extends BaseComponent {
-    render() {
-        const { props, context } = this;
-        return (createElement("div", { className: "fc-timeline-now-indicator-container" },
-            createElement(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 (createElement(Fragment, null, segs.map((seg) => {
+            let hStyle; // TODO
+            if (slotWidth != null) {
+                let segHorizontal = computeSegHorizontals(seg, undefined, dateEnv, tDateProfile, slotWidth);
+                hStyle = horizontalsToCss(segHorizontal, isRtl);
+            }
+            return (createElement("div", { key: buildEventRangeKey(seg.eventRange), className: "fc-fill-y", style: hStyle }, fillType === 'bg-event' ?
+                createElement(BgEvent, Object.assign({ eventRange: seg.eventRange, isStart: seg.isStart, isEnd: seg.isEnd }, getEventRangeMeta(seg.eventRange, todayRange, nowDate))) : (renderFill(fillType))));
+        })));
     }
 }
 
@@ -1058,6 +1063,7 @@ class TimelineView extends DateComponent {
             afterSize(this.handleSlotInnerWidths);
         });
         this.scrollTime = null;
+        this.slicer = new TimelineLaneSlicer();
         // Sizing
         // -----------------------------------------------------------------------------------------------
         this.handleBodySlotInnerWidth = (innerWidth) => {
@@ -1065,39 +1071,34 @@ class TimelineView extends DateComponent {
             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) => {
@@ -1113,6 +1114,10 @@ class TimelineView extends DateComponent {
     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;
@@ -1123,8 +1128,11 @@ class TimelineView extends DateComponent {
         const stickyFooterScrollbar = !props.forPrint && 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 (createElement(NowTimer, { unit: timerUnit }, (nowDate, todayRange) => {
             const enableNowIndicator = // TODO: DRY
              options.nowIndicator &&
@@ -1144,18 +1152,30 @@ class TimelineView extends DateComponent {
                             return (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 && (createElement(TimelineNowIndicatorArrow, { tDateProfile: tDateProfile, nowDate: nowDate, slotWidth: slotWidth }))),
-                    Boolean(state.endScrollbarWidth) && (createElement("div", { className: 'fc-border-s fc-filler', style: { minWidth: state.endScrollbarWidth } }))),
-                createElement(Scroller, { vertical: verticalScrolling, horizontal: true, hideScrollbars: props.forPrint, className: joinClassNames('fc-timeline-body fc-flex-col', verticalScrolling && 'fc-liquid'), ref: this.bodyScrollerRef, clientWidthRef: this.handleClientWidth, endScrollbarWidthRef: this.handleEndScrollbarWidth },
-                    createElement("div", { className: "fc-rel fc-grow", style: { width: canvasWidth }, ref: this.handeBodyEl },
+                    Boolean(endScrollbarWidth) && (createElement("div", { className: 'fc-border-s fc-filler', style: { minWidth: endScrollbarWidth } }))),
+                createElement(Scroller, { vertical: verticalScrolling, horizontal: true, hideScrollbars: stickyFooterScrollbar ||
+                        props.forPrint // prevents blank space in print-view on Safari
+                    , className: joinClassNames('fc-timeline-body fc-flex-col', verticalScrolling && 'fc-liquid'), ref: this.bodyScrollerRef, clientWidthRef: this.handleClientWidth },
+                    createElement("div", { "aria-label": options.eventsHint, className: "fc-rel fc-grow", style: { width: canvasWidth }, ref: this.handeBodyEl },
                         createElement(TimelineSlats, { dateProfile: props.dateProfile, tDateProfile: tDateProfile, nowDate: nowDate, todayRange: todayRange, 
                             // ref
                             innerWidthRef: this.handleBodySlotInnerWidth, 
                             // dimensions
                             slotWidth: slotWidth }),
-                        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 }),
+                        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 }),
+                        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 }),
+                        createElement("div", { className: 'fc-timeline-lane-footer' }),
                         enableNowIndicator && (createElement(TimelineNowIndicatorLine, { tDateProfile: tDateProfile, nowDate: nowDate, slotWidth: slotWidth })))),
-                stickyFooterScrollbar && (createElement(Scroller, { ref: this.footerScrollerRef, horizontal: true },
-                    createElement("div", { style: { width: canvasWidth } })))));
+                Boolean(stickyFooterScrollbar) && (createElement(FooterScrollbar, { isSticky: true, canvasWidth: canvasWidth, scrollerRef: this.footerScrollerRef })),
+                createElement(Ruler, { widthRef: this.handleTotalWidth })));
         }));
     }
     // Lifecycle
@@ -1164,8 +1184,8 @@ class TimelineView extends DateComponent {
         this.syncedScroller = new 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();
@@ -1174,13 +1194,13 @@ class TimelineView extends DateComponent {
         }
         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
     // -----------------------------------------------------------------------------------------------
@@ -1192,7 +1212,17 @@ class TimelineView extends DateComponent {
         ]);
     }
     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;
@@ -1230,8 +1260,7 @@ class TimelineView extends DateComponent {
                     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,
             };
         }
@@ -1239,7 +1268,7 @@ class TimelineView extends DateComponent {
     }
 }
 
-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}";
 injectStyles(css_248z);
 
-export { TimelineHeaderRow, TimelineLane, TimelineLaneBg, TimelineLaneSlicer, TimelineNowIndicatorArrow, TimelineNowIndicatorLine, TimelineSlats, TimelineView, buildTimelineDateProfile, computeSlotWidth, createHorizontalStyle, createVerticalStyle, timeToCoord };
+export { TimelineBg, TimelineFg, TimelineHeaderRow, TimelineLaneSlicer, TimelineNowIndicatorArrow, TimelineNowIndicatorLine, TimelineSlats, TimelineView, buildTimelineDateProfile, computeSlotWidth, createHorizontalStyle, createVerticalStyle, getTimelineSlotEl, timeToCoord };