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

package/internal.js

@@ -1,4 +1,4 @@
-import { Slicer, createFormatter, getDateMeta, formatDayString, buildNavLinkAttrs, getDayClassName, addDays, getEventKey, BaseComponent, StandardEvent, buildEventRangeTimeText, getEventRangeAnchorAttrs, EventContainer, MoreLinkContainer, joinClassNames, getEventRangeMeta, DateComponent, DayCellContainer, hasCustomDayCellContent, watchSize, isDimsEqual, setRef, 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,10 +28,15 @@ 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)
     };
 }
+/*
+For header cells: how to connect w/ custom rendering
+Applies to all cells in a row
+*/
 function buildDateRenderConfig(context) {
     const { options } = context;
     return {
@@ -42,23 +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: { 'data-date': !dateMeta.isDisabled ? formatDayString(date) : undefined },
-                innerAttrs: isNavLink ? buildNavLinkAttrs(context, 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) => {
@@ -73,13 +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,
-                innerAttrs: { 'aria-label': dateEnv.format(normDate, WEEKDAY_FORMAT) },
+                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)),
             };
         });
 }
@@ -163,8 +189,8 @@ class DayGridListEvent extends BaseComponent {
         /* slicedStart = */ undefined, 
         /* slicedEnd = */ undefined, props.isStart, props.isEnd, context, 
         /* defaultDisplayEventTime = */ true, props.defaultDisplayEventEnd);
