@fullcalendar/timeline 7.0.0-beta.1 → 7.0.0-beta.3

package/index.cjs

@@ -15,7 +15,7 @@ var premiumCommonPlugin__default = /*#__PURE__*/_interopDefaultLegacy(premiumCom
 
 var index = index_cjs.createPlugin({
     name: '@fullcalendar/timeline',
-    premiumReleaseDate: '2024-10-09',
+    premiumReleaseDate: '2024-12-19',
     deps: [premiumCommonPlugin__default["default"]],
     initialView: 'timelineDay',
     views: {

package/index.global.js

@@ -1,5 +1,5 @@
 /*!
-FullCalendar Timeline Plugin v7.0.0-beta.1
+FullCalendar Timeline Plugin v7.0.0-beta.3
 Docs & License: https://fullcalendar.io/docs/timeline-view-no-resources
 (c) 2024 Adam Shaw
 */
@@ -456,42 +456,35 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
         }
         render() {
             let { props, context } = this;
-            let { dateEnv, options, theme } = context;
+            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 });
-            return (preact.createElement(internal$1.ContentContainer, { elTag: "div", elClasses: [
-                    'fc-flex-column',
-                    'fc-align-start',
-                    'fc-cell',
-                    'fc-timeline-slot',
-                    'fc-timeline-slot-lane',
-                    isEm ? 'fc-timeline-slot-em' : '',
-                    tDateProfile.isTimeScale ? (internal$1.isInt(dateEnv.countDurationsBetween(// best to do this here?
-                    tDateProfile.normalizedRange.start, props.date, tDateProfile.labelInterval)) ?
-                        'fc-timeline-slot-major' :
-                        'fc-timeline-slot-minor') : '',
-                    ...(props.isDay ?
-                        internal$1.getDayClassNames(dateMeta, theme) :
-                        internal$1.getSlotClassNames(dateMeta, theme)),
-                ], elAttrs: {
+            return (preact.createElement(internal$1.ContentContainer, { tag: "div", 
+                // fc-align-start shrinks width of InnerContent
+                // TODO: document this semantic className fc-timeline-slot-em
+                className: internal$1.joinClassNames('fc-timeline-slot', isEm && 'fc-timeline-slot-em', tDateProfile.isTimeScale && (internal$1.isInt(dateEnv.countDurationsBetween(// best to do this here?
+                tDateProfile.normalizedRange.start, props.date, tDateProfile.labelInterval)) ?
+                    'fc-timeline-slot-major' :
+                    'fc-timeline-slot-minor'), '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, {
                         omitTimeZoneOffset: true,
                         omitTime: !tDateProfile.isTimeScale,
                     }),
-                }, elStyle: {
+                }, style: {
                     width: props.width,
-                }, renderProps: renderProps, generatorName: "slotLaneContent", customGenerator: options.slotLaneContent, classNameGenerator: options.slotLaneClassNames, didMount: options.slotLaneDidMount, willUnmount: options.slotLaneWillUnmount }, (InnerContent) => (preact.createElement("div", { ref: this.innerElRef, className: 'fc-flex-column' },
-                preact.createElement(InnerContent, { elTag: "div", elClasses: ['fc-cell-inner'] })))));
+                }, 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 }))));
         }
         componentDidMount() {
             const innerEl = this.innerElRef.current;
-            this.detachWidth = internal$1.watchWidth(innerEl, (width) => {
+            this.disconnectInnerWidth = internal$1.watchWidth(innerEl, (width) => {
                 internal$1.setRef(this.props.innerWidthRef, width);
             });
         }
         componentWillUnmount() {
-            this.detachWidth();
+            this.disconnectInnerWidth();
             internal$1.setRef(this.props.innerWidthRef, null);
         }
     }
@@ -517,9 +510,9 @@ 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" }, slotDates.map((slotDate, i) => {
+            return (preact.createElement("div", { className: "fc-timeline-slots fc-fill fc-flex-row", 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, 
+                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
                     innerWidthRef: innerWidthRefMap.createRef(key), 
                     // dimensions
@@ -553,30 +546,6 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
         return snapCoverage;
     }
     /*
-    TODO: audit!!!
-    */
-    function coordToCss(hcoord, isRtl) {
-        if (hcoord === null) {
-            return { left: '', right: '' };
-        }
-        if (isRtl) {
-            return { right: hcoord, left: '' };
-        }
-        return { left: hcoord, right: '' };
-    }
-    /*
-    TODO: audit!!!
-    */
-    function coordsToCss(hcoords, isRtl) {
-        if (!hcoords) {
-            return { left: '', right: '' };
-        }
-        if (isRtl) {
-            return { right: hcoords.start, left: -hcoords.end };
-        }
-        return { left: hcoords.start, right: -hcoords.end };
-    }
-    /*
     TODO: DRY up with elsewhere?
     */
     function horizontalsToCss(hcoord, isRtl) {
@@ -607,7 +576,8 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
             };
         }
     }
-    function createHorizontalStyle(props, isRtl) {
+    function createHorizontalStyle(// TODO: DRY up?
+    props, isRtl) {
         if (props) {
             return {
                 [isRtl ? 'right' : 'left']: props.start,
@@ -680,13 +650,13 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
     function computeManySegHorizontals(segs, segMinWidth, dateEnv, tDateProfile, slotWidth) {
         const res = {};
         for (const seg of segs) {
-            res[seg.eventRange.instance.instanceId] = computeSegHorizontals(seg, segMinWidth, dateEnv, tDateProfile, slotWidth);
+            res[internal$1.getEventKey(seg)] = computeSegHorizontals(seg, segMinWidth, dateEnv, tDateProfile, slotWidth);
         }
         return res;
     }
     function computeSegHorizontals(seg, segMinWidth, dateEnv, tDateProfile, slotWidth) {
-        const startCoord = dateToCoord(seg.start, dateEnv, tDateProfile, slotWidth);
-        const endCoord = dateToCoord(seg.end, dateEnv, tDateProfile, slotWidth);
+        const startCoord = dateToCoord(seg.startDate, dateEnv, tDateProfile, slotWidth);
+        const endCoord = dateToCoord(seg.endDate, dateEnv, tDateProfile, slotWidth);
         let size = endCoord - startCoord;
         if (segMinWidth) {
             size = Math.max(size, segMinWidth);
@@ -694,95 +664,58 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
         return { start: startCoord, size };
     }
     function computeFgSegPlacements(// mostly horizontals
-    segs, segHorizontals, segHeights, // keyed by instanceId
-    strictOrder, maxStackCnt) {
-        let segEntries = [];
-        for (let i = 0; i < segs.length; i += 1) {
-            let seg = segs[i];
-            let instanceId = seg.eventRange.instance.instanceId;
-            let height = segHeights.get(instanceId);
-            let hcoords = segHorizontals[instanceId];
-            if (height != null && hcoords != null) {
-                segEntries.push({
-                    index: i,
-                    seg,
-                    span: {
-                        start: hcoords.start,
-                        end: hcoords.start + hcoords.size,
-                    },
-                    thickness: height,
-                });
+    segs, segHorizontals, // TODO: use Map
+    segHeights, // keyed by instanceId
+    hiddenGroupHeights, strictOrder, maxDepth) {
+        const segRanges = [];
+        // isn't it true that there will either be ALL hcoords or NONE? can optimize
+        for (const seg of segs) {
+            const hcoords = segHorizontals[internal$1.getEventKey(seg)];
+            if (hcoords) {
+                segRanges.push(Object.assign(Object.assign({}, seg), { start: hcoords.start, end: hcoords.start + hcoords.size }));
             }
         }
-        let hierarchy = new internal$1.SegHierarchy();
-        if (strictOrder != null) {
-            hierarchy.strictOrder = strictOrder;
-        }
-        if (maxStackCnt != null) {
-            hierarchy.maxStackCnt = maxStackCnt;
-        }
-        let hiddenEntries = hierarchy.addSegs(segEntries);
-        let hiddenGroups = internal$1.groupIntersectingEntries(hiddenEntries);
-        let hiddenGroupEntries = hiddenGroups.map((hiddenGroup, index) => ({
-            index: segs.length + index,
-            segGroup: hiddenGroup,
-            span: hiddenGroup.span,
-            thickness: 1, // HACK to ensure it's placed
-        }));
-        // add more-links into the hierarchy, but don't limit
-        hierarchy.maxStackCnt = -1;
-        hierarchy.addSegs(hiddenGroupEntries);
-        let visibleRects = hierarchy.toRects();
-        let segTops = {};
-        let hiddenGroupTops = {};
-        for (let rect of visibleRects) {
-            const { seg, segGroup } = rect;
-            if (seg) { // regular seg
-                segTops[seg.eventRange.instance.instanceId] = rect.levelCoord;
-            }
-            else { // hiddenGroup
-                hiddenGroupTops[segGroup.key] = rect.levelCoord;
+        const hierarchy = new internal$1.SegHierarchy(segRanges, (seg) => segHeights.get(internal$1.getEventKey(seg)), strictOrder, undefined, // maxCoord
+        maxDepth);
+        const segTops = new Map();
+        hierarchy.traverseSegs((seg, segTop) => {
+            segTops.set(internal$1.getEventKey(seg), segTop);
+        });
+        const { hiddenSegs } = hierarchy;
+        let totalHeight = 0;
+        for (const segRange of segRanges) {
+            const segKey = internal$1.getEventKey(segRange);
+            const segHeight = segHeights.get(segKey);
+            const segTop = segTops.get(segKey);
+            if (segHeight != null) {
+                if (segTop != null) {
+                    totalHeight = Math.max(totalHeight, segTop + segHeight);
+                }
             }
         }
+        const hiddenGroups = internal$1.groupIntersectingSegs(hiddenSegs);
+        const hiddenGroupTops = new Map();
+        // HACK for hiddenGroup findInsertion() call
+        hierarchy.strictOrder = true;
+        for (const hiddenGroup of hiddenGroups) {
+            const { levelCoord: top } = hierarchy.findInsertion(hiddenGroup, 0);
+            const hiddenGroupHeight = hiddenGroupHeights.get(hiddenGroup.key) || 0;
+            hiddenGroupTops.set(hiddenGroup.key, top);
+            totalHeight = Math.max(totalHeight, top + hiddenGroupHeight);
+        }
         return [
             segTops,
-            computeMaxBottom(segs, segTops, segHeights),
             hiddenGroups,
             hiddenGroupTops,
+            totalHeight,
         ];
     }
-    function computeMaxBottom(segs, segTops, segHeights) {
-        let max = 0;
-        for (const seg of segs) {
-            const { instanceId } = seg.eventRange.instance;
-            const top = segTops[instanceId];
-            const height = segHeights.get(instanceId);
-            if (top != null && height != null) {
-                max = Math.max(max, top + height);
-            }
-        }
-        return max;
-    }
-    /*
-    TODO: converge with computeMaxBottom, but keys are different
-    */
-    function computeMoreLinkMaxBottom(hiddenGroups, hiddenGroupTops, hiddenGroupHeights) {
-        let max = 0;
-        for (const hiddenGroup of hiddenGroups) {
-            const top = hiddenGroupTops[hiddenGroup.key];
-            const height = hiddenGroupHeights.get(hiddenGroup.key);
-            if (top != null && height != null) {
-                max = Math.max(max, top + height);
-            }
-        }
-        return max;
-    }
 
     class TimelineLaneBg extends internal$1.BaseComponent {
         render() {
             let { props } = this;
             let highlightSeg = [].concat(props.eventResizeSegs, props.dateSelectionSegs);
-            return (preact.createElement("div", { className: "fc-timeline-bg" },
+            return (preact.createElement(preact.Fragment, null,
                 this.renderSegs(props.businessHourSegs || [], 'non-business'),
                 this.renderSegs(props.bgEventSegs || [], 'bg-event'),
                 this.renderSegs(highlightSeg, 'highlight')));
@@ -796,7 +729,7 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
                     let segHorizontal = computeSegHorizontals(seg, undefined, dateEnv, tDateProfile, slotWidth);
                     hStyle = horizontalsToCss(segHorizontal, isRtl);
                 }
-                return (preact.createElement("div", { key: internal$1.buildEventRangeKey(seg.eventRange), className: "fc-timeline-bg-harness", style: hStyle }, fillType === 'bg-event' ?
+                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))));
             })));
         }
@@ -813,8 +746,8 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
                 let slicedRange = internal$1.intersectRanges(normalRange, tDateProfile.normalizedRange);
                 if (slicedRange) {
                     segs.push({
-                        start: slicedRange.start,
-                        end: slicedRange.end,
+                        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()
@@ -836,13 +769,8 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
         render() {
             let { props, context } = this;
             let { options } = context;
-            return (preact.createElement(internal$1.StandardEvent, Object.assign({}, props, { elClasses: [
-                    'fc-timeline-event',
-                    'fc-h-event',
-                    options.eventOverlap === false // TODO: fix bad default
-                        ? 'fc-timeline-event-spacious'
-                        : ''
-                ], defaultTimeFormat: DEFAULT_TIME_FORMAT, defaultDisplayEventTime: !props.isTimeScale })));
+            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 })));
         }
     }
 
@@ -850,13 +778,13 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
         render() {
             let { props } = this;
             let { hiddenSegs, resourceId, forcedInvisibleMap } = props;
-            let extraDateSpan = resourceId ? { resourceId } : {};
-            return (preact.createElement(internal$1.MoreLinkContainer, { elClasses: ['fc-timeline-more-link'], allDayDate: null, segs: hiddenSegs, hiddenSegs: hiddenSegs, dateProfile: props.dateProfile, todayRange: props.todayRange, extraDateSpan: extraDateSpan, popoverContent: () => (preact.createElement(preact.Fragment, null, hiddenSegs.map((seg) => {
+            let 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, { elTag: "div", elClasses: ['fc-timeline-more-link-inner', 'fc-sticky-x'] }))));
+                }))) }, (InnerContent) => (preact.createElement(InnerContent, { tag: "div", className: 'fc-timeline-more-link-inner fc-sticky-s' }))));
         }
     }
 
