@fullcalendar/daygrid 7.0.0-beta.3 → 7.0.0-beta.5

package/{internal.js → esm/internal.js}

@@ -1,5 +1,7 @@
-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 { createElement, Fragment, createRef, Component } from '@fullcalendar/core/preact.js';
+import { Slicer, computeMajorUnit, isMajorUnit, addDays, getDateMeta, findWeekdayText, findDayNumberText, buildDateStr, formatDayString, buildNavLinkAttrs, WEEKDAY_ONLY_FORMAT, getEventKey, createFormatter, BaseComponent, MoreLinkContainer, StandardEvent, getEventRangeMeta, DateComponent, memoize, memoizeObjArg, setRef, watchSize, isDimsEqual, joinArrayishClassNames, generateClassName, ContentContainer, addMs, findMonthText, SegHierarchy, DaySeriesModel, DayTableModel, fracToCssDim, watchHeight, RefMap, afterSize, sortEventSegs, renderText, buildEventRangeKey, BgEvent, renderFill, getIsHeightAuto, getStickyHeaderDates, Scroller, Ruler, getStickyFooterScrollbar, FooterScrollbar, getScrollerSyncerClass, ViewContainer, NowTimer, DateProfileGenerator, addWeeks, diffWeeks } from '@fullcalendar/core/internal';
+import { createElement, Fragment, createRef, Component } from '@fullcalendar/core/preact';
+import { joinClassNames } from '@fullcalendar/core';
+import classNames from '@fullcalendar/core/internal-classnames';
 
 class DayTableSlicer extends Slicer {
     constructor() {
@@ -16,55 +18,96 @@ class DayTableSlicer extends Slicer {
 // but can share some of the same types/utils
 // Date Cells
 // -------------------------------------------------------------------------------------------------
-const WEEKDAY_FORMAT = createFormatter({ weekday: 'long' });
 const firstSunday = new Date(259200000);
-function buildDateRowConfigs(...args) {
-    return [buildDateRowConfig(...args)];
+function buildDateRowConfigs(dates, datesRepDistinctDays, dateProfile, todayRange, dayHeaderFormat, // TODO: rename to dateHeaderFormat?
+context) {
+    const rowConfig = buildDateRowConfig(dates, datesRepDistinctDays, dateProfile, todayRange, dayHeaderFormat, context);
+    const majorUnit = computeMajorUnit(dateProfile, context.dateEnv);
+    // HACK mutate isMajor
+    if (datesRepDistinctDays) {
+        for (const dataConfig of rowConfig.dataConfigs) {
+            if (isMajorUnit(dataConfig.dateMarker, majorUnit, context.dateEnv)) {
+                dataConfig.renderProps.isMajor = true;
+            }
+        }
+    }
+    return [rowConfig];
 }
 /*
 Should this receive resource data attributes?
 Or ResourceApi object itself?
 */
-function buildDateRowConfig(dates, datesRepDistinctDays, dateProfile, todayRange, dayHeaderFormat, // TODO: rename to dateHeaderFormat?
-context, colSpan) {
+function buildDateRowConfig(dateMarkers, datesRepDistinctDays, dateProfile, todayRange, dayHeaderFormat, // TODO: rename to dateHeaderFormat?
+context, colSpan, isMajorMod) {
     return {
+        isDateRow: true,
         renderConfig: buildDateRenderConfig(context),
-        dataConfigs: buildDateDataConfigs(dates, datesRepDistinctDays, dateProfile, todayRange, dayHeaderFormat, context, colSpan)
+        dataConfigs: buildDateDataConfigs(dateMarkers, datesRepDistinctDays, dateProfile, todayRange, dayHeaderFormat, context, colSpan, undefined, undefined, undefined, undefined, isMajorMod)
     };
 }
+/*
+For header cells: how to connect w/ custom rendering
+Applies to all cells in a row
+*/
 function buildDateRenderConfig(context) {
     const { options } = context;
     return {
         generatorName: 'dayHeaderContent',
         customGenerator: options.dayHeaderContent,
-        classNameGenerator: options.dayHeaderClassNames,
+        classNameGenerator: options.dayHeaderClass,
+        innerClassNameGenerator: options.dayHeaderInnerClass,
         didMount: options.dayHeaderDidMount,
         willUnmount: options.dayHeaderWillUnmount,
+        align: options.dayHeaderAlign,
+        sticky: options.dayHeaderSticky,
     };
 }
-function buildDateDataConfigs(dates, datesRepDistinctDays, dateProfile, todayRange, dayHeaderFormat, // TODO: rename to dateHeaderFormat?
-context, colSpan = 1, keyPrefix = '') {
+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(dateMarkers, datesRepDistinctDays, dateProfile, todayRange, dayHeaderFormat, // TODO: rename to dateHeaderFormat?
+context, colSpan = 1, keyPrefix = '', extraRenderProps = {}, // TODO
+extraAttrs = {}, // TODO
+className = '', isMajorMod) {
     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;
+        ? dateMarkers.map((dateMarker, i) => {
+            const dateMeta = getDateMeta(dateMarker, dateEnv, dateProfile, todayRange);
+            const isMajor = isMajorMod != null && !(i % isMajorMod);
+            const [text, textParts] = dateEnv.format(dateMarker, dayHeaderFormat);
+            const hasNavLink = options.navLinks && !dateMeta.isDisabled &&
+                dateMarkers.length > 1; // don't show navlink to day if only one day
+            const renderProps = Object.assign(Object.assign(Object.assign({}, dateMeta), extraRenderProps), { text,
+                textParts,
+                get weekdayText() { return findWeekdayText(textParts); },
+                get dayNumberText() { return datesRepDistinctDays ? findDayNumberText(textParts) : ''; },
+                isMajor, isNarrow: false, isSticky: false, inPopover: false, level: 0, // HACK. gets overridden
+                hasNavLink, view: viewApi });
+            const fullDateStr = buildDateStr(context, dateMarker);
+            // for DayGridHeaderCell
             return {
-                key: keyPrefix + date.toUTCString(),
+                key: keyPrefix + dateMarker.toUTCString(),
+                dateMarker,
                 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(dateMarker) }), extraAttrs),
+                // for navlink
+                innerAttrs: hasNavLink
+                    ? buildNavLinkAttrs(context, dateMarker, undefined, fullDateStr)
+                    : { 'aria-hidden': true },
                 colSpan,
-                isNavLink,
-                className: getDayClassName(dateMeta),
+                hasNavLink,
+                className,
             };
         })
-        : dates.map((date) => {
-            const dow = date.getUTCDay();
+        : dateMarkers.map((dateMarker, i) => {
+            const dow = dateMarker.getUTCDay();
             const normDate = addDays(firstSunday, dow);
-            const dayMeta = {
+            const dateMeta = {
+                date: dateEnv.toDate(dateMarker),
                 dow,
                 isDisabled: false,
                 isFuture: false,
@@ -72,14 +115,25 @@ context, colSpan = 1, keyPrefix = '') {
                 isToday: false,
                 isOther: false,
             };
-            const text = dateEnv.format(normDate, dayHeaderFormat);
-            const renderProps = Object.assign(Object.assign({}, dayMeta), { date, view: viewApi, text });
+            const isMajor = isMajorMod != null && !(i % isMajorMod);
+            const [text, textParts] = dateEnv.format(normDate, dayHeaderFormat);
+            const renderProps = Object.assign(Object.assign(Object.assign({}, dateMeta), { date: dowDates[dow], isMajor, isNarrow: false, isSticky: false, inPopover: false, hasNavLink: false, level: 0, view: viewApi, text,
+                textParts,
+                get weekdayText() { return findWeekdayText(textParts); },
+                get dayNumberText() { return datesRepDistinctDays ? findDayNumberText(textParts) : ''; } }), extraRenderProps);
+            const fullWeekDayStr = dateEnv.format(normDate, WEEKDAY_ONLY_FORMAT)[0];
+            // for DayGridHeaderCell
             return {
                 key: keyPrefix + String(dow),
+                dateMarker,
                 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,
             };
         });
 }
@@ -95,9 +149,9 @@ function getEventPartKey(seg) {
 }
 // DayGridRange utils (TODO: move)
 // -------------------------------------------------------------------------------------------------
-function splitSegsByRow(segs, rowCnt) {
+function splitSegsByRow(segs, rowCount) {
     const byRow = [];
-    for (let row = 0; row < rowCnt; row++) {
+    for (let row = 0; row < rowCount; row++) {
         byRow[row] = [];
     }
     for (const seg of segs) {
@@ -105,15 +159,15 @@ function splitSegsByRow(segs, rowCnt) {
     }
     return byRow;
 }
-function splitInteractionByRow(ui, rowCnt) {
+function splitInteractionByRow(ui, rowCount) {
     const byRow = [];
     if (!ui) {
-        for (let row = 0; row < rowCnt; row++) {
+        for (let row = 0; row < rowCount; row++) {
             byRow[row] = null;
         }
     }
     else {
-        for (let row = 0; row < rowCnt; row++) {
+        for (let row = 0; row < rowCount; row++) {
             byRow[row] = {
                 affectedInstances: ui.affectedInstances,
                 isEvent: ui.isEvent,
@@ -146,61 +200,55 @@ function hasListItemDisplay(seg) {
     );
 }
 
-class DayGridBlockEvent extends BaseComponent {
-    render() {
-        let { props } = this;
-        return (createElement(StandardEvent, Object.assign({}, props, { className: 'fc-daygrid-block-event fc-daygrid-event fc-h-event', defaultTimeFormat: DEFAULT_TABLE_EVENT_TIME_FORMAT, defaultDisplayEventEnd: props.defaultDisplayEventEnd, disableResizing: !props.eventRange.def.allDay })));
-    }
-}
-
-class DayGridListEvent extends BaseComponent {
-    render() {
-        let { props, context } = this;
-        let { options } = context;
-        let { eventRange } = props;
-        let timeFormat = options.eventTimeFormat || DEFAULT_TABLE_EVENT_TIME_FORMAT;
-        let timeText = buildEventRangeTimeText(timeFormat, eventRange, 
-        /* 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 })));
-    }
-}
-function renderInnerContent(renderProps) {
-    return (createElement(Fragment, null,
-        createElement("div", { className: "fc-daygrid-event-dot", style: { borderColor: renderProps.borderColor || renderProps.backgroundColor } }),
-        renderProps.timeText && (createElement("div", { className: "fc-event-time" }, renderProps.timeText)),
-        createElement("div", { className: "fc-event-title" }, renderProps.event.title || createElement(Fragment, null, "\u00A0"))));
-}
-
 class DayGridMoreLink extends BaseComponent {
     render() {
         let { props } = this;
-        return (createElement(MoreLinkContainer, { className: joinClassNames('fc-daygrid-more-link', props.isBlock
-                ? 'fc-daygrid-more-link-block'
-                : 'fc-daygrid-more-link-button'), dateProfile: props.dateProfile, todayRange: props.todayRange, allDayDate: props.allDayDate, segs: props.segs, hiddenSegs: props.hiddenSegs, alignElRef: props.alignElRef, alignParentTop: props.alignParentTop, dateSpanProps: props.dateSpanProps, popoverContent: () => {
-                let forcedInvisibleMap = // TODO: more convenient/DRY
-                 (props.eventDrag ? props.eventDrag.affectedInstances : null) ||
-                    (props.eventResize ? props.eventResize.affectedInstances : null) ||
-                    {};
-                return (createElement(Fragment, null, props.segs.map((seg) => {
-                    let { eventRange } = seg;
-                    let { instanceId } = eventRange.instance;
-                    return (createElement("div", { key: instanceId, style: {
-                            visibility: forcedInvisibleMap[instanceId] ? 'hidden' : '',
-                        } }, hasListItemDisplay(seg) ? (createElement(DayGridListEvent, Object.assign({ eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: false, isSelected: instanceId === props.eventSelection, defaultDisplayEventEnd: false }, getEventRangeMeta(eventRange, props.todayRange)))) : (createElement(DayGridBlockEvent, Object.assign({ eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: instanceId === props.eventSelection, defaultDisplayEventEnd: false }, getEventRangeMeta(eventRange, props.todayRange))))));
-                })));
-            } }));
+        return (createElement(MoreLinkContainer, { display: 'row', className: props.className, isNarrow: props.isNarrow, isMicro: props.isMicro, dateProfile: props.dateProfile, todayRange: props.todayRange, allDayDate: props.allDayDate, segs: props.segs, hiddenSegs: props.hiddenSegs, alignElRef: props.alignElRef, alignParentTop: props.alignParentTop, dateSpanProps: props.dateSpanProps, popoverContent: () => (createElement(Fragment, null, props.segs.map((seg) => {
+                let { eventRange } = seg;
+                let { instanceId } = eventRange.instance;
+                let isDragging = Boolean(props.eventDrag && props.eventDrag.affectedInstances[instanceId]);
+                let isResizing = Boolean(props.eventResize && props.eventResize.affectedInstances[instanceId]);
+                let isInvisible = isDragging || isResizing;
+                return (createElement("div", { key: instanceId, style: {
+                        visibility: isInvisible ? 'hidden' : undefined,
+                    } },
+                    createElement(StandardEvent, Object.assign({ display: hasListItemDisplay(seg) ? 'list-item' : 'row', eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: isDragging, isResizing: isResizing, isMirror: false, isSelected: instanceId === props.eventSelection, defaultTimeFormat: DEFAULT_TABLE_EVENT_TIME_FORMAT, defaultDisplayEventEnd: false }, getEventRangeMeta(eventRange, props.todayRange)))));
+            }))) }));
     }
 }
 
 class DayGridCell extends DateComponent {
     constructor() {
         super(...arguments);
+        // memo
+        this.getDateMeta = memoize(getDateMeta);
+        this.refineRenderProps = memoizeObjArg(refineRenderProps);
         // 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,43 +256,53 @@ 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: {
-                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 },
-                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);
-            }
+        const dateMeta = this.getDateMeta(props.date, dateEnv, props.dateProfile, props.todayRange);
+        const baseClassName = joinClassNames(props.borderStart ? classNames.borderOnlyS : classNames.borderNone, props.width != null ? '' : classNames.liquid, classNames.flexCol);
+        const hasNavLink = options.navLinks;
+        const renderProps = this.refineRenderProps({
+            date: props.date,
+            isMajor: props.isMajor,
+            isNarrow: props.isNarrow,
+            dateMeta: dateMeta,
+            hasLabel: props.showDayNumber,
+            hasMonthLabel: isMonthStart,
+            hasNavLink,
+            renderProps: props.renderProps,
+            viewApi: context.viewApi,
+            dateEnv: context.dateEnv,
+            monthStartFormat: options.monthStartFormat,
+            dayCellFormat: options.dayCellFormat,
+            businessHours: Boolean(options.businessHours),
         });
-    }
-    componentWillUnmount() {
-        this.disconnectBodyHeight();
-        const { props } = this;
-        setRef(props.headerHeightRef, null);
-        setRef(props.mainHeightRef, null);
+        if (dateMeta.isDisabled) {
+            return (createElement("div", { role: 'gridcell', "aria-disabled": true, className: joinArrayishClassNames(generateClassName(options.dayCellClass, renderProps), props.className, baseClassName), style: {
+                    width: props.width
+                } }));
+        }
+        const fullDateStr = buildDateStr(context, props.date);
+        return (createElement(ContentContainer, { tag: "div", elRef: this.rootElRef, className: joinClassNames(props.className, baseClassName), attrs: Object.assign(Object.assign(Object.assign(Object.assign({}, props.attrs), { role: 'gridcell', 'aria-label': fullDateStr }), (renderProps.isToday ? { 'aria-current': 'date' } : {})), { 'data-date': formatDayString(props.date) }), style: {
+                width: props.width,
+            }, renderProps: renderProps, generatorName: "dayCellTopContent" // !!! for top
+            , customGenerator: options.dayCellTopContent /* !!! for top */, defaultGenerator: renderTopInner, classNameGenerator: options.dayCellClass, didMount: options.dayCellDidMount, willUnmount: options.dayCellWillUnmount }, (InnerContent) => (createElement(Fragment, null,
+            createElement("div", { className: joinClassNames(classNames.rel, // puts it above bg-fills, which are positioned on TOP of this component :|
+                generateClassName(options.dayCellTopClass, renderProps)) }, props.showDayNumber && (createElement(InnerContent // the dayCellTopContent
+            , { tag: 'div', attrs: hasNavLink
+                    ? buildNavLinkAttrs(context, props.date, undefined, fullDateStr)
+                    : { 'aria-hidden': true } // label already on cell
+                , className: generateClassName(options.dayCellTopInnerClass, renderProps) }))),
+            createElement("div", { className: joinClassNames(classNames.flexCol, props.fgLiquidHeight ? classNames.liquid : classNames.grow), ref: this.handleBodyEl },
+                createElement("div", { className: generateClassName(options.dayCellInnerClass, renderProps), style: { minHeight: props.fgHeight } }, props.fg),
+                createElement(DayGridMoreLink, { className: classNames.rel, allDayDate: props.date, segs: props.segs, hiddenSegs: props.hiddenSegs, alignElRef: this.rootElRef, alignParentTop: props.showDayNumber
+                        ? '[role=row]'
+                        : `.${classNames.internalView}`, dateSpanProps: props.dateSpanProps, dateProfile: props.dateProfile, eventSelection: props.eventSelection, eventDrag: props.eventDrag, eventResize: props.eventResize, todayRange: props.todayRange, isNarrow: props.isNarrow, isMicro: props.isMicro })),
+            createElement("div", { className: joinClassNames(classNames.rel, // puts it above bg-fills
+                generateClassName(options.dayCellBottomClass, renderProps)) })))));
     }
 }
 // Utils
 // -------------------------------------------------------------------------------------------------
 function renderTopInner(props) {
-    return props.dayNumberText || createElement(Fragment, null, "\u00A0");
+    return props.text || createElement(Fragment, null, "\u00A0"); // TODO: DRY?
 }
 function shouldDisplayMonthStart(date, currentRange, dateEnv) {
     const { start: currentStart, end: currentEnd } = currentRange;
@@ -261,6 +319,16 @@ function shouldDisplayMonthStart(date, currentRange, dateEnv) {
             // a month-start that's within the current range?
             (dateEnv.getDay(date) === 1 && date.valueOf() < currentEnd.valueOf()));
 }
+function refineRenderProps(raw) {
+    let { date, dateEnv, hasLabel, hasMonthLabel, hasNavLink, businessHours } = raw;
+    let [text, textParts] = hasLabel
+        ? dateEnv.format(date, hasMonthLabel ? raw.monthStartFormat : raw.dayCellFormat)
+        : ['', []];
+    return Object.assign(Object.assign(Object.assign({}, raw.dateMeta), raw.renderProps), { text,
+        textParts, isMajor: raw.isMajor, isNarrow: raw.isNarrow, inPopover: false, hasNavLink,
+        get dayNumberText() { return findDayNumberText(textParts); },
+        get monthText() { return findMonthText(textParts); }, options: { businessHours }, view: raw.viewApi });
+}
 
 function computeFgSegVerticals(segs, segHeightMap, cells, maxHeight, strictOrder, allowSlicing = true, dayMaxEvents, dayMaxEventRows) {
     let maxCoord;
@@ -383,20 +451,19 @@ function compileSegMap(segs, segMap) {
     return res;
 }
 
-/*
-TODO: move this so @fullcalendar/daygrid
-*/
-function buildDayTableModel(dateProfile, dateProfileGenerator) {
-    let daySeries = new DaySeriesModel(dateProfile.renderRange, dateProfileGenerator);
-    return new DayTableModel(daySeries, /year|month|week/.test(dateProfile.currentRangeUnit));
+function buildDayTableModel(dateProfile, dateProfileGenerator, dateEnv) {
+    const daySeries = new DaySeriesModel(dateProfile.renderRange, dateProfileGenerator);
+    const breakOnWeeks = /year|month|week/.test(dateProfile.currentRangeUnit);
+    const majorUnit = !breakOnWeeks && computeMajorUnit(dateProfile, dateEnv);
+    return new DayTableModel(daySeries, breakOnWeeks, dateEnv, majorUnit);
 }
-function computeColWidth(colCnt, colMinWidth, viewportWidth) {
+function computeColWidth(colCount, colMinWidth, viewportWidth) {
     if (viewportWidth == null) {
         return [undefined, undefined];
     }
-    const colTempWidth = viewportWidth / colCnt;
+    const colTempWidth = viewportWidth / colCount;
     if (colTempWidth < colMinWidth) {
-        return [colMinWidth * colCnt, colMinWidth];
+        return [colMinWidth * colCount, colMinWidth];
     }
     return [viewportWidth, undefined];
 }
@@ -422,29 +489,24 @@ function computeTopFromDate(date, cellRows, rowHeightMap, adjust = 0) {
 /*
 FYI, `width` is not dependable for aligning completely to farside
 */
-function computeHorizontalsFromSeg(seg, colWidth, colCnt, isRtl) {
+function computeHorizontalsFromSeg(seg, colWidth, colCount) {
     let fromStart;
     let fromEnd;
     if (colWidth != null) {
         fromStart = seg.start * colWidth;
-        fromEnd = (colCnt - seg.end) * colWidth;
+        fromEnd = (colCount - seg.end) * colWidth;
     }
     else {
-        const colWidthFrac = 1 / colCnt;
+        const colWidthFrac = 1 / colCount;
         fromStart = fracToCssDim(seg.start * colWidthFrac);
         fromEnd = fracToCssDim(1 - seg.end * colWidthFrac);
     }
-    if (isRtl) {
-        return { right: fromStart, left: fromEnd };
-    }
-    else {
-        return { left: fromStart, right: fromEnd };
-    }
+    return { insetInlineStart: fromStart, insetInlineEnd: fromEnd };
 }
-function computeColFromPosition(positionLeft, elWidth, colWidth, colCnt, isRtl) {
-    const realColWidth = colWidth != null ? colWidth : elWidth / colCnt;
+function computeColFromPosition(positionLeft, elWidth, colWidth, colCount, isRtl) {
+    const realColWidth = colWidth != null ? colWidth : elWidth / colCount;
     const colFromLeft = Math.floor(positionLeft / realColWidth);
-    const col = isRtl ? (colCnt - colFromLeft - 1) : colFromLeft;
+    const col = isRtl ? (colCount - colFromLeft - 1) : colFromLeft;
     const left = colFromLeft * realColWidth;
     const right = left + realColWidth;
     return { col, left, right };
@@ -467,13 +529,17 @@ 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
 // -------------------------------------------------------------------------------------------------
+const dayMicroWidth = 50;
+const dayHeaderMicroFormat = createFormatter({
+    weekday: 'narrow'
+});
 function createDayHeaderFormatter(explicitFormat, datesRepDistinctDays, dateCnt) {
     return explicitFormat || computeFallbackHeaderFormat(datesRepDistinctDays, dateCnt);
 }
@@ -481,13 +547,23 @@ function createDayHeaderFormatter(explicitFormat, datesRepDistinctDays, dateCnt)
 function computeFallbackHeaderFormat(datesRepDistinctDays, dayCnt) {
     // if more than one week row, or if there are a lot of columns with not much space,
     // put just the day numbers will be in each cell
-    if (!datesRepDistinctDays || dayCnt > 10) {
+    if (!datesRepDistinctDays) {
         return createFormatter({ weekday: 'short' }); // "Sat"
     }
     if (dayCnt > 1) {
-        return createFormatter({ weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true }); // "Sat 11/12"
+        return createFormatter({
+            weekday: 'short',
+            weekdayJustify: 'start',
+            day: 'numeric',
+            omitCommas: true,
+        });
     }
-    return createFormatter({ weekday: 'long' }); // "Saturday"
+    return createFormatter({
+        weekday: 'long',
+        weekdayJustify: 'start',
+        day: 'numeric',
+        omitCommas: true,
+    });
 }
 
 class DayGridEventHarness extends Component {
@@ -498,7 +574,7 @@ class DayGridEventHarness extends Component {
     }
     render() {
         const { props } = this;
-        return (createElement("div", { className: joinClassNames(props.className, 'fc-abs'), style: props.style, ref: this.rootElRef }, props.children));
+        return (createElement("div", { className: joinClassNames(props.className, classNames.abs), style: props.style, ref: this.rootElRef }, props.children));
     }
     componentDidMount() {
         const rootEl = this.rootElRef.current; // TODO: make dynamic with useEffect
@@ -528,6 +604,8 @@ class DayGridRow extends BaseComponent {
         this.segHeightRefMap = new RefMap(() => {
             afterSize(this.handleSegPositioning);
         });
+        // memo
+        this.buildWeekNumberRenderProps = memoize(buildWeekNumberRenderProps);
         this.handleRootEl = (rootEl) => {
             this.rootEl = rootEl;
             setRef(this.props.rootElRef, rootEl);
@@ -540,7 +618,7 @@ class DayGridRow extends BaseComponent {
         const { props, context, headerHeightRefMap, mainHeightRefMap } = this;
         const { cells } = props;
         const { options } = context;
-        const weekDate = props.cells[0].date;
+        const weekDateMarker = props.cells[0].date;
         const fgLiquidHeight = props.dayMaxEvents === true || props.dayMaxEventRows === true;
         // TODO: memoize? sort all types of segs?
         const fgEventSegs = sortEventSegs(props.fgEventSegs, options.eventOrder);
@@ -559,20 +637,29 @@ class DayGridRow extends BaseComponent {
         }
         const highlightSegs = this.getHighlightSegs();
         const mirrorSegs = this.getMirrorSegs();
-        const forcedInvisibleMap = // TODO: more convenient/DRY
-         (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 hasNavLink = options.navLinks;
+        const fullWeekStr = buildDateStr(context, weekDateMarker, 'week');
+        const weekNumberRenderProps = this.buildWeekNumberRenderProps(weekDateMarker, context, props.cellIsNarrow, hasNavLink);
+        return (createElement("div", { role: props.role /* !!! */, "aria-label": props.role === 'row' // HACK
+                ? fullWeekStr
+                : undefined // can't have label on non-role div
+            , className: joinArrayishClassNames(options.dayRowClass, props.className, classNames.flexRow, classNames.rel, // origin for inlineWeekNumber?
+            classNames.isolate, (props.forPrint && props.basis !== undefined) && // basis implies siblings (must share height)
+                classNames.printSiblingRow), style: {
+                'flex-basis': props.basis,
             }, ref: this.handleRootEl },
+            (props.showWeekNumbers && !props.cellIsMicro) && (createElement(ContentContainer, { tag: 'div', attrs: Object.assign(Object.assign({}, (hasNavLink
+                    ? buildNavLinkAttrs(context, weekDateMarker, 'week', fullWeekStr, /* isTabbable = */ false)
+                    : {})), { 'role': undefined, 'aria-hidden': true }), 
+                // put above all cells (TODO: put explicit z0 on each cell?)
+                className: classNames.z1, renderProps: weekNumberRenderProps, generatorName: "inlineWeekNumberContent", customGenerator: options.inlineWeekNumberContent, defaultGenerator: renderText, classNameGenerator: options.inlineWeekNumberClass, didMount: options.inlineWeekNumberDidMount, willUnmount: options.inlineWeekNumberWillUnmount })),
             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) => {
-                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), 
+            props.cells.map((cell, col) => {
+                const normalFgNodes = this.renderFgSegs(maxMainTop, renderableSegsByCol[col], segTops, props.todayRange, 
+                /* isMirror = */ false);
+                return (createElement(DayGridCell, { key: cell.key, dateProfile: props.dateProfile, todayRange: props.todayRange, date: cell.date, isMajor: cell.isMajor, showDayNumber: props.showDayNumbers, isNarrow: props.cellIsNarrow, isMicro: props.cellIsMicro, borderStart: Boolean(col), 
                     // content
                     segs: segsByCol[col], hiddenSegs: hiddenSegsByCol[col], fgLiquidHeight: fgLiquidHeight, fg: (createElement(Fragment, null, normalFgNodes)), eventDrag: props.eventDrag, eventResize: props.eventResize, eventSelection: props.eventSelection, 
                     // render hooks
@@ -581,19 +668,16 @@ 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)));
+            }),
+            this.renderFgSegs(maxMainTop, mirrorSegs, segTops, props.todayRange, 
+            /* isMirror = */ true)));
     }
-    renderFgSegs(headerHeight, segs, segTops, todayRange, forcedInvisibleMap, isDragging, isResizing, isDateSelecting) {
+    renderFgSegs(headerHeight, segs, segTops, todayRange, isMirror) {
         var _a;
-        const { props, context, segHeightRefMap } = this;
-        const { isRtl } = context;
-        const { colWidth, eventSelection } = props;
-        const colCnt = props.cells.length;
+        const { props, segHeightRefMap } = this;
+        const { colWidth, eventSelection, cellIsMicro } = props;
+        const colCount = props.cells.length;
         const defaultDisplayEventEnd = props.cells.length === 1;
-        const isMirror = isDragging || isResizing || isDateSelecting;
         const nodes = [];
         for (const seg of segs) {
             const key = getEventPartKey(seg);
@@ -602,39 +686,43 @@ class DayGridRow extends BaseComponent {
             if (standinFor) {
                 continue;
             }
-            const { left, right } = computeHorizontalsFromSeg(seg, colWidth, colCnt, isRtl);
+            const { insetInlineStart, insetInlineEnd } = computeHorizontalsFromSeg(seg, colWidth, colCount);
             const localTop = (_a = segTops.get(standinFor ? getEventPartKey(standinFor) : key)) !== null && _a !== void 0 ? _a : (isMirror ? 0 : undefined);
             const top = headerHeight != null && localTop != null
                 ? headerHeight + localTop
                 : undefined;
-            const isInvisible = standinFor || forcedInvisibleMap[instanceId] || top == null;
-            nodes.push(createElement(DayGridEventHarness, { key: key, className: seg.start ? 'fc-border-transparent fc-border-s' : '', style: {
-                    visibility: isInvisible ? 'hidden' : '',
+            const isDragging = Boolean(props.eventDrag && props.eventDrag.affectedInstances[instanceId]);
+            const isResizing = Boolean(props.eventResize && props.eventResize.affectedInstances[instanceId]);
+            const isInvisible = !isMirror && (isDragging || isResizing || standinFor || top == null);
+            const isListItem = hasListItemDisplay(seg);
+            nodes.push(createElement(DayGridEventHarness, { key: key, className: seg.start ? classNames.fakeBorderS : '', style: {
+                    visibility: isInvisible ? 'hidden' : undefined,
                     top,
-                    left,
-                    right,
+                    insetInlineStart,
+                    insetInlineEnd,
+                    zIndex: 0, // container inner z-indexes
                 }, heightRef: (!standinFor && !isMirror)
                     ? segHeightRefMap.createRef(key)
-                    : null }, hasListItemDisplay(seg) ? (createElement(DayGridListEvent, Object.assign({ eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: isDragging, isSelected: instanceId === eventSelection, defaultDisplayEventEnd: defaultDisplayEventEnd }, getEventRangeMeta(eventRange, todayRange)))) : (createElement(DayGridBlockEvent, Object.assign({ eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: isDragging, isResizing: isResizing, isDateSelecting: isDateSelecting, isSelected: instanceId === eventSelection, defaultDisplayEventEnd: defaultDisplayEventEnd }, getEventRangeMeta(eventRange, todayRange))))));
+                    : null },
+                createElement(StandardEvent, Object.assign({ display: isListItem ? 'list-item' : 'row', eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: isDragging, isResizing: isResizing, isMirror: isMirror, isSelected: instanceId === eventSelection, isNarrow: props.cellIsNarrow, defaultTimeFormat: DEFAULT_TABLE_EVENT_TIME_FORMAT, defaultDisplayEventEnd: defaultDisplayEventEnd, disableResizing: isListItem, forcedTimeText: cellIsMicro ? '' : undefined }, getEventRangeMeta(eventRange, todayRange)))));
         }
         return nodes;
     }
     renderFillSegs(segs, fillType) {
         const { props, context } = this;
-        const { isRtl } = context;
         const { todayRange, colWidth } = props;
-        const colCnt = props.cells.length;
+        const colCount = props.cells.length;
         const nodes = [];
         for (const seg of segs) {
             const key = buildEventRangeKey(seg.eventRange); // TODO: use different type of key than fg!?
-            const { left, right } = computeHorizontalsFromSeg(seg, colWidth, colCnt, isRtl);
+            const { insetInlineStart, insetInlineEnd } = computeHorizontalsFromSeg(seg, colWidth, colCount);
             const isVisible = !seg.standinFor;
-            nodes.push(createElement("div", { key: key, className: "fc-fill-y", style: {
+            nodes.push(createElement("div", { key: key, className: classNames.fillY, style: {
                     visibility: isVisible ? '' : 'hidden',
-                    left,
-                    right,
+                    insetInlineStart,
+                    insetInlineEnd,
                 } }, fillType === 'bg-event' ?
-                createElement(BgEvent, Object.assign({ eventRange: seg.eventRange, isStart: seg.isStart, isEnd: seg.isEnd }, getEventRangeMeta(seg.eventRange, todayRange))) : (renderFill(fillType))));
+                createElement(BgEvent, Object.assign({ eventRange: seg.eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isNarrow: props.cellIsNarrow, isVertical: false }, getEventRangeMeta(seg.eventRange, todayRange))) : (renderFill(fillType, context.options))));
         }
         return createElement(Fragment, {}, ...nodes); // TODO: shouldn't this be an array, so keyed?
     }
@@ -698,6 +786,22 @@ class DayGridRow extends BaseComponent {
         return props.dateSelectionSegs;
     }
 }
+// Utils
+// -------------------------------------------------------------------------------------------------
+function buildWeekNumberRenderProps(weekDateMarker, context, isNarrow, hasNavLink) {
+    const { dateEnv, options } = context;
+    const weekNum = dateEnv.computeWeekNumber(weekDateMarker);
+    const [weekNumText, weekNumTextParts] = dateEnv.format(weekDateMarker, options.weekNumberFormat || DEFAULT_WEEK_NUM_FORMAT);
+    const weekDateZoned = dateEnv.toDate(weekDateMarker);
+    return {
+        num: weekNum,
+        text: weekNumText,
+        textParts: weekNumTextParts,
+        date: weekDateZoned,
+        isNarrow,
+        hasNavLink,
+    };
+}
 
 class DayGridRows extends DateComponent {
     constructor() {
@@ -733,45 +837,36 @@ class DayGridRows extends DateComponent {
     render() {
         let { props, context, rowHeightRefMap } = this;
         let { options } = context;
-        let rowCnt = props.cellRows.length;
-        let fgEventSegsByRow = this.splitFgEventSegs(props.fgEventSegs, rowCnt);
-        let bgEventSegsByRow = this.splitBgEventSegs(props.bgEventSegs, rowCnt);
-        let businessHourSegsByRow = this.splitBusinessHourSegs(props.businessHourSegs, rowCnt);
-        let dateSelectionSegsByRow = this.splitDateSelectionSegs(props.dateSelectionSegs, rowCnt);
-        let eventDragByRow = this.splitEventDrag(props.eventDrag, rowCnt);
-        let eventResizeByRow = this.splitEventResize(props.eventResize, rowCnt);
+        let rowCount = props.cellRows.length;
+        let fgEventSegsByRow = this.splitFgEventSegs(props.fgEventSegs, rowCount);
+        let bgEventSegsByRow = this.splitBgEventSegs(props.bgEventSegs, rowCount);
+        let businessHourSegsByRow = this.splitBusinessHourSegs(props.businessHourSegs, rowCount);
+        let dateSelectionSegsByRow = this.splitDateSelectionSegs(props.dateSelectionSegs, rowCount);
+        let eventDragByRow = this.splitEventDrag(props.eventDrag, rowCount);
+        let eventResizeByRow = this.splitEventResize(props.eventResize, rowCount);
         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, rowCount, isHeightAuto, options);
+        return (createElement("div", { role: 'rowgroup', className: joinClassNames(props.className, 
             // 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 && classNames.flexCol), 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, cellIsNarrow: props.cellIsNarrow, cellIsMicro: props.cellIsMicro, showDayNumbers: rowCount > 1, showWeekNumbers: rowCount > 1 && options.weekNumbers, forPrint: props.forPrint, 
             // 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
-            row < rowCnt - 1 && 'fc-border-b'), 
+            className: joinClassNames(rowHeightsRedistribute && classNames.grow, rowCount > 1 && classNames.breakInsideAvoid, // don't avoid breaks for single tall row
+            row < rowCount - 1 ? classNames.borderOnlyB : classNames.borderNone), 
             // 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) {
-        const { props, context } = this;
-        const colCnt = props.cellRows[0].length;
-        const { col, left, right } = computeColFromPosition(positionLeft, elWidth, props.colWidth, colCnt, context.isRtl);
+    queryHit(isRtl, positionLeft, positionTop, elWidth) {
+        const { props } = this;
+        const colCount = props.cellRows[0].length;
+        const { col, left, right } = computeColFromPosition(positionLeft, elWidth, props.colWidth, colCount, isRtl);
         const { row, top, bottom } = computeRowFromPosition(positionTop, props.cellRows, this.rowHeightRefMap.current);
         const cell = props.cellRows[row][col];
         const cellStartDate = cell.date;
@@ -782,8 +877,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,40 +893,41 @@ 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
+rowCount, 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 (rowCount > 6 || isHeightAuto) ? rowBasis : 0;
     }
-    return [undefined, false];
+    return 0;
 }
 
 class DayGridHeaderCell extends BaseComponent {
     constructor() {
         super(...arguments);
         this.handleInnerEl = (innerEl) => {
-            if (this.disconectInnerHeight) {
-                this.disconectInnerHeight();
-                this.disconectInnerHeight = undefined;
+            if (this.disconnectSize) {
+                this.disconnectSize();
+                this.disconnectSize = undefined;
             }
             if (innerEl) {
-                this.disconectInnerHeight = watchHeight(innerEl, (height) => {
+                this.disconnectSize = watchSize(innerEl, (width, height) => {
                     setRef(this.props.innerHeightRef, height);
+                    /*
+                    TODO: DRY with TimelineHeaderCell
+                    */
+                    if (this.align === 'center' && this.isSticky) {
+                        this.setState({ innerWidth: width });
+                    }
                 });
             }
             else {
@@ -841,16 +936,54 @@ class DayGridHeaderCell extends BaseComponent {
         };
     }
     render() {
-        const { props } = this;
+        const { props, state, context } = 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;
+        const finalRenderProps = Object.assign(Object.assign({}, dataConfig.renderProps), { isNarrow: props.cellIsNarrow, level: props.rowLevel });
+        if (props.cellIsMicro) {
+            // TODO: only if not distinct dates
+            const [microText, microTextParts] = context.dateEnv.format(dataConfig.dateMarker, dayHeaderMicroFormat);
+            finalRenderProps.text = finalRenderProps.weekdayText = microText;
+            finalRenderProps.textParts = microTextParts;
+        }
+        /*
+        TODO: DRY with TimelineHeaderCell
+        */
+        const alignInput = renderConfig.align;
+        const align = this.align =
+            typeof alignInput === 'function'
+                ? alignInput({ level: props.rowLevel, inPopover: dataConfig.renderProps.inPopover, isNarrow: props.cellIsNarrow })
+                : alignInput;
+        const stickyInput = renderConfig.sticky;
+        const isSticky = this.isSticky =
+            props.rowLevel && stickyInput !== false;
+        let edgeCoord;
+        if (isSticky) {
+            if (align === 'center') {
+                if (state.innerWidth != null) {
+                    edgeCoord = `calc(50% - ${state.innerWidth / 2}px)`;
+                }
+            }
+            else {
+                edgeCoord = (typeof stickyInput === 'number' ||
+                    typeof stickyInput === 'string') ? stickyInput : 0;
+            }
+        }
+        return (createElement(ContentContainer, { tag: 'div', attrs: Object.assign({ role: 'columnheader', 'aria-colspan': dataConfig.colSpan }, dataConfig.attrs), className: joinClassNames(dataConfig.className, classNames.tight, classNames.flexCol, props.borderStart ? classNames.borderOnlyS : classNames.borderNone, align === 'center' ? classNames.alignCenter :
+                align === 'end' ? classNames.alignEnd :
+                    classNames.alignStart, props.colWidth == null && classNames.liquid, !isSticky && classNames.crop), style: {
                 width: props.colWidth != null
                     ? props.colWidth * (dataConfig.colSpan || 1)
                     : undefined,
-            }, renderProps: dataConfig.renderProps, generatorName: renderConfig.generatorName, customGenerator: renderConfig.customGenerator, defaultGenerator: renderText, classNameGenerator: 
+            }, renderProps: finalRenderProps, 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("div", { ref: this.handleInnerEl, className: joinClassNames(classNames.flexCol, classNames.rigid, isSticky && classNames.sticky), style: {
+                left: edgeCoord,
+                right: edgeCoord,
+            } },
+            createElement(InnerContainer, { tag: 'div', attrs: dataConfig.innerAttrs, className: generateClassName(renderConfig.innerClassNameGenerator, finalRenderProps) })))));
     }
 }
 
@@ -874,8 +1007,14 @@ 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 })))));
+        const { props, context } = this;
+        const { options } = context;
+        return (createElement("div", { role: props.role /* !!! */, "aria-rowindex": props.rowIndex != null ? 1 + props.rowIndex : undefined, className: joinArrayishClassNames(options.dayHeaderRowClass, props.className, classNames.flexRow, classNames.contentBox, props.borderBottom ? classNames.borderOnlyB : classNames.borderNone), style: {
+                height: props.height,
+            } }, props.dataConfigs.map((dataConfig, cellI) => (createElement(DayGridHeaderCell, { key: dataConfig.key, renderConfig: props.renderConfig, dataConfig: dataConfig, borderStart: Boolean(cellI), colWidth: props.colWidth, innerHeightRef: this.innerHeightRefMap.createRef(dataConfig.key), cellIsNarrow: props.cellIsNarrow, cellIsMicro: props.cellIsMicro, rowLevel: props.rowLevel })))));
+    }
+    componentWillUnmount() {
+        setRef(this.props.innerHeightRef, null);
     }
 }
 
@@ -885,9 +1024,10 @@ 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: {
-                width: props.width
-            } }, props.headerTiers.map((rowConfig, tierNum) => (createElement(DayGridHeaderRow, Object.assign({}, rowConfig, { key: tierNum, className: tierNum ? 'fc-border-t' : '', colWidth: props.colWidth }))))));
+        const { headerTiers } = props;
+        return (createElement("div", { role: 'rowgroup', className: joinClassNames(props.className, classNames.flexCol, props.width == null && classNames.liquid), style: {
+                width: props.width,
+            } }, headerTiers.map((rowConfig, i) => (createElement(DayGridHeaderRow, Object.assign({}, rowConfig, { key: i, role: 'row', borderBottom: i < headerTiers.length - 1, colWidth: props.colWidth, cellIsNarrow: props.cellIsNarrow, cellIsMicro: props.cellIsMicro, rowLevel: headerTiers.length - i - 1 }))))));
     }
 }
 
@@ -897,37 +1037,54 @@ 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;
+        let endScrollbarWidth = (totalWidth != null && clientWidth != null)
+            ? totalWidth - clientWidth
+            : undefined;
+        // HACK when clientWidth does NOT include body-border, compared to totalWidth
+        if (endScrollbarWidth < 3) {
+            endScrollbarWidth = 0;
+        }
         const verticalScrollbars = !props.forPrint && !getIsHeightAuto(options);
         const stickyHeaderDates = !props.forPrint && getStickyHeaderDates(options);
+        const colCount = props.cellRows[0].length;
+        const cellWidth = clientWidth != null ? clientWidth / colCount : undefined;
+        const cellIsMicro = cellWidth != null && cellWidth <= dayMicroWidth;
+        const cellIsNarrow = cellIsMicro || (cellWidth != null && cellWidth <= options.dayNarrowWidth);
         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', 
+            options.dayHeaders && (createElement("div", { className: joinClassNames(generateClassName(options.tableHeaderClass, {
+                    isSticky: stickyHeaderDates,
+                }), props.borderlessX && classNames.borderlessX, classNames.printHeader, // either flexCol or table-header-group
+                stickyHeaderDates && classNames.tableHeaderSticky) },
+                createElement("div", { className: classNames.flexRow },
+                    createElement(DayGridHeader, { headerTiers: props.headerTiers, cellIsNarrow: cellIsNarrow, cellIsMicro: cellIsMicro }),
+                    Boolean(endScrollbarWidth) && (createElement("div", { className: joinArrayishClassNames(generateClassName(options.fillerClass, { isHeader: true }), classNames.borderOnlyS), style: { minWidth: endScrollbarWidth } }))),
+                createElement("div", { className: generateClassName(options.dayHeaderDividerClass, {
+                        isSticky: stickyHeaderDates,
+                        options: { allDaySlot: Boolean(options.allDaySlot) },
+                    }) }))),
+            createElement(Scroller, { vertical: verticalScrollbars, className: joinArrayishClassNames(options.tableBodyClass, props.borderlessX && classNames.borderlessX, stickyHeaderDates && classNames.borderlessTop, (stickyHeaderDates || props.noEdgeEffects) && classNames.noEdgeEffects, 
                 // 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 },
-                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, 
+                !props.forPrint && classNames.flexCol, verticalScrollbars && classNames.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: classNames.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, cellIsNarrow: cellIsNarrow, cellIsMicro: cellIsMicro, 
                     // refs
-                    rowHeightRefMap: props.rowHeightRefMap }))));
+                    rowHeightRefMap: props.rowHeightRefMap })),
+            createElement(Ruler, { widthRef: this.handleTotalWidth })));
     }
 }
 
@@ -939,43 +1096,54 @@ 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 colCount = props.cellRows[0].length;
+        const [canvasWidth, colWidth] = computeColWidth(colCount, props.dayMinWidth, clientWidth);
+        const cellIsMicro = colWidth != null && colWidth <= dayMicroWidth;
+        const cellIsNarrow = cellIsMicro || (colWidth != null && colWidth <= options.dayNarrowWidth);
         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 },
-                    createElement(DayGridHeader, { headerTiers: props.headerTiers, colWidth: colWidth, width: canvasWidth }),
-                    Boolean(state.endScrollbarWidth) && (createElement("div", { className: 'fc-border-s fc-filler', style: { minWidth: state.endScrollbarWidth } }))))),
+            options.dayHeaders && (createElement("div", { className: joinClassNames(generateClassName(options.tableHeaderClass, {
+                    isSticky: stickyHeaderDates,
+                }), props.borderlessX && classNames.borderlessX, classNames.printHeader, // either flexCol or table-header-group
+                stickyHeaderDates && classNames.tableHeaderSticky) },
+                createElement(Scroller, { horizontal: true, hideScrollbars: true, className: classNames.flexRow, ref: this.headerScrollerRef },
+                    createElement(DayGridHeader, { headerTiers: props.headerTiers, colWidth: colWidth, width: canvasWidth, cellIsNarrow: cellIsNarrow, cellIsMicro: cellIsMicro }),
+                    Boolean(endScrollbarWidth) && (createElement("div", { className: joinArrayishClassNames(generateClassName(options.fillerClass, { isHeader: true }), classNames.borderOnlyS), style: { minWidth: endScrollbarWidth } }))),
+                createElement("div", { className: generateClassName(options.dayHeaderDividerClass, {
+                        isSticky: stickyHeaderDates,
+                        options: { allDaySlot: Boolean(options.allDaySlot) },
+                    }) }))),
             createElement(Scroller, { vertical: verticalScrollbars, horizontal: true, hideScrollbars: stickyFooterScrollbar ||
                     props.forPrint // prevents blank space in print-view on Safari
-                , className: joinClassNames('fc-daygrid-body', 
+                , className: joinArrayishClassNames(options.tableBodyClass, props.borderlessX && classNames.borderlessX, stickyHeaderDates && classNames.borderlessTop, (stickyHeaderDates || props.noEdgeEffects) && classNames.noEdgeEffects, 
                 // 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 },
-                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, 
+                !props.forPrint && classNames.flexCol, verticalScrollbars && classNames.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: classNames.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, cellIsNarrow: cellIsNarrow, cellIsMicro: cellIsMicro, 
                     // 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 +1198,30 @@ 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: joinArrayishClassNames(props.className, classNames.printRoot, // either flexCol or table
+            options.tableClass), borderlessX: props.borderlessX, borderlessTop: props.borderlessTop, borderlessBottom: props.borderlessBottom, noEdgeEffects: props.noEdgeEffects }, 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 +1229,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 });
     }
@@ -1077,18 +1253,19 @@ class DayGridView extends BaseComponent {
     }
     render() {
         const { props, context } = this;
-        const { options } = context;
-        const dayTableModel = this.buildDayTableModel(props.dateProfile, context.dateProfileGenerator);
-        const datesRepDistinctDays = dayTableModel.rowCnt === 1;
-        const dayHeaderFormat = this.createDayHeaderFormatter(context.options.dayHeaderFormat, datesRepDistinctDays, dayTableModel.colCnt);
-        const slicedProps = this.slicer.sliceProps(props, props.dateProfile, options.nextDayThreshold, context, dayTableModel);
+        const { dateProfile } = props;
+        const { options, dateEnv } = context;
+        const dayTableModel = this.buildDayTableModel(dateProfile, context.dateProfileGenerator, dateEnv);
+        const datesRepDistinctDays = dayTableModel.rowCount === 1;
+        const dayHeaderFormat = this.createDayHeaderFormatter(context.options.dayHeaderFormat, datesRepDistinctDays, dayTableModel.colCount);
+        const slicedProps = this.slicer.sliceProps(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', 
+            const headerTiers = this.buildDateRowConfigs(dayTableModel.headerDates, datesRepDistinctDays, dateProfile, todayRange, dayHeaderFormat, context);
+            return (createElement(DayGridLayout, { labelId: props.labelId, labelStr: props.labelStr, dateProfile: dateProfile, todayRange: todayRange, cellRows: dayTableModel.cellRows, forPrint: props.forPrint, className: props.className, 
                 // header content
                 headerTiers: headerTiers, 
                 // body content
-                fgEventSegs: slicedProps.fgEventSegs, bgEventSegs: slicedProps.bgEventSegs, businessHourSegs: slicedProps.businessHourSegs, dateSelectionSegs: slicedProps.dateSelectionSegs, eventDrag: slicedProps.eventDrag, eventResize: slicedProps.eventResize, eventSelection: slicedProps.eventSelection }));
+                fgEventSegs: slicedProps.fgEventSegs, bgEventSegs: slicedProps.bgEventSegs, businessHourSegs: slicedProps.businessHourSegs, dateSelectionSegs: slicedProps.dateSelectionSegs, eventDrag: slicedProps.eventDrag, eventResize: slicedProps.eventResize, eventSelection: slicedProps.eventSelection, borderlessX: props.borderlessX, borderlessTop: props.borderlessTop, borderlessBottom: props.borderlessBottom, noEdgeEffects: props.noEdgeEffects }));
         }));
     }
 }
@@ -1124,14 +1301,11 @@ function buildDayTableRenderRange(props) {
         // TODO: instead of these date-math gymnastics (for multimonth view),
         // compute dateprofiles of all months, then use start of first and end of last.
         let lastMonthRenderStart = dateEnv.startOfWeek(dateEnv.startOfMonth(addDays(currentRange.end, -1)));
-        let rowCnt = Math.ceil(// could be partial weeks due to hiddenDays
+        let rowCount = Math.ceil(// could be partial weeks due to hiddenDays
         diffWeeks(lastMonthRenderStart, end));
-        end = addWeeks(end, 6 - rowCnt);
+        end = addWeeks(end, 6 - rowCount);
     }
     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}";
-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, createDayHeaderFormatter, dayHeaderMicroFormat, dayMicroWidth, getCellEl, getRowEl };