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

package/internal.js

@@ -1,4 +1,4 @@
-import { Slicer, createFormatter, getDateMeta, buildDateStr, formatDayString, buildNavLinkAttrs, getDayClassName, addDays, getEventKey, BaseComponent, StandardEvent, buildEventRangeTimeText, getEventTagAndAttrs, EventContainer, MoreLinkContainer, joinClassNames, getEventRangeMeta, DateComponent, setRef, watchSize, isDimsEqual, hasCustomDayCellContent, DayCellContainer, addMs, SegHierarchy, DaySeriesModel, DayTableModel, fracToCssDim, watchHeight, RefMap, afterSize, sortEventSegs, WeekNumberContainer, buildEventRangeKey, BgEvent, renderFill, memoize, getIsHeightAuto, watchWidth, ContentContainer, renderText, getStickyHeaderDates, Scroller, getStickyFooterScrollbar, StickyFooterScrollbar, getScrollerSyncerClass, ViewContainer, NowTimer, DateProfileGenerator, addWeeks, diffWeeks, injectStyles } from '@fullcalendar/core/internal.js';
+import { Slicer, createFormatter, addDays, getDateMeta, buildDateStr, formatDayString, buildNavLinkAttrs, joinClassNames, getDayClassName, getEventKey, BaseComponent, StandardEvent, buildEventRangeTimeText, getEventTagAndAttrs, EventContainer, MoreLinkContainer, getEventRangeMeta, DateComponent, memoize, setRef, watchSize, isDimsEqual, hasCustomDayCellContent, DayCellContainer, addMs, SegHierarchy, DaySeriesModel, DayTableModel, fracToCssDim, watchHeight, RefMap, afterSize, sortEventSegs, WeekNumberContainer, buildEventRangeKey, BgEvent, renderFill, getIsHeightAuto, ContentContainer, renderText, getStickyHeaderDates, Scroller, Ruler, getStickyFooterScrollbar, FooterScrollbar, getScrollerSyncerClass, ViewContainer, NowTimer, DateProfileGenerator, addWeeks, diffWeeks, injectStyles } from '@fullcalendar/core/internal.js';
 import { createElement, Fragment, createRef, Component } from '@fullcalendar/core/preact.js';
 
 class DayTableSlicer extends Slicer {
@@ -28,6 +28,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)
     };
@@ -46,31 +47,38 @@ function buildDateRenderConfig(context) {
         willUnmount: options.dayHeaderWillUnmount,
     };
 }
+const dowDates = [];
+for (let dow = 0; dow < 7; dow++) {
+    dowDates.push(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 = 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 = 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': formatDayString(date) }),
+                attrs: Object.assign(Object.assign(Object.assign({ 'aria-label': fullDateStr }, (dateMeta.isToday ? { 'aria-current': 'date' } : {})), { 'data-date': formatDayString(date) }), extraAttrs),
                 // for navlink
                 innerAttrs: isNavLink
                     ? buildNavLinkAttrs(context, date, undefined, fullDateStr)
                     : { 'aria-hidden': true },
                 colSpan,
                 isNavLink,
-                className: getDayClassName(dateMeta),
+                className: joinClassNames(className, getDayClassName(dateMeta)),
             };
         })
         : dates.map((date) => {
@@ -85,21 +93,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: getDayClassName(dayMeta),
+                className: joinClassNames(className, getDayClassName(dayMeta)),
             };
         });
 }