@@ -875,12 +803,12 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
         }
         componentDidMount() {
             const rootEl = this.rootElRef.current; // TODO: make dynamic with useEffect
-            this.detachHeight = internal$1.watchHeight(rootEl, (height) => {
+            this.disconnectHeight = internal$1.watchHeight(rootEl, (height) => {
                 internal$1.setRef(this.props.heightRef, height);
             });
         }
         componentWillUnmount() {
-            this.detachHeight();
+            this.disconnectHeight();
             internal$1.setRef(this.props.heightRef, null);
         }
     }
@@ -913,7 +841,7 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
         TODO: lots of memoization needed here!
         */
         render() {
-            let { props, context, segHeightRefMap } = this;
+            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...
@@ -925,10 +853,7 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
             let fgSegHorizontals = props.slotWidth != null
                 ? computeManySegHorizontals(fgSegs, options.eventMinWidth, context.dateEnv, tDateProfile, props.slotWidth)
                 : {};
-            let [fgSegTops, fgSegsBottom, hiddenGroups, hiddenGroupTops] = computeFgSegPlacements(// verticals
-            fgSegs, fgSegHorizontals, segHeightRefMap.current, options.eventOrderStrict, options.eventMaxStack);
-            let moreLinksBottom = computeMoreLinkMaxBottom(hiddenGroups, hiddenGroupTops, this.moreLinkHeightRefMap.current);
-            let innerHeight = Math.max(moreLinksBottom, fgSegsBottom);
+            let [fgSegTops, hiddenGroups, hiddenGroupTops, totalHeight] = computeFgSegPlacements(fgSegs, fgSegHorizontals, segHeightRefMap.current, moreLinkHeightRefMap.current, options.eventOrderStrict, options.eventMaxStack);
             let forcedInvisibleMap = // TODO: more convenient/DRY
              (slicedProps.eventDrag ? slicedProps.eventDrag.affectedInstances : null) ||
                 (slicedProps.eventResize ? slicedProps.eventResize.affectedInstances : null) ||
@@ -939,20 +864,18 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
                     bgEventSegs: slicedProps.bgEventSegs, businessHourSegs: slicedProps.businessHourSegs, dateSelectionSegs: slicedProps.dateSelectionSegs, eventResizeSegs: slicedProps.eventResize ? slicedProps.eventResize.segs : [] /* bad new empty array? */, 
                     // dimensions
                     slotWidth: props.slotWidth }),
