@fullcalendar/daygrid 7.0.0-beta.4 → 7.0.0-rc.0

package/internal.cjs

@@ -32,6 +32,7 @@ Or ResourceApi object itself?
 function buildDateRowConfig(dates, datesRepDistinctDays, dateProfile, todayRange, dayHeaderFormat, // TODO: rename to dateHeaderFormat?
 context, colSpan) {
     return {
+        isDateRow: true,
         renderConfig: buildDateRenderConfig(context),
         dataConfigs: buildDateDataConfigs(dates, datesRepDistinctDays, dateProfile, todayRange, dayHeaderFormat, context, colSpan)
     };
@@ -50,31 +51,38 @@ function buildDateRenderConfig(context) {
         willUnmount: options.dayHeaderWillUnmount,
     };
 }
+const dowDates = [];
+for (let dow = 0; dow < 7; dow++) {
+    dowDates.push(internal_cjs.addDays(new Date(259200000), dow)); // start with Sun, 04 Jan 1970 00:00:00 GMT)
+}
 /*
 For header cells: data
 */
 function buildDateDataConfigs(dates, datesRepDistinctDays, dateProfile, todayRange, dayHeaderFormat, // TODO: rename to dateHeaderFormat?
-context, colSpan = 1, keyPrefix = '') {
+context, colSpan = 1, keyPrefix = '', extraRenderProps = {}, // TODO
+extraAttrs = {}, // TODO
+className = '') {
     const { dateEnv, viewApi, options } = context;
     return datesRepDistinctDays
         ? dates.map((date) => {
             const dateMeta = internal_cjs.getDateMeta(date, todayRange, null, dateProfile);
             const text = dateEnv.format(date, dayHeaderFormat);
-            const renderProps = Object.assign(Object.assign({}, dateMeta), { date: dateEnv.toDate(date), view: viewApi, text });
-            const isNavLink = options.navLinks && !dateMeta.isDisabled;
+            const renderProps = Object.assign(Object.assign(Object.assign({}, dateMeta), { date: dateEnv.toDate(date), view: viewApi, text }), extraRenderProps);
+            const isNavLink = options.navLinks && !dateMeta.isDisabled &&
+                dates.length > 1; // don't show navlink to day if only one day
             const fullDateStr = internal_cjs.buildDateStr(context, date);
             // for DayGridHeaderCell
             return {
                 key: keyPrefix + date.toUTCString(),
                 renderProps,
-                attrs: Object.assign(Object.assign({ 'aria-label': fullDateStr }, (dateMeta.isToday ? { 'aria-current': 'date' } : {})), { 'data-date': internal_cjs.formatDayString(date) }),
+                attrs: Object.assign(Object.assign(Object.assign({ 'aria-label': fullDateStr }, (dateMeta.isToday ? { 'aria-current': 'date' } : {})), { 'data-date': internal_cjs.formatDayString(date) }), extraAttrs),
                 // for navlink
                 innerAttrs: isNavLink
                     ? internal_cjs.buildNavLinkAttrs(context, date, undefined, fullDateStr)
                     : { 'aria-hidden': true },
                 colSpan,
                 isNavLink,
-                className: internal_cjs.getDayClassName(dateMeta),
+                className: internal_cjs.joinClassNames(className, internal_cjs.getDayClassName(dateMeta)),
             };
         })
         : dates.map((date) => {
@@ -89,21 +97,19 @@ context, colSpan = 1, keyPrefix = '') {
                 isOther: false,
             };
             const text = dateEnv.format(normDate, dayHeaderFormat);
-            const renderProps = Object.assign(Object.assign({}, dayMeta), { date, view: viewApi, text });
+            const renderProps = Object.assign(Object.assign(Object.assign({}, dayMeta), { date: dowDates[dow], view: viewApi, text }), extraRenderProps);
             const fullWeekDayStr = dateEnv.format(normDate, WEEKDAY_FORMAT);
             // for DayGridHeaderCell
             return {
                 key: keyPrefix + String(dow),
                 renderProps,
-                attrs: {
-                    'aria-label': fullWeekDayStr,
-                },
-                // for navlink
+                attrs: Object.assign({ 'aria-label': fullWeekDayStr }, extraAttrs),
+                // NOT a navlink
                 innerAttrs: {
                     'aria-hidden': true, // label already on cell
                 },
                 colSpan,
-                className: internal_cjs.getDayClassName(dayMeta),
+                className: internal_cjs.joinClassNames(className, internal_cjs.getDayClassName(dayMeta)),
             };
         });
 }