@@ -218,6 +224,8 @@ class DayGridMoreLink extends BaseComponent {
 class DayGridCell extends DateComponent {
     constructor() {
         super(...arguments);
+        // memo
+        this.getDateMeta = memoize(getDateMeta);
         // ref
         this.rootElRef = createRef();
         this.handleBodyEl = (bodyEl) => {
@@ -251,8 +259,7 @@ class DayGridCell extends DateComponent {
         // TODO: memoize this
         const isMonthStart = props.showDayNumber &&
             shouldDisplayMonthStart(props.date, props.dateProfile.currentRange, dateEnv);
-        // TODO: memoize this
-        const dateMeta = getDateMeta(props.date, props.todayRange, null, props.dateProfile);
+        const dateMeta = this.getDateMeta(props.date, props.todayRange, null, props.dateProfile);
         const baseClassName = joinClassNames('fc-daygrid-day', props.borderStart && 'fc-border-s', props.width != null ? '' : 'fc-liquid', 'fc-flex-col');
         if (dateMeta.isDisabled) {
             return (createElement("div", { role: 'gridcell', "aria-disabled": true, className: joinClassNames(baseClassName, 'fc-day-disabled'), style: {
@@ -501,10 +508,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
 // -------------------------------------------------------------------------------------------------
@@ -602,13 +609,16 @@ class DayGridRow extends BaseComponent {
         return (createElement("div", { role: props.role /* !!! */, "aria-label": props.role === 'row' // HACK
                 ? fullWeekStr
                 : undefined // can't have label on non-role div
-            , className: joinClassNames('fc-flex-row fc-rel', props.className), style: {
-                minHeight: props.minHeight,
+            , className: 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 && (createElement(WeekNumberContainer, { tag: 'div', attrs: Object.assign(Object.assign({}, (isNavLink
+                    ? 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'),
-            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 (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
@@ -619,10 +629,7 @@ class DayGridRow extends BaseComponent {
                     fgHeight: heightsByCol[col], width: props.colWidth, 
                     // refs
                     headerHeightRef: headerHeightRefMap.createRef(cell.key), mainHeightRef: mainHeightRefMap.createRef(cell.key) }));
-            })),
-            props.showWeekNumbers && (createElement(WeekNumberContainer, { tag: 'div', attrs: Object.assign(Object.assign({}, (isNavLink
-                    ? 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)));
     }
@@ -782,30 +789,22 @@ class DayGridRows extends DateComponent {
         let eventResizeByRow = this.splitEventResize(props.eventResize, rowCnt);
         let isHeightAuto = 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 (createElement("div", { role: 'rowgroup', className: 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) => (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: joinClassNames(rowHeightsRedistribute && 'fc-grow fc-basis0', rowCnt > 1 && 'fc-break-inside-avoid', // don't avoid breaks for single tall row
+            className: 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 = watchWidth(this.rootEl, (width) => {
-            this.setState({ width });
-        });
-    }
-    componentWillUnmount() {
-        this.disconnectWidth();
-    }
     // Hit System
     // -----------------------------------------------------------------------------------------------
     queryHit(positionLeft, positionTop, elWidth) {
@@ -822,8 +821,7 @@ class DayGridRows extends 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,
@@ -839,27 +837,35 @@ class DayGridRows extends 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 BaseComponent {
@@ -919,6 +925,9 @@ class DayGridHeaderRow extends BaseComponent {
         const { props } = this;
         return (createElement("div", { role: props.role /* !!! */, "aria-rowindex": props.rowIndex != null ? 1 + props.rowIndex : undefined, className: joinClassNames('fc-flex-row fc-content-box', props.className), style: { height: props.height } }, props.dataConfigs.map((dataConfig, cellI) => (createElement(DayGridHeaderCell, { key: dataConfig.key, renderConfig: props.renderConfig, dataConfig: dataConfig, isSticky: props.isSticky, borderStart: Boolean(cellI), colWidth: props.colWidth, innerHeightRef: props.innerHeightRef })))));
     }
+    componentWillUnmount() {
+        setRef(this.props.innerHeightRef, null);
+    }
 }
 
 /*
@@ -939,37 +948,39 @@ class DayGridLayoutNormal extends BaseComponent {
         this.handleScroller = (scroller) => {
             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 && !getIsHeightAuto(options);
         const stickyHeaderDates = !props.forPrint && getStickyHeaderDates(options);
         return (createElement(Fragment, null,
             options.dayHeaders && (createElement("div", { className: joinClassNames(props.forPrint ? 'fc-print-header' : 'fc-flex-row', // col for print, row for screen
-                'fc-border-b') },
-                createElement(DayGridHeader, { headerTiers: props.headerTiers, className: joinClassNames('fc-daygrid-header', stickyHeaderDates && 'fc-table-header-sticky') }),
-                Boolean(state.endScrollbarWidth) && (createElement("div", { className: 'fc-border-s fc-filler', style: { minWidth: state.endScrollbarWidth } })))),
-            createElement(Scroller, { vertical: verticalScrollbars, clientWidthRef: this.handleClientWidth, endScrollbarWidthRef: this.handleEndScrollbarWidth, className: joinClassNames('fc-daygrid-body', 
+                stickyHeaderDates && 'fc-table-header-sticky', 'fc-border-b') },
+                createElement(DayGridHeader, { headerTiers: props.headerTiers, className: 'fc-daygrid-header' }),
+                Boolean(endScrollbarWidth) && (createElement("div", { className: 'fc-border-s fc-filler', style: { minWidth: endScrollbarWidth } })))),
+            createElement(Scroller, { vertical: verticalScrollbars, className: 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 },
                 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 })),
+            createElement(Ruler, { widthRef: this.handleTotalWidth })));
     }
 }
 
@@ -981,43 +992,45 @@ class DayGridLayoutPannable extends BaseComponent {
         this.footerScrollerRef = 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 && !getIsHeightAuto(options);
         const stickyHeaderDates = !props.forPrint && getStickyHeaderDates(options);
         const stickyFooterScrollbar = !props.forPrint && 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 (createElement(Fragment, null,
-            options.dayHeaders && (createElement("div", { className: 'fc-print-header' },
-                createElement(Scroller, { horizontal: true, hideScrollbars: true, className: joinClassNames('fc-daygrid-header fc-flex-row fc-border-b', stickyHeaderDates && 'fc-table-header-sticky'), ref: this.headerScrollerRef },
+            options.dayHeaders && (createElement("div", { className: joinClassNames('fc-print-header', stickyHeaderDates && 'fc-table-header-sticky') },
+                createElement(Scroller, { horizontal: true, hideScrollbars: true, className: 'fc-daygrid-header fc-flex-row fc-border-b', ref: this.headerScrollerRef },
                     createElement(DayGridHeader, { headerTiers: props.headerTiers, colWidth: colWidth, width: canvasWidth }),
-                    Boolean(state.endScrollbarWidth) && (createElement("div", { className: 'fc-border-s fc-filler', style: { minWidth: state.endScrollbarWidth } }))))),
+                    Boolean(endScrollbarWidth) && (createElement("div", { className: 'fc-border-s fc-filler', style: { minWidth: endScrollbarWidth } }))))),
             createElement(Scroller, { vertical: verticalScrollbars, horizontal: true, hideScrollbars: stickyFooterScrollbar ||
                     props.forPrint // prevents blank space in print-view on Safari
                 , className: 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 },
                 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) && (createElement(StickyFooterScrollbar, { canvasWidth: canvasWidth, scrollerRef: this.footerScrollerRef }))));
+            Boolean(stickyFooterScrollbar) && (createElement(FooterScrollbar, { isSticky: true, canvasWidth: canvasWidth, scrollerRef: this.footerScrollerRef })),
+            createElement(Ruler, { widthRef: this.handleTotalWidth })));
     }
     // Lifecycle
     // -----------------------------------------------------------------------------------------------
@@ -1072,7 +1085,7 @@ class DayGridLayout extends BaseComponent {
                 }
             }
         };
-        this.handleScrollEnd = ({ isUser }) => {
+        this.handleScrollEnd = (isUser) => {
             if (isUser) {
                 this.scrollDate = null;
             }
@@ -1180,7 +1193,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}";
 injectStyles(css_248z);
 
-export { DayGridHeaderRow, DayGridLayout, DayGridRow, DayGridRows, DayGridView, DayTableSlicer, TableDateProfileGenerator, buildDateDataConfigs, buildDateRenderConfig, buildDateRowConfig, buildDateRowConfigs, buildDayTableModel, buildDayTableRenderRange, computeColFromPosition, computeColWidth, computeRowHeight, createDayHeaderFormatter, getCellEl, getRowEl };
+export { DayGridHeaderRow, DayGridLayout, DayGridRow, DayGridRows, DayGridView, DayTableSlicer, TableDateProfileGenerator, buildDateDataConfigs, buildDateRenderConfig, buildDateRowConfig, buildDateRowConfigs, buildDayTableModel, buildDayTableRenderRange, computeColFromPosition, computeColWidth, computeRowBasis, computeRowIsCompact, createDayHeaderFormatter, getCellEl, getRowEl };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fullcalendar/daygrid",
-  "version": "7.0.0-beta.4",
+  "version": "7.0.0-rc.0",
   "title": "FullCalendar Day Grid Plugin",
   "description": "Display events on a month view or \"day grid\" view",
   "homepage": "https://fullcalendar.io/docs/month-view",
@@ -13,7 +13,7 @@
     "month-view"
   ],
   "peerDependencies": {
-    "@fullcalendar/core": "7.0.0-beta.4"
+    "@fullcalendar/core": "7.0.0-rc.0"
   },
   "type": "module",
   "bugs": "https://fullcalendar.io/reporting-bugs",