-                preact.createElement("div", { className: [
-                        'fc-timeline-events',
-                        'fc-content-box',
-                        options.eventOverlap === false // TODO: fix bad default
-                            ? 'fc-timeline-events-overlap-disabled'
-                            : 'fc-timeline-events-overlap-enabled'
-                    ].join(' '), style: { height: innerHeight } },
+                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
-                    [], {}, Boolean(slicedProps.eventDrag), Boolean(slicedProps.eventResize), false))));
+                    [], // hiddenGroups
+                    new Map(), // hiddenGroupTops
+                    Boolean(slicedProps.eventDrag), Boolean(slicedProps.eventResize), false))));
         }
         renderFgSegs(segs, segHorizontals, segTops, forcedInvisibleMap, hiddenGroups, hiddenGroupTops, isDragging, isResizing, isDateSelecting) {
             let { props, context, segHeightRefMap, moreLinkHeightRefMap } = this;
@@ -961,18 +884,18 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
                 segs.map((seg) => {
                     const { eventRange } = seg;
                     const { instanceId } = eventRange.instance;
-                    const segTop = segTops[instanceId];
+                    const segTop = segTops.get(instanceId);
                     const segHorizontal = segHorizontals[instanceId];
                     const isVisible = isMirror ||
                         (segHorizontal && segTop != null && !forcedInvisibleMap[instanceId]);
                     return (preact.createElement(TimelineEventHarness, { key: instanceId, style: Object.assign({ visibility: isVisible ? '' : 'hidden', top: segTop || 0 }, horizontalsToCss(segHorizontal, context.isRtl)), heightRef: isMirror ? undefined : segHeightRefMap.createRef(instanceId) },
                         preact.createElement(TimelineEvent, Object.assign({ isTimeScale: props.tDateProfile.isTimeScale, eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: isDragging, isResizing: isResizing, isDateSelecting: isDateSelecting, isSelected: instanceId === props.eventSelection /* TODO: bad for mirror? */ }, internal$1.getEventRangeMeta(eventRange, props.todayRange, props.nowDate)))));
                 }),
-                hiddenGroups.map((hiddenGroup) => (preact.createElement(TimelineEventHarness, { key: hiddenGroup.key, style: Object.assign({ top: hiddenGroupTops[hiddenGroup.key] || 0 }, horizontalsToCss({
-                        start: hiddenGroup.span.start,
-                        size: hiddenGroup.span.end - hiddenGroup.span.start
+                hiddenGroups.map((hiddenGroup) => (preact.createElement(TimelineEventHarness, { key: hiddenGroup.key, style: Object.assign({ top: hiddenGroupTops.get(hiddenGroup.key) || 0 }, horizontalsToCss({
+                        start: hiddenGroup.start,
+                        size: hiddenGroup.end - hiddenGroup.start
                     }, context.isRtl)), heightRef: moreLinkHeightRefMap.createRef(hiddenGroup.key) },
-                    preact.createElement(TimelineLaneMoreLink, { hiddenSegs: hiddenGroup.segs /* TODO: make SegGroup generic! */, dateProfile: props.dateProfile, nowDate: props.nowDate, todayRange: props.todayRange, isTimeScale: props.tDateProfile.isTimeScale, eventSelection: props.eventSelection, resourceId: props.resourceId, forcedInvisibleMap: forcedInvisibleMap }))))));
+                    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 }))))));
         }
     }
 