-        let anchorAttrs = getEventRangeAnchorAttrs(eventRange, context);
-        return (createElement(EventContainer, Object.assign({}, props, { tag: anchorAttrs ? 'a' : 'div', attrs: anchorAttrs, className: 'fc-daygrid-dot-event fc-daygrid-event', defaultGenerator: renderInnerContent, timeText: timeText, isResizing: false, isDateSelecting: false })));
+        let [tag, attrs] = getEventTagAndAttrs(eventRange, context);
+        return (createElement(EventContainer, Object.assign({}, props, { tag: tag, attrs: attrs, className: 'fc-daygrid-dot-event fc-daygrid-event', defaultGenerator: renderInnerContent, timeText: timeText, isResizing: false, isDateSelecting: false })));
     }
 }
 function renderInnerContent(renderProps) {
@@ -198,9 +224,34 @@ class DayGridMoreLink extends BaseComponent {
 class DayGridCell extends DateComponent {
     constructor() {
         super(...arguments);
+        // memo
+        this.getDateMeta = memoize(getDateMeta);
         // ref
         this.rootElRef = createRef();
-        this.bodyElRef = createRef();
+        this.handleBodyEl = (bodyEl) => {
+            if (this.disconnectBodyHeight) {
+                this.disconnectBodyHeight();
+                this.disconnectBodyHeight = undefined;
+                setRef(this.props.headerHeightRef, null);
+                setRef(this.props.mainHeightRef, null);
+            }
+            if (bodyEl) {
+                // we want to fire on ANY size change, because we do more advanced stuff
+                this.disconnectBodyHeight = watchSize(bodyEl, (_bodyWidth, bodyHeight) => {
+                    const { props } = this;
+                    const mainRect = bodyEl.getBoundingClientRect();
+                    const rootRect = this.rootElRef.current.getBoundingClientRect();
+                    const headerHeight = mainRect.top - rootRect.top;
+                    if (!isDimsEqual(this.headerHeight, headerHeight)) {
+                        this.headerHeight = headerHeight;
+                        setRef(props.headerHeightRef, headerHeight);
+                    }
+                    if (props.fgLiquidHeight) {
+                        setRef(props.mainHeightRef, bodyHeight);
+                    }
+                });
+            }
+        };
     }
     render() {
         let { props, context } = this;
@@ -208,38 +259,28 @@ class DayGridCell extends DateComponent {
         // TODO: memoize this
         const isMonthStart = props.showDayNumber &&
             shouldDisplayMonthStart(props.date, props.dateProfile.currentRange, dateEnv);
-        return (createElement(DayCellContainer, { tag: "div", className: joinClassNames(props.className, 'fc-daygrid-day fc-flex-col', props.borderStart && 'fc-border-s', props.width != null ? '' : 'fc-liquid'), attrs: Object.assign(Object.assign({}, props.attrs), { role: 'gridcell' }), style: {
+        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: {
+                    width: props.width
+                } }));
+        }
+        const hasDayNumber = props.showDayNumber || hasCustomDayCellContent(options);
+        const isNavLink = options.navLinks;
+        const fullDateStr = buildDateStr(context, props.date);
+        return (createElement(DayCellContainer, { tag: "div", className: joinClassNames(baseClassName, props.className), attrs: Object.assign(Object.assign({}, props.attrs), { role: 'gridcell', 'aria-label': fullDateStr }), style: {
                 width: props.width
-            }, elRef: this.rootElRef, renderProps: props.renderProps, defaultGenerator: renderTopInner, date: props.date, dateProfile: props.dateProfile, todayRange: props.todayRange, showDayNumber: props.showDayNumber, isMonthStart: isMonthStart }, (InnerContent, renderProps) => (createElement(Fragment, null,
-            !renderProps.isDisabled && (props.showDayNumber || hasCustomDayCellContent(options)) && (createElement("div", { className: "fc-daygrid-day-header" },
-                createElement(InnerContent, { tag: "a", attrs: buildNavLinkAttrs(context, props.date), className: joinClassNames('fc-daygrid-day-number', isMonthStart && 'fc-daygrid-month-start') }))),
-            createElement("div", { className: joinClassNames('fc-daygrid-day-body', props.isTall && 'fc-daygrid-day-body-tall', props.fgLiquidHeight ? 'fc-liquid' : 'fc-grow'), ref: this.bodyElRef },
+            }, elRef: this.rootElRef, renderProps: props.renderProps, defaultGenerator: renderTopInner, date: props.date, dateMeta: dateMeta, showDayNumber: props.showDayNumber, isMonthStart: isMonthStart }, (InnerContent) => (createElement(Fragment, null,
+            hasDayNumber && (createElement("div", { className: "fc-daygrid-day-header" },
+                createElement(InnerContent, { tag: 'div', attrs: isNavLink
+                        ? buildNavLinkAttrs(context, props.date, undefined, fullDateStr)
+                        : { 'aria-hidden': true } // label already on cell
+                    , className: joinClassNames('fc-daygrid-day-number', isMonthStart && 'fc-daygrid-month-start') }))),
+            createElement("div", { className: joinClassNames('fc-daygrid-day-body', props.isTall && 'fc-daygrid-day-body-tall', props.fgLiquidHeight ? 'fc-liquid' : 'fc-grow'), ref: this.handleBodyEl },
                 createElement("div", { className: 'fc-daygrid-day-events', style: { height: props.fgHeight } }, props.fg),
                 createElement(DayGridMoreLink, { isBlock: props.isCompact, allDayDate: props.date, segs: props.segs, hiddenSegs: props.hiddenSegs, alignElRef: this.rootElRef, alignParentTop: props.showDayNumber ? '[role=row]' : '.fc-view', dateSpanProps: props.dateSpanProps, dateProfile: props.dateProfile, eventSelection: props.eventSelection, eventDrag: props.eventDrag, eventResize: props.eventResize, todayRange: props.todayRange }))))));
     }
-    componentDidMount() {
-        const bodyEl = this.bodyElRef.current;
-        // we want to fire on ANY size change, because we do more advanced stuff
-        this.disconnectBodyHeight = watchSize(bodyEl, (_bodyWidth, bodyHeight) => {
-            const { props } = this;
-            const mainRect = bodyEl.getBoundingClientRect();
-            const rootRect = this.rootElRef.current.getBoundingClientRect();
-            const headerHeight = mainRect.top - rootRect.top;
-            if (!isDimsEqual(this.headerHeight, headerHeight)) {
-                this.headerHeight = headerHeight;
-                setRef(props.headerHeightRef, headerHeight);
-            }
-            if (props.fgLiquidHeight) {
-                setRef(props.mainHeightRef, bodyHeight);
-            }
-        });
-    }
-    componentWillUnmount() {
-        this.disconnectBodyHeight();
-        const { props } = this;
-        setRef(props.headerHeightRef, null);
-        setRef(props.mainHeightRef, null);
-    }
 }
 // Utils
 // -------------------------------------------------------------------------------------------------
@@ -467,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
 // -------------------------------------------------------------------------------------------------
@@ -563,14 +604,21 @@ class DayGridRow extends BaseComponent {
          (props.eventDrag && props.eventDrag.affectedInstances) ||
             (props.eventResize && props.eventResize.affectedInstances) ||
             {};
-        return (createElement("div", { role: 'row' // TODO: audit this for all scenarios
-            , className: joinClassNames('fc-flex-row fc-rel', props.className), style: {
-                minHeight: props.minHeight,
+        const isNavLink = options.navLinks;
+        const fullWeekStr = buildDateStr(context, weekDate, 'week');
+        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-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
@@ -581,8 +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: "a", attrs: buildNavLinkAttrs(context, weekDate, 'week'), 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)));
     }
@@ -742,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);
-        return (createElement("div", { className: joinClassNames(
+        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, dateProfile: props.dateProfile, todayRange: props.todayRange, cells: cells, showDayNumbers: rowCnt > 1, showWeekNumbers: options.weekNumbers, forPrint: props.forPrint, isCompact: isCompact, 
+            !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) {
@@ -782,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,
@@ -799,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 {
@@ -843,14 +889,16 @@ class DayGridHeaderCell extends BaseComponent {
     render() {
         const { props } = this;
         const { renderConfig, dataConfig } = props;
-        return (createElement(ContentContainer, { tag: 'div', attrs: dataConfig.attrs, className: joinClassNames(dataConfig.className, 'fc-header-cell fc-cell fc-flex-col fc-align-center', props.borderStart && 'fc-border-s', !props.isSticky && 'fc-crop', props.colWidth == null && 'fc-liquid'), style: {
+        // HACK
+        const isDisabled = dataConfig.renderProps.isDisabled;
+        return (createElement(ContentContainer, { tag: 'div', attrs: Object.assign({ role: 'columnheader', 'aria-colspan': dataConfig.colSpan }, dataConfig.attrs), className: joinClassNames('fc-header-cell fc-cell fc-flex-col fc-align-center', props.borderStart && 'fc-border-s', !props.isSticky && 'fc-crop', props.colWidth == null && 'fc-liquid', dataConfig.className), style: {
                 width: props.colWidth != null
                     ? props.colWidth * (dataConfig.colSpan || 1)
                     : undefined,
             }, renderProps: dataConfig.renderProps, generatorName: renderConfig.generatorName, customGenerator: renderConfig.customGenerator, defaultGenerator: renderText, classNameGenerator: 
             // don't use custom classNames if disabled
             // TODO: make DRY with DayCellContainer
-            dataConfig.renderProps.isDisabled ? undefined : renderConfig.classNameGenerator, didMount: renderConfig.didMount, willUnmount: renderConfig.willUnmount }, (InnerContainer) => (!dataConfig.renderProps.isDisabled && (createElement(InnerContainer, { tag: dataConfig.isNavLink ? 'a' : 'div', attrs: dataConfig.innerAttrs, className: joinClassNames('fc-cell-inner fc-flex-col fc-padding-sm', props.isSticky && 'fc-sticky-s'), elRef: this.handleInnerEl })))));
+            isDisabled ? undefined : renderConfig.classNameGenerator, didMount: renderConfig.didMount, willUnmount: renderConfig.willUnmount }, (InnerContainer) => (createElement(InnerContainer, { tag: 'div', attrs: dataConfig.innerAttrs, className: joinClassNames('fc-cell-inner fc-flex-col fc-padding-sm', props.isSticky && 'fc-sticky-s'), elRef: this.handleInnerEl }))));
     }
 }
 
@@ -875,7 +923,10 @@ class DayGridHeaderRow extends BaseComponent {
     }
     render() {
         const { props } = this;
-        return (createElement("div", { role: 'row', 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 })))));
+        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);
     }
 }
 
@@ -885,9 +936,9 @@ TODO: kill this class in favor of DayGridHeaderRows?
 class DayGridHeader extends BaseComponent {
     render() {
         const { props } = this;
-        return (createElement("div", { className: joinClassNames(props.className, 'fc-flex-col', props.width == null && 'fc-liquid'), style: {
+        return (createElement("div", { role: 'rowgroup', className: joinClassNames(props.className, 'fc-flex-col', props.width == null && 'fc-liquid'), style: {
                 width: props.width
-            } }, props.headerTiers.map((rowConfig, tierNum) => (createElement(DayGridHeaderRow, Object.assign({}, rowConfig, { key: tierNum, className: tierNum ? 'fc-border-t' : '', colWidth: props.colWidth }))))));
+            } }, props.headerTiers.map((rowConfig, tierNum) => (createElement(DayGridHeaderRow, Object.assign({}, rowConfig, { key: tierNum, role: 'row', className: tierNum ? 'fc-border-t' : '', colWidth: props.colWidth }))))));
     }
 }
 
@@ -897,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 })));
     }
 }
 