@@ -222,6 +228,8 @@ class DayGridMoreLink extends internal_cjs.BaseComponent {
 class DayGridCell extends internal_cjs.DateComponent {
     constructor() {
         super(...arguments);
+        // memo
+        this.getDateMeta = internal_cjs.memoize(internal_cjs.getDateMeta);
         // ref
         this.rootElRef = preact_cjs.createRef();
         this.handleBodyEl = (bodyEl) => {
@@ -255,8 +263,7 @@ class DayGridCell extends internal_cjs.DateComponent {
         // TODO: memoize this
         const isMonthStart = props.showDayNumber &&
             shouldDisplayMonthStart(props.date, props.dateProfile.currentRange, dateEnv);
-        // TODO: memoize this
-        const dateMeta = internal_cjs.getDateMeta(props.date, props.todayRange, null, props.dateProfile);
+        const dateMeta = this.getDateMeta(props.date, props.todayRange, null, props.dateProfile);
         const baseClassName = internal_cjs.joinClassNames('fc-daygrid-day', props.borderStart && 'fc-border-s', props.width != null ? '' : 'fc-liquid', 'fc-flex-col');
         if (dateMeta.isDisabled) {
             return (preact_cjs.createElement("div", { role: 'gridcell', "aria-disabled": true, className: internal_cjs.joinClassNames(baseClassName, 'fc-day-disabled'), style: {
@@ -505,10 +512,10 @@ function computeRowFromPosition(positionTop, cellRows, rowHeightMap) {
 // Hit Element
 // -------------------------------------------------------------------------------------------------
 function getRowEl(rootEl, row) {
-    return rootEl.querySelectorAll(':scope > [role=row]')[row];
+    return rootEl.querySelectorAll('[role=row]')[row];
 }
 function getCellEl(rowEl, col) {
-    return rowEl.querySelectorAll(':scope > [role=gridcell]')[col];
+    return rowEl.querySelectorAll('[role=gridcell]')[col];
 }
 // Header Formatting
 // -------------------------------------------------------------------------------------------------
@@ -606,13 +613,16 @@ class DayGridRow extends internal_cjs.BaseComponent {
         return (preact_cjs.createElement("div", { role: props.role /* !!! */, "aria-label": props.role === 'row' // HACK
                 ? fullWeekStr
                 : undefined // can't have label on non-role div
-            , className: internal_cjs.joinClassNames('fc-flex-row fc-rel', props.className), style: {
-                minHeight: props.minHeight,
+            , className: internal_cjs.joinClassNames('fc-daygrid-row', props.forPrint && 'fc-daygrid-row-print', 'fc-flex-row fc-rel', props.className), style: {
+                'flex-basis': props.basis,
             }, ref: this.handleRootEl },
+            props.showWeekNumbers && (preact_cjs.createElement(internal_cjs.WeekNumberContainer, { tag: 'div', attrs: Object.assign(Object.assign({}, (isNavLink
+                    ? internal_cjs.buildNavLinkAttrs(context, weekDate, 'week', fullWeekStr, /* isTabbable = */ false)
+                    : {})), { 'role': undefined, 'aria-hidden': true }), className: 'fc-daygrid-week-number', date: weekDate, defaultFormat: DEFAULT_WEEK_NUM_FORMAT })),
             this.renderFillSegs(props.businessHourSegs, 'non-business'),
             this.renderFillSegs(props.bgEventSegs, 'bg-event'),
             this.renderFillSegs(highlightSegs, 'highlight'),
-            preact_cjs.createElement("div", { className: 'fc-flex-row fc-liquid fc-rel' }, props.cells.map((cell, col) => {
+            props.cells.map((cell, col) => {
                 const normalFgNodes = this.renderFgSegs(maxMainTop, renderableSegsByCol[col], segTops, props.todayRange, forcedInvisibleMap);
                 return (preact_cjs.createElement(DayGridCell, { key: cell.key, dateProfile: props.dateProfile, todayRange: props.todayRange, date: cell.date, showDayNumber: props.showDayNumbers, isCompact: props.isCompact, isTall: props.isTall, borderStart: Boolean(col), 
                     // content
@@ -623,10 +633,7 @@ class DayGridRow extends internal_cjs.BaseComponent {
                     fgHeight: heightsByCol[col], width: props.colWidth, 
                     // refs
                     headerHeightRef: headerHeightRefMap.createRef(cell.key), mainHeightRef: mainHeightRefMap.createRef(cell.key) }));
-            })),
-            props.showWeekNumbers && (preact_cjs.createElement(internal_cjs.WeekNumberContainer, { tag: 'div', attrs: Object.assign(Object.assign({}, (isNavLink
-                    ? internal_cjs.buildNavLinkAttrs(context, weekDate, 'week', fullWeekStr, /* isTabbable = */ false)
-                    : {})), { 'role': undefined, 'aria-hidden': true }), className: 'fc-daygrid-week-number', date: weekDate, defaultFormat: DEFAULT_WEEK_NUM_FORMAT })),
+            }),
             this.renderFgSegs(maxMainTop, mirrorSegs, segTops, props.todayRange, {}, // forcedInvisibleMap
             Boolean(props.eventDrag), Boolean(props.eventResize), false)));
     }
@@ -786,30 +793,22 @@ class DayGridRows extends internal_cjs.DateComponent {
         let eventResizeByRow = this.splitEventResize(props.eventResize, rowCnt);
         let isHeightAuto = internal_cjs.getIsHeightAuto(options);
         let rowHeightsRedistribute = !props.forPrint && !isHeightAuto;
-        let [rowMinHeight, isCompact] = computeRowHeight(props.visibleWidth, rowCnt, isHeightAuto, props.forPrint, options);
+        let rowBasis = computeRowBasis(props.visibleWidth, rowCnt, isHeightAuto, options);
+        let isCompact = computeRowIsCompact(props.visibleWidth, options);
         return (preact_cjs.createElement("div", { role: 'rowgroup', className: internal_cjs.joinClassNames(
             // HACK for Safari. Can't do break-inside:avoid with flexbox items, likely b/c it's not standard:
             // https://stackoverflow.com/a/60256345
             !props.forPrint && 'fc-flex-col', props.className), style: { width: props.width }, ref: this.handleRootEl }, props.cellRows.map((cells, row) => (preact_cjs.createElement(DayGridRow, { key: cells[0].key, role: 'row', dateProfile: props.dateProfile, todayRange: props.todayRange, cells: cells, showDayNumbers: rowCnt > 1, showWeekNumbers: rowCnt > 1 && options.weekNumbers, forPrint: props.forPrint, isCompact: isCompact, 
             // if not auto-height, distribute height of container somewhat evently to rows
-            // (treat all as zero, distribute height, then ensure min-heights -- the inner content height)
-            className: internal_cjs.joinClassNames(rowHeightsRedistribute && 'fc-grow fc-basis0', rowCnt > 1 && 'fc-break-inside-avoid', // don't avoid breaks for single tall row
+            className: internal_cjs.joinClassNames(rowHeightsRedistribute && 'fc-grow', rowCnt > 1 && 'fc-break-inside-avoid', // don't avoid breaks for single tall row
             row < rowCnt - 1 && 'fc-border-b'), 
             // content
             fgEventSegs: fgEventSegsByRow[row], bgEventSegs: bgEventSegsByRow[row].filter(isSegAllDay) /* HACK */, businessHourSegs: businessHourSegsByRow[row], dateSelectionSegs: dateSelectionSegsByRow[row], eventSelection: props.eventSelection, eventDrag: eventDragByRow[row], eventResize: eventResizeByRow[row], dayMaxEvents: props.dayMaxEvents, dayMaxEventRows: props.dayMaxEventRows, 
             // dimensions
-            colWidth: props.colWidth, minHeight: rowMinHeight, 
+            colWidth: props.colWidth, basis: rowBasis, 
             // refs
             heightRef: rowHeightRefMap.createRef(cells[0].key) })))));
     }
-    componentDidMount() {
-        this.disconnectWidth = internal_cjs.watchWidth(this.rootEl, (width) => {
-            this.setState({ width });
-        });
-    }
-    componentWillUnmount() {
-        this.disconnectWidth();
-    }
     // Hit System
     // -----------------------------------------------------------------------------------------------
     queryHit(positionLeft, positionTop, elWidth) {
@@ -826,8 +825,7 @@ class DayGridRows extends internal_cjs.DateComponent {
                     start: cellStartDate,
                     end: cellEndDate,
                 }, allDay: true }, cell.dateSpanProps),
-            // HACK. TODO: This is expensive to do every hit-query
-            dayEl: getCellEl(getRowEl(this.rootEl, row), col),
+            getDayEl: () => getCellEl(getRowEl(this.rootEl, row), col),
             rect: {
                 left,
                 right,
@@ -843,27 +841,35 @@ class DayGridRows extends internal_cjs.DateComponent {
 function isSegAllDay(seg) {
     return seg.eventRange.def.allDay;
 }
-function computeRowHeight(visibleWidth, // should INCLUDE any scrollbar width to avoid oscillation
-rowCnt, isHeightAuto, forPrint, options) {
+/*
+Amount of height a row should consume prior to expanding
+We don't want to use min-height with flexbox because we leverage min-height:auto,
+which yields value based on natural height of events
+*/
+function computeRowBasis(visibleWidth, // should INCLUDE any scrollbar width to avoid oscillation
+rowCnt, isHeightAuto, options) {
     if (visibleWidth != null) {
         // ensure a consistent row min-height modelled after a month with 6 rows respecting aspectRatio
         // will result in same minHeight regardless of weekends, dayMinWidth, height:auto
-        const rowMinHeight = visibleWidth / options.aspectRatio / 6;
-        return [
-            forPrint
-                // special-case for print, which condenses whole-page width without notifying
-                // this is value that looks natural on paper for portrait/landscape
-                ? '6em'
-                // don't give minHeight when single-month non-auto-height
-                // TODO: better way to detect this with DateProfile?
-                : (rowCnt > 6 || isHeightAuto)
-                    ? rowMinHeight
-                    : undefined,
-            // isCompact?: just before most lone +more links hit bottom of cell
-            rowMinHeight < 70,
-        ];
+        const rowBasis = visibleWidth / options.aspectRatio / 6;
+        // don't give minHeight when single-month non-auto-height
+        // TODO: better way to detect this with DateProfile?
+        return (rowCnt > 6 || isHeightAuto) ? rowBasis : 0;
     }
-    return [undefined, false];
+    return 0;
+}
+/*
+Infers cell height based on overall width
+*/
+function computeRowIsCompact(visibleWidth, // should INCLUDE any scrollbar width to avoid oscillation
+options) {
+    if (visibleWidth != null) {
+        // ensure a consistent row min-height modelled after a month with 6 rows respecting aspectRatio
+        // will result in same minHeight regardless of weekends, dayMinWidth, height:auto
+        const rowBasis = visibleWidth / options.aspectRatio / 6;
+        return rowBasis < 70;
+    }
+    return false;
 }
 
 class DayGridHeaderCell extends internal_cjs.BaseComponent {
@@ -923,6 +929,9 @@ class DayGridHeaderRow extends internal_cjs.BaseComponent {
         const { props } = this;
         return (preact_cjs.createElement("div", { role: props.role /* !!! */, "aria-rowindex": props.rowIndex != null ? 1 + props.rowIndex : undefined, className: internal_cjs.joinClassNames('fc-flex-row fc-content-box', props.className), style: { height: props.height } }, props.dataConfigs.map((dataConfig, cellI) => (preact_cjs.createElement(DayGridHeaderCell, { key: dataConfig.key, renderConfig: props.renderConfig, dataConfig: dataConfig, isSticky: props.isSticky, borderStart: Boolean(cellI), colWidth: props.colWidth, innerHeightRef: props.innerHeightRef })))));
     }
+    componentWillUnmount() {
+        internal_cjs.setRef(this.props.innerHeightRef, null);
+    }
 }
 
 /*
@@ -943,37 +952,39 @@ class DayGridLayoutNormal extends internal_cjs.BaseComponent {
         this.handleScroller = (scroller) => {
             internal_cjs.setRef(this.props.scrollerRef, scroller);
         };
+        this.handleTotalWidth = (totalWidth) => {
+            this.setState({ totalWidth });
+        };
         this.handleClientWidth = (clientWidth) => {
             this.setState({ clientWidth });
         };
-        this.handleEndScrollbarWidth = (endScrollbarWidth) => {
-            this.setState({ endScrollbarWidth });
-        };
     }
     render() {
         const { props, state, context } = this;
         const { options } = context;
+        const { totalWidth, clientWidth } = state;
+        const endScrollbarWidth = (totalWidth != null && clientWidth != null)
+            ? totalWidth - clientWidth
+            : undefined;
         const verticalScrollbars = !props.forPrint && !internal_cjs.getIsHeightAuto(options);
         const stickyHeaderDates = !props.forPrint && internal_cjs.getStickyHeaderDates(options);
         return (preact_cjs.createElement(preact_cjs.Fragment, null,
             options.dayHeaders && (preact_cjs.createElement("div", { className: internal_cjs.joinClassNames(props.forPrint ? 'fc-print-header' : 'fc-flex-row', // col for print, row for screen
-                'fc-border-b') },
-                preact_cjs.createElement(DayGridHeader, { headerTiers: props.headerTiers, className: internal_cjs.joinClassNames('fc-daygrid-header', stickyHeaderDates && 'fc-table-header-sticky') }),
-                Boolean(state.endScrollbarWidth) && (preact_cjs.createElement("div", { className: 'fc-border-s fc-filler', style: { minWidth: state.endScrollbarWidth } })))),
-            preact_cjs.createElement(internal_cjs.Scroller, { vertical: verticalScrollbars, clientWidthRef: this.handleClientWidth, endScrollbarWidthRef: this.handleEndScrollbarWidth, className: internal_cjs.joinClassNames('fc-daygrid-body', 
+                stickyHeaderDates && 'fc-table-header-sticky', 'fc-border-b') },
+                preact_cjs.createElement(DayGridHeader, { headerTiers: props.headerTiers, className: 'fc-daygrid-header' }),
+                Boolean(endScrollbarWidth) && (preact_cjs.createElement("div", { className: 'fc-border-s fc-filler', style: { minWidth: endScrollbarWidth } })))),
+            preact_cjs.createElement(internal_cjs.Scroller, { vertical: verticalScrollbars, className: internal_cjs.joinClassNames('fc-daygrid-body', 
                 // HACK for Safari. Can't do break-inside:avoid with flexbox items, likely b/c it's not standard:
                 // https://stackoverflow.com/a/60256345
-                !props.forPrint && 'fc-flex-col', verticalScrollbars && 'fc-liquid'), ref: this.handleScroller },
+                !props.forPrint && 'fc-flex-col', verticalScrollbars && 'fc-liquid'), ref: this.handleScroller, clientWidthRef: this.handleClientWidth },
                 preact_cjs.createElement(DayGridRows, { dateProfile: props.dateProfile, todayRange: props.todayRange, cellRows: props.cellRows, forPrint: props.forPrint, isHitComboAllowed: props.isHitComboAllowed, className: 'fc-grow', dayMaxEvents: props.forPrint ? undefined : options.dayMaxEvents, dayMaxEventRows: options.dayMaxEventRows, 
                     // content
                     fgEventSegs: props.fgEventSegs, bgEventSegs: props.bgEventSegs, businessHourSegs: props.businessHourSegs, dateSelectionSegs: props.dateSelectionSegs, eventDrag: props.eventDrag, eventResize: props.eventResize, eventSelection: props.eventSelection, 
                     // dimensions
-                    visibleWidth: // TODO: DRY
-                    state.clientWidth != null && state.endScrollbarWidth != null
-                        ? state.clientWidth + state.endScrollbarWidth
-                        : undefined, 
+                    visibleWidth: totalWidth, 
                     // refs
-                    rowHeightRefMap: props.rowHeightRefMap }))));
+                    rowHeightRefMap: props.rowHeightRefMap })),
+            preact_cjs.createElement(internal_cjs.Ruler, { widthRef: this.handleTotalWidth })));
     }
 }
 
@@ -985,43 +996,45 @@ class DayGridLayoutPannable extends internal_cjs.BaseComponent {
         this.footerScrollerRef = preact_cjs.createRef();
         // Sizing
         // -----------------------------------------------------------------------------------------------
+        this.handleTotalWidth = (totalWidth) => {
+            this.setState({ totalWidth });
+        };
         this.handleClientWidth = (clientWidth) => {
             this.setState({ clientWidth });
         };
-        this.handleEndScrollbarWidth = (endScrollbarWidth) => {
-            this.setState({ endScrollbarWidth });
-        };
     }
     render() {
         const { props, state, context } = this;
         const { options } = context;
+        const { totalWidth, clientWidth } = state;
+        const endScrollbarWidth = (totalWidth != null && clientWidth != null)
+            ? totalWidth - clientWidth
+            : undefined;
         const verticalScrollbars = !props.forPrint && !internal_cjs.getIsHeightAuto(options);
         const stickyHeaderDates = !props.forPrint && internal_cjs.getStickyHeaderDates(options);
         const stickyFooterScrollbar = !props.forPrint && internal_cjs.getStickyFooterScrollbar(options);
         const colCnt = props.cellRows[0].length;
-        const [canvasWidth, colWidth] = computeColWidth(colCnt, props.dayMinWidth, state.clientWidth);
+        const [canvasWidth, colWidth] = computeColWidth(colCnt, props.dayMinWidth, clientWidth);
         return (preact_cjs.createElement(preact_cjs.Fragment, null,
-            options.dayHeaders && (preact_cjs.createElement("div", { className: 'fc-print-header' },
-                preact_cjs.createElement(internal_cjs.Scroller, { horizontal: true, hideScrollbars: true, className: internal_cjs.joinClassNames('fc-daygrid-header fc-flex-row fc-border-b', stickyHeaderDates && 'fc-table-header-sticky'), ref: this.headerScrollerRef },
+            options.dayHeaders && (preact_cjs.createElement("div", { className: internal_cjs.joinClassNames('fc-print-header', stickyHeaderDates && 'fc-table-header-sticky') },
+                preact_cjs.createElement(internal_cjs.Scroller, { horizontal: true, hideScrollbars: true, className: 'fc-daygrid-header fc-flex-row fc-border-b', ref: this.headerScrollerRef },
                     preact_cjs.createElement(DayGridHeader, { headerTiers: props.headerTiers, colWidth: colWidth, width: canvasWidth }),
-                    Boolean(state.endScrollbarWidth) && (preact_cjs.createElement("div", { className: 'fc-border-s fc-filler', style: { minWidth: state.endScrollbarWidth } }))))),
+                    Boolean(endScrollbarWidth) && (preact_cjs.createElement("div", { className: 'fc-border-s fc-filler', style: { minWidth: endScrollbarWidth } }))))),
             preact_cjs.createElement(internal_cjs.Scroller, { vertical: verticalScrollbars, horizontal: true, hideScrollbars: stickyFooterScrollbar ||
                     props.forPrint // prevents blank space in print-view on Safari
                 , className: internal_cjs.joinClassNames('fc-daygrid-body', 
                 // HACK for Safari. Can't do break-inside:avoid with flexbox items, likely b/c it's not standard:
                 // https://stackoverflow.com/a/60256345
-                !props.forPrint && 'fc-flex-col', verticalScrollbars && 'fc-liquid'), ref: this.bodyScrollerRef, clientWidthRef: this.handleClientWidth, endScrollbarWidthRef: this.handleEndScrollbarWidth },
+                !props.forPrint && 'fc-flex-col', verticalScrollbars && 'fc-liquid'), ref: this.bodyScrollerRef, clientWidthRef: this.handleClientWidth },
                 preact_cjs.createElement(DayGridRows, { dateProfile: props.dateProfile, todayRange: props.todayRange, cellRows: props.cellRows, forPrint: props.forPrint, isHitComboAllowed: props.isHitComboAllowed, className: 'fc-grow', dayMaxEvents: props.forPrint ? undefined : options.dayMaxEvents, dayMaxEventRows: options.dayMaxEventRows, 
                     // content
                     fgEventSegs: props.fgEventSegs, bgEventSegs: props.bgEventSegs, businessHourSegs: props.businessHourSegs, dateSelectionSegs: props.dateSelectionSegs, eventDrag: props.eventDrag, eventResize: props.eventResize, eventSelection: props.eventSelection, 
                     // dimensions
-                    colWidth: colWidth, width: canvasWidth, visibleWidth: // TODO: DRY
-                    state.clientWidth != null && state.endScrollbarWidth != null
-                        ? state.clientWidth + state.endScrollbarWidth
-                        : undefined, 
+                    colWidth: colWidth, width: canvasWidth, visibleWidth: totalWidth, 
                     // refs
                     rowHeightRefMap: props.rowHeightRefMap })),
-            Boolean(stickyFooterScrollbar) && (preact_cjs.createElement(internal_cjs.StickyFooterScrollbar, { canvasWidth: canvasWidth, scrollerRef: this.footerScrollerRef }))));
+            Boolean(stickyFooterScrollbar) && (preact_cjs.createElement(internal_cjs.FooterScrollbar, { isSticky: true, canvasWidth: canvasWidth, scrollerRef: this.footerScrollerRef })),
+            preact_cjs.createElement(internal_cjs.Ruler, { widthRef: this.handleTotalWidth })));
     }
     // Lifecycle
     // -----------------------------------------------------------------------------------------------
@@ -1076,7 +1089,7 @@ class DayGridLayout extends internal_cjs.BaseComponent {
                 }
             }
         };
-        this.handleScrollEnd = ({ isUser }) => {
+        this.handleScrollEnd = (isUser) => {
             if (isUser) {
                 this.scrollDate = null;
             }
@@ -1184,7 +1197,7 @@ function buildDayTableRenderRange(props) {
     return { start, end };
 }
 
-var css_248z = ":root{--fc-daygrid-event-dot-width:8px}.fc-daygrid-day.fc-day-today{background-color:var(--fc-today-bg-color)}.fc-daygrid-day-header{display:flex;flex-direction:row-reverse}.fc-day-other .fc-daygrid-day-header{opacity:.3}.fc-daygrid-day-number{padding:4px;position:relative}.fc-daygrid-month-start{font-size:1.1em;font-weight:700}.fc-daygrid-day-body{display:flex;flex-direction:column;margin-bottom:1px}.fc-daygrid-day-body-tall{margin-bottom:1em;min-height:2em}.fc-daygrid-day-body:only-child{margin-top:2px}.fc-daygrid-more-link{border-radius:3px;cursor:pointer;font-size:var(--fc-small-font-size);margin:0 2px 1px;max-width:100%;overflow:hidden;padding:2px;position:relative;white-space:nowrap}.fc-daygrid-more-link:hover{background-color:rgba(0,0,0,.1)}.fc-daygrid-more-link-button{align-self:flex-start}.fc-daygrid-more-link-block{border:1px solid var(--fc-event-border-color);padding:1px}.fc-daygrid-week-number{background-color:var(--fc-neutral-bg-color);color:var(--fc-neutral-text-color);min-width:1.5em;padding:2px;position:absolute;text-align:center;top:0}.fc-more-popover .fc-popover-body{min-width:220px;padding:10px}.fc-daygrid-event{border-radius:3px;font-size:var(--fc-small-font-size);margin-bottom:1px}.fc-media-print .fc-daygrid-event{overflow:hidden!important;white-space:nowrap!important}.fc-direction-ltr .fc-daygrid-event.fc-event-start,.fc-direction-rtl .fc-daygrid-event.fc-event-end{margin-left:2px}.fc-direction-ltr .fc-daygrid-event.fc-event-end,.fc-direction-rtl .fc-daygrid-event.fc-event-start{margin-right:2px}.fc-direction-ltr .fc-daygrid-event .fc-event-time{margin-right:3px}.fc-direction-rtl .fc-daygrid-event .fc-event-time{margin-left:3px}.fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-start),.fc-direction-rtl .fc-daygrid-block-event:not(.fc-event-end){border-bottom-left-radius:0;border-left-width:0;border-top-left-radius:0}.fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-end),.fc-direction-rtl .fc-daygrid-block-event:not(.fc-event-start){border-bottom-right-radius:0;border-right-width:0;border-top-right-radius:0}.fc-daygrid-block-event .fc-event-time{font-weight:700}.fc-daygrid-block-event .fc-event-time,.fc-daygrid-block-event .fc-event-title{padding:1px}.fc-daygrid-dot-event{align-items:center;direction:row;display:flex;padding:2px 0;position:relative;z-index:2}.fc-daygrid-dot-event.fc-event-mirror,.fc-daygrid-dot-event:hover{background:rgba(0,0,0,.1)}.fc-daygrid-dot-event.fc-event-selected:before{bottom:-10px;top:-10px}.fc-daygrid-event-dot{border:calc(var(--fc-daygrid-event-dot-width)/2) solid var(--fc-event-border-color);border-radius:calc(var(--fc-daygrid-event-dot-width)/2);box-sizing:content-box;height:0;margin:0 4px;width:0}.fc-daygrid-dot-event .fc-event-time,.fc-daygrid-dot-event .fc-event-title{overflow:hidden;white-space:nowrap}.fc-daygrid-dot-event .fc-event-title{flex-basis:0;flex-grow:1;font-weight:700;min-height:0;min-width:0}";
+var css_248z = ":root{--fc-daygrid-event-dot-width:8px}.fc-daygrid-row-print{min-height:6em}.fc-daygrid-day.fc-day-today{background-color:var(--fc-today-bg-color)}.fc-daygrid-day-header{display:flex;flex-direction:row-reverse}.fc-day-other .fc-daygrid-day-header{opacity:.3}.fc-daygrid-day-number{padding:4px;position:relative}.fc-daygrid-month-start{font-size:1.1em;font-weight:700}.fc-daygrid-day-body{display:flex;flex-direction:column;margin-bottom:1px}.fc-daygrid-day-body-tall{margin-bottom:1em;min-height:2em}.fc-daygrid-day-body:only-child{margin-top:2px}.fc-daygrid-more-link{border-radius:3px;cursor:pointer;font-size:var(--fc-small-font-size);margin:0 2px 1px;max-width:100%;overflow:hidden;padding:2px;position:relative;white-space:nowrap}.fc-daygrid-more-link:hover{background-color:rgba(0,0,0,.1)}.fc-daygrid-more-link-button{align-self:flex-start}.fc-daygrid-more-link-block{border:1px solid var(--fc-event-border-color);padding:1px}.fc-daygrid-week-number{background-color:var(--fc-neutral-bg-color);color:var(--fc-neutral-text-color);min-width:1.5em;padding:2px;position:absolute;text-align:center;top:0;z-index:1}.fc-direction-ltr .fc-daygrid-week-number{border-radius:0 0 3px}.fc-direction-rtl .fc-daygrid-week-number{border-radius:0 0 0 3px}.fc-more-popover .fc-popover-body{min-width:220px;padding:10px}.fc-daygrid-event{border-radius:3px;font-size:var(--fc-small-font-size);margin-bottom:1px}.fc-direction-ltr .fc-daygrid-event.fc-event-start,.fc-direction-rtl .fc-daygrid-event.fc-event-end{margin-left:2px}.fc-direction-ltr .fc-daygrid-event.fc-event-end,.fc-direction-rtl .fc-daygrid-event.fc-event-start{margin-right:2px}.fc-direction-ltr .fc-daygrid-event .fc-event-time{margin-right:3px}.fc-direction-rtl .fc-daygrid-event .fc-event-time{margin-left:3px}.fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-start),.fc-direction-rtl .fc-daygrid-block-event:not(.fc-event-end){border-bottom-left-radius:0;border-left-width:0;border-top-left-radius:0}.fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-end),.fc-direction-rtl .fc-daygrid-block-event:not(.fc-event-start){border-bottom-right-radius:0;border-right-width:0;border-top-right-radius:0}.fc-daygrid-block-event .fc-event-time{font-weight:700}.fc-daygrid-block-event .fc-event-time,.fc-daygrid-block-event .fc-event-title{padding:1px}.fc-daygrid-dot-event{align-items:center;direction:row;display:flex;padding:2px 0;position:relative}.fc-daygrid-dot-event.fc-event-mirror,.fc-daygrid-dot-event:hover{background:rgba(0,0,0,.1)}.fc-daygrid-dot-event.fc-event-selected:before{bottom:-10px;top:-10px}.fc-daygrid-event-dot{border:calc(var(--fc-daygrid-event-dot-width)/2) solid var(--fc-event-border-color);border-radius:calc(var(--fc-daygrid-event-dot-width)/2);box-sizing:content-box;height:0;margin:0 4px;width:0}.fc-daygrid-dot-event .fc-event-time,.fc-daygrid-dot-event .fc-event-title{overflow:hidden;white-space:nowrap}.fc-media-print .fc-daygrid-dot-event .fc-event-time,.fc-media-print .fc-daygrid-dot-event .fc-event-title{overflow:hidden!important;white-space:nowrap!important}.fc-daygrid-dot-event .fc-event-title{flex-basis:0;flex-grow:1;font-weight:700;min-height:0;min-width:0}";
 internal_cjs.injectStyles(css_248z);
 
 exports.DayGridHeaderRow = DayGridHeaderRow;
@@ -1202,7 +1215,8 @@ exports.buildDayTableModel = buildDayTableModel;
 exports.buildDayTableRenderRange = buildDayTableRenderRange;
 exports.computeColFromPosition = computeColFromPosition;
 exports.computeColWidth = computeColWidth;
-exports.computeRowHeight = computeRowHeight;
+exports.computeRowBasis = computeRowBasis;
+exports.computeRowIsCompact = computeRowIsCompact;
 exports.createDayHeaderFormatter = createDayHeaderFormatter;
 exports.getCellEl = getCellEl;
 exports.getRowEl = getRowEl;

package/internal.d.ts

@@ -1,6 +1,6 @@
 import { Slicer, DayGridRange, DayTableModel, DateRange, DateProfileGenerator, DateEnv, BaseComponent, ViewProps, DateMarker, DateProfile, DateFormatter, ViewContext, DayTableCell, Hit, EventRangeProps, EventSegUiInteractionState, DateComponent, ViewOptionsRefined, RefMap, SlicedCoordRange } from '@fullcalendar/core/internal';
 import { createElement, Ref, VNode } from '@fullcalendar/core/preact';
-import { CustomContentGenerator, ClassNamesGenerator, DidMountHandler, WillUnmountHandler, DayHeaderContentArg, CssDimValue } from '@fullcalendar/core';
+import { CustomContentGenerator, ClassNamesGenerator, DidMountHandler, WillUnmountHandler, DayHeaderContentArg } from '@fullcalendar/core';
 
 declare class DayTableSlicer extends Slicer<DayGridRange, [DayTableModel]> {
     forceDayIfListItem: boolean;
@@ -46,6 +46,7 @@ interface CellDataConfig<RenderProps> {
     isNavLink?: boolean;
 }
 interface RowConfig<RenderProps> {
+    isDateRow: boolean;
     renderConfig: CellRenderConfig<RenderProps>;
     dataConfigs: CellDataConfig<RenderProps>[];
 }
@@ -54,7 +55,9 @@ declare function buildDateRowConfig(dates: DateMarker[], datesRepDistinctDays: b
 context: ViewContext, colSpan?: number): RowConfig<DayHeaderContentArg>;
 declare function buildDateRenderConfig(context: ViewContext): CellRenderConfig<DayHeaderContentArg>;
 declare function buildDateDataConfigs(dates: DateMarker[], datesRepDistinctDays: boolean, dateProfile: DateProfile, todayRange: DateRange, dayHeaderFormat: DateFormatter, // TODO: rename to dateHeaderFormat?
-context: ViewContext, colSpan?: number, keyPrefix?: string): CellDataConfig<DayHeaderContentArg>[];
+context: ViewContext, colSpan?: number, keyPrefix?: string, extraRenderProps?: any, // TODO
+extraAttrs?: any, // TODO
+className?: string): CellDataConfig<DayHeaderContentArg>[];
 
 interface DayGridHeaderRowProps<RenderProps> extends RowConfig<RenderProps> {
     isSticky?: boolean;
@@ -73,6 +76,7 @@ declare class DayGridHeaderRow<RenderProps extends {
     private currentInnerHeight?;
     render(): createElement.JSX.Element;
     private handleInnerHeights;
+    componentWillUnmount(): void;
 }
 
 declare function buildDayTableModel(dateProfile: DateProfile, dateProfileGenerator: DateProfileGenerator): DayTableModel;
@@ -120,9 +124,7 @@ declare class DayGridLayout extends BaseComponent<DayGridLayoutProps> {
     componentWillUnmount(): void;
     resetScroll(): void;
     updateScrollY: () => void;
-    handleScrollEnd: ({ isUser }: {
-        isUser: boolean;
-    }) => void;
+    handleScrollEnd: (isUser: boolean) => void;
 }
 
 interface DayGridRowsProps {
@@ -155,15 +157,14 @@ declare class DayGridRows extends DateComponent<DayGridRowsProps> {
     private splitEventDrag;
     private splitEventResize;
     private rowHeightRefMap;
-    private disconnectWidth?;
     render(): createElement.JSX.Element;
     handleRootEl: (rootEl: HTMLDivElement) => void;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
     queryHit(positionLeft: number, positionTop: number, elWidth: number): Hit;
 }
-declare function computeRowHeight(visibleWidth: number | undefined, // should INCLUDE any scrollbar width to avoid oscillation
-rowCnt: number, isHeightAuto: boolean, forPrint: boolean, options: ViewOptionsRefined): [minHeight: CssDimValue | undefined, isCompact: boolean];
+declare function computeRowBasis(visibleWidth: number | undefined, // should INCLUDE any scrollbar width to avoid oscillation
+rowCnt: number, isHeightAuto: boolean, options: ViewOptionsRefined): number;
+declare function computeRowIsCompact(visibleWidth: number | undefined, // should INCLUDE any scrollbar width to avoid oscillation
+options: ViewOptionsRefined): boolean;
 
 type DayRowRange = SlicedCoordRange;
 type DayRowEventRange = DayRowRange & EventRangeProps;
@@ -193,7 +194,7 @@ interface DayGridRowProps {
     dayMaxEvents: boolean | number;
     dayMaxEventRows: boolean | number;
     colWidth?: number;
-    minHeight?: number | string;
+    basis?: number;
     rootElRef?: Ref<HTMLElement>;
     heightRef?: Ref<number>;
 }
@@ -217,4 +218,4 @@ declare class DayGridRow extends BaseComponent<DayGridRowProps> {
     private getHighlightSegs;
 }
 
-export { CellDataConfig, CellRenderConfig, DayGridHeaderRow, DayGridHeaderRowProps, DayGridLayout, DayGridLayoutProps, DayGridRow, DayGridRowProps, DayGridRows, DayGridView, DayTableSlicer, RowConfig, TableDateProfileGenerator, buildDateDataConfigs, buildDateRenderConfig, buildDateRowConfig, buildDateRowConfigs, buildDayTableModel, buildDayTableRenderRange, computeColFromPosition, computeColWidth, computeRowHeight, createDayHeaderFormatter, getCellEl, getRowEl };
+export { CellDataConfig, CellRenderConfig, DayGridHeaderRow, DayGridHeaderRowProps, DayGridLayout, DayGridLayoutProps, DayGridRow, DayGridRowProps, DayGridRows, DayGridView, DayTableSlicer, RowConfig, TableDateProfileGenerator, buildDateDataConfigs, buildDateRenderConfig, buildDateRowConfig, buildDateRowConfigs, buildDayTableModel, buildDayTableRenderRange, computeColFromPosition, computeColWidth, computeRowBasis, computeRowIsCompact, createDayHeaderFormatter, getCellEl, getRowEl };