@@ -1000,36 +923,21 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
                 dateEnv: context.dateEnv,
                 viewApi: context.viewApi,
             });
-            return (preact.createElement(internal$1.ContentContainer, { elTag: "div", elClasses: [
-                    'fc-timeline-slot-label',
-                    'fc-timeline-slot',
-                    cell.isWeekStart ? 'fc-timeline-slot-em' : '',
-                    'fc-header-cell',
-                    'fc-cell',
-                    'fc-flex-column',
-                    'fc-justify-center',
-                    props.isCentered ? 'fc-align-center' : 'fc-align-start',
-                    ...( // TODO: so slot classnames for week/month/bigger. see note above about rowUnit
-                    cell.rowUnit === 'time' ?
-                        internal$1.getSlotClassNames(dateMeta, context.theme) :
-                        internal$1.getDayClassNames(dateMeta, context.theme)),
-                ], elAttrs: {
+            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,
                     }),
-                }, elStyle: {
+                }, 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("div", { ref: this.innerElRef, className: [
-                    'fc-flex-column',
-                    props.isSticky ? 'fc-sticky-x' : '',
-                ].join(' ') },
-                preact.createElement(InnerContent, { elTag: "a", elClasses: [
-                        'fc-cell-inner',
-                        'fc-padding-md',
-                    ], elAttrs: this.buildCellNavLinkAttrs(context, cell.date, cell.rowUnit) })))));
+                }, 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;
@@ -1103,13 +1011,14 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
             const { props, innerWidthRefMap, innerHeightRefMap } = this;
             const isCentered = !(props.tDateProfile.isTimeScale && props.isLastRow);
             const isSticky = !props.isLastRow;