@@ -939,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
     // -----------------------------------------------------------------------------------------------
@@ -1030,21 +1085,29 @@ class DayGridLayout extends BaseComponent {
                 }
             }
         };
-        this.clearScroll = () => {
-            this.scrollDate = null;
+        this.handleScrollEnd = (isUser) => {
+            if (isUser) {
+                this.scrollDate = null;
+            }
         };
     }
     render() {
         const { props, context } = this;
         const { options } = context;
         const commonLayoutProps = Object.assign(Object.assign({}, props), { scrollerRef: this.scrollerRef, rowHeightRefMap: this.rowHeightRefMap });
-        return (createElement(ViewContainer, { viewSpec: context.viewSpec, className: joinClassNames(props.className, 'fc-print-root fc-border') }, options.dayMinWidth ? (createElement(DayGridLayoutPannable, Object.assign({}, commonLayoutProps, { dayMinWidth: options.dayMinWidth }))) : (createElement(DayGridLayoutNormal, Object.assign({}, commonLayoutProps)))));
+        return (createElement(ViewContainer, { viewSpec: context.viewSpec, attrs: {
+                role: 'grid',
+                'aria-rowcount': props.headerTiers.length + props.cellRows.length,
+                'aria-colcount': props.cellRows[0].length,
+                'aria-labelledby': props.labelId,
+                'aria-label': props.labelStr,
+            }, className: joinClassNames(props.className, 'fc-print-root fc-border') }, options.dayMinWidth ? (createElement(DayGridLayoutPannable, Object.assign({}, commonLayoutProps, { dayMinWidth: options.dayMinWidth }))) : (createElement(DayGridLayoutNormal, Object.assign({}, commonLayoutProps)))));
     }
     // Lifecycle
     // -----------------------------------------------------------------------------------------------
     componentDidMount() {
         this.resetScroll();
-        this.scrollerRef.current.addScrollEndListener(this.clearScroll);
+        this.scrollerRef.current.addScrollEndListener(this.handleScrollEnd);
     }
     componentDidUpdate(prevProps) {
         if (prevProps.dateProfile !== this.props.dateProfile && this.context.options.scrollTimeReset) {
@@ -1052,14 +1115,13 @@ class DayGridLayout extends BaseComponent {
         }
     }
     componentWillUnmount() {
-        this.scrollerRef.current.removeScrollEndListener(this.clearScroll);
+        this.scrollerRef.current.removeScrollEndListener(this.handleScrollEnd);
     }
     // Scrolling
     // -----------------------------------------------------------------------------------------------
     resetScroll() {
         this.scrollDate = this.props.dateProfile.currentDate;
         this.updateScrollY();
-        // updateScrollX
         const scroller = this.scrollerRef.current;
         scroller.scrollTo({ x: 0 });
     }
@@ -1084,7 +1146,7 @@ class DayGridView extends BaseComponent {
         const slicedProps = this.slicer.sliceProps(props, props.dateProfile, options.nextDayThreshold, context, dayTableModel);
         return (createElement(NowTimer, { unit: "day" }, (nowDate, todayRange) => {
             const headerTiers = this.buildDateRowConfigs(dayTableModel.headerDates, datesRepDistinctDays, props.dateProfile, todayRange, dayHeaderFormat, context);
-            return (createElement(DayGridLayout, { dateProfile: props.dateProfile, todayRange: todayRange, cellRows: dayTableModel.cellRows, forPrint: props.forPrint, className: 'fc-daygrid', 
+            return (createElement(DayGridLayout, { labelId: props.labelId, labelStr: props.labelStr, dateProfile: props.dateProfile, todayRange: todayRange, cellRows: dayTableModel.cellRows, forPrint: props.forPrint, className: 'fc-daygrid', 
                 // header content
                 headerTiers: headerTiers, 
                 // body content
@@ -1131,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.3",
+  "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.3"
+    "@fullcalendar/core": "7.0.0-rc.0"
   },
   "type": "module",
   "bugs": "https://fullcalendar.io/reporting-bugs",