-            return (preact.createElement("div", { className: 'fc-row', style: { height: props.height } }, props.cells.map((cell) => {
+            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, 
+                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
@@ -1127,7 +1036,7 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
             const { props, context } = this;
             return (preact.createElement("div", { className: "fc-timeline-now-indicator-container" },
                 preact.createElement(internal$1.NowIndicatorContainer // TODO: make separate component?
-                , { elClasses: ['fc-timeline-now-indicator-line'], elStyle: props.slotWidth != null
+                , { 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 })));
         }
@@ -1137,7 +1046,7 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
         render() {
             const { props, context } = this;
             return (preact.createElement("div", { className: "fc-timeline-now-indicator-container" },
-                preact.createElement(internal$1.NowIndicatorContainer, { elClasses: ['fc-timeline-now-indicator-arrow'], elStyle: props.slotWidth != null
+                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 })));
         }
@@ -1170,19 +1079,14 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
                     this.setState({ slotInnerWidth });
                 }
             };
-            this.handleScrollerWidth = (scrollerWidth) => {
-                this.setState({
-                    scrollerWidth,
-                });
-            };
-            this.handleLeftScrollbarWidth = (leftScrollbarWidth) => {
+            this.handleClientWidth = (clientWidth) => {
                 this.setState({
-                    leftScrollbarWidth
+                    clientWidth,
                 });
             };
-            this.handleRightScrollbarWidth = (rightScrollbarWidth) => {
+            this.handleEndScrollbarWidth = (endScrollbarWidth) => {
                 this.setState({
-                    rightScrollbarWidth
+                    endScrollbarWidth
                 });
             };
             this.handleTimeScroll = (scrollTime) => {
@@ -1194,7 +1098,7 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
                 if (scrollTime != null && slotWidth != null) {
                     let x = timeToCoord(scrollTime, context.dateEnv, props.dateProfile, tDateProfile, slotWidth);
                     if (x) {
-                        x += context.isRtl ? -1 : 1; // overcome border. TODO: DRY this up
+                        x += 1; // overcome border. TODO: DRY this up
                     }
                     this.syncedScroller.scrollTo({ x });
                 }
@@ -1227,44 +1131,30 @@ 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.scrollerWidth);
+            state.clientWidth);
             this.slotWidth = slotWidth;
             return (preact.createElement(internal$1.NowTimer, { unit: timerUnit }, (nowDate, todayRange) => {
                 const enableNowIndicator = // TODO: DRY
                  options.nowIndicator &&
                     slotWidth != null &&
                     internal$1.rangeContainsMarker(props.dateProfile.currentRange, nowDate);
-                return (preact.createElement(internal$1.ViewContainer, { viewSpec: context.viewSpec, elClasses: [
-                        'fc-timeline-view',
-                        'fc-flex-column',
-                        'fc-border',
-                    ] },
-                    preact.createElement(internal$1.Scroller, { horizontal: true, hideScrollbars: true, elClassNames: [
-                            'fc-timeline-header',
-                            'fc-rowgroup',
-                            stickyHeaderDates ? 'fc-sticky-header' : '',
-                        ], ref: this.headerScrollerRef },
-                        preact.createElement("div", { className: 'fc-rel fc-content-box' // origin for now-indicator
-                            , style: {
-                                width: canvasWidth,
-                                paddingLeft: state.leftScrollbarWidth,
-                                paddingRight: state.rightScrollbarWidth,
-                            } },
-                            preact.createElement("div", null, cellRows.map((cells, rowLevel) => {
+                return (preact.createElement(internal$1.ViewContainer, { viewSpec: context.viewSpec, className: internal$1.joinClassNames('fc-timeline fc-border', 
+                    // HACK for Safari print-mode, where fc-scroller-no-bars won't take effect for
+                    // the below Scrollers if they have liquid flex height
+                    !props.forPrint && 'fc-flex-col') },
+                    preact.createElement(internal$1.Scroller, { horizontal: true, hideScrollbars: true, className: internal$1.joinClassNames('fc-timeline-header fc-flex-row fc-border-b', stickyHeaderDates && 'fc-table-header-sticky'), ref: this.headerScrollerRef },
+                        preact.createElement("div", { 
+                            // TODO: DRY
+                            className: internal$1.joinClassNames('fc-rel', // origin for now-indicator
+                            canvasWidth == null && 'fc-liquid'), style: { width: canvasWidth } },
+                            cellRows.map((cells, rowLevel) => {
                                 const isLast = rowLevel === cellRows.length - 1;
                                 return (preact.createElement(TimelineHeaderRow, { key: rowLevel, dateProfile: props.dateProfile, tDateProfile: tDateProfile, nowDate: nowDate, todayRange: todayRange, rowLevel: rowLevel, isLastRow: isLast, cells: cells, slotWidth: slotWidth, innerWidthRef: this.headerRowInnerWidthMap.createRef(rowLevel) }));
-                            })),
-                            enableNowIndicator && (
-                            // TODO: make this positioned WITHIN padding?
-                            preact.createElement(TimelineNowIndicatorArrow, { tDateProfile: tDateProfile, nowDate: nowDate, slotWidth: slotWidth })))),
-                    preact.createElement(internal$1.Scroller, { vertical: verticalScrolling, horizontal: true, elClassNames: [
-                            'fc-timeline-body',
-                            'fc-rowgroup',
-                            verticalScrolling ? 'fc-liquid' : '',
-                        ], ref: this.bodyScrollerRef, widthRef: this.handleScrollerWidth, leftScrollbarWidthRef: this.handleLeftScrollbarWidth, rightScrollbarWidthRef: this.handleRightScrollbarWidth },
-                        preact.createElement("div", { className: "fc-rel fc-grow", style: {
-                                width: canvasWidth,
-                            }, ref: this.handeBodyEl },
+                            }),
+                            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 },
                             preact.createElement(TimelineSlats, { dateProfile: props.dateProfile, tDateProfile: tDateProfile, nowDate: nowDate, todayRange: todayRange, 
                                 // ref
                                 innerWidthRef: this.handleBodySlotInnerWidth, 
@@ -1357,12 +1247,12 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
         }
     }
 
-    var css_248z = ".fc-timeline-slots{z-index:1}.fc-timeline-slot-minor{border-style:dotted}.fc-timeline-now-indicator-container{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:4}.fc-timeline-now-indicator-arrow,.fc-timeline-now-indicator-line{border-color:var(--fc-now-indicator-color);border-style:solid;pointer-events:none;position:absolute;top:0}.fc-timeline-now-indicator-arrow{border-left-color:transparent;border-right-color:transparent;border-width:6px 5px 0;margin:0 -5px}.fc-timeline-now-indicator-line{border-width:0 0 0 1px;bottom:0}.fc-timeline-events{z-index:3}.fc-timeline-events-overlap-enabled{padding-bottom:10px}.fc-timeline-event{border-radius:0;font-size:var(--fc-small-font-size);margin-bottom:1px;z-index:1}.fc-timeline-event.fc-event-mirror{z-index:2}.fc-direction-ltr .fc-timeline-event.fc-event-end{margin-right:1px}.fc-direction-rtl .fc-timeline-event.fc-event-end{margin-left:1px}.fc-timeline-event-spacious{margin-bottom:0;padding-bottom:5px;padding-top:5px}.fc-timeline-event .fc-event-inner{align-items:center;display:flex;flex-direction:row;padding:2px 1px}.fc-timeline-event:not(.fc-event-end) .fc-event-inner:after,.fc-timeline-event:not(.fc-event-start) .fc-event-inner:before{border-color:transparent #000;border-style:solid;border-width:5px;content:\"\";flex-grow:0;flex-shrink:0;height:0;margin:0 1px;opacity:.5;width:0}.fc-direction-ltr .fc-timeline-event:not(.fc-event-start) .fc-event-inner:before,.fc-direction-rtl .fc-timeline-event:not(.fc-event-end) .fc-event-inner:after{border-left:0}.fc-direction-ltr .fc-timeline-event:not(.fc-event-end) .fc-event-inner:after,.fc-direction-rtl .fc-timeline-event:not(.fc-event-start) .fc-event-inner:before{border-right:0}.fc-timeline-event .fc-event-time{font-weight:700}.fc-timeline-event .fc-event-time,.fc-timeline-event .fc-event-title{padding:0 2px}.fc-timeline-more-link{align-items:flex-start;background:var(--fc-more-link-bg-color);color:var(--fc-more-link-text-color);cursor:pointer;display:flex;flex-direction:column;font-size:var(--fc-small-font-size);padding:1px}.fc-direction-ltr .fc-timeline-more-link{margin-right:1px}.fc-direction-rtl .fc-timeline-more-link{margin-left:1px}.fc-timeline-more-link-inner{padding:2px}.fc-timeline-bg{bottom:0;left:0;position:absolute;right:0;top:0;z-index:2}.fc-timeline-bg .fc-non-business{z-index:1}.fc-timeline-bg .fc-bg-event{z-index:2}.fc-timeline-bg .fc-highlight{z-index:3}.fc-timeline-bg-harness{bottom:0;position:absolute;top:0}";
+    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}";
     internal$1.injectStyles(css_248z);
 
     var plugin = core.createPlugin({
         name: '@fullcalendar/timeline',
-        premiumReleaseDate: '2024-10-09',
+        premiumReleaseDate: '2024-12-19',
         deps: [premiumCommonPlugin__default["default"]],
         initialView: 'timelineDay',
         views: {
@@ -1401,8 +1291,6 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
         createHorizontalStyle: createHorizontalStyle,
         computeSlotWidth: computeSlotWidth,
         timeToCoord: timeToCoord,
-        coordToCss: coordToCss,
-        coordsToCss: coordsToCss,
         TimelineLaneSlicer: TimelineLaneSlicer,
         TimelineHeaderRow: TimelineHeaderRow,
         TimelineNowIndicatorArrow: TimelineNowIndicatorArrow,