@fullcalendar/daygrid 7.0.0-beta.4 → 7.0.0-beta.6

package/{index.global.js → global.js}

@@ -1,11 +1,15 @@
 /*!
-FullCalendar Day Grid Plugin v7.0.0-beta.4
+FullCalendar Day Grid Plugin v7.0.0-beta.6
 Docs & License: https://fullcalendar.io/docs/month-view
-(c) 2024 Adam Shaw
+(c) 2025 Adam Shaw
 */
-FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
+FullCalendar.DayGrid = (function (exports, core, internal$1, preact, classNames) {
     'use strict';
 
+    function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+    var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
     class DayTableSlicer extends internal$1.Slicer {
         constructor() {
             super(...arguments);
@@ -21,20 +25,31 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
     // but can share some of the same types/utils
     // Date Cells
     // -------------------------------------------------------------------------------------------------
-    const WEEKDAY_FORMAT = internal$1.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 = internal$1.computeMajorUnit(dateProfile, context.dateEnv);
+        // HACK mutate isMajor
+        if (datesRepDistinctDays) {
+            for (const dataConfig of rowConfig.dataConfigs) {
+                if (internal$1.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)
         };
     }
     /*
@@ -46,42 +61,60 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
         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,
         };
     }
+    const dowDates = [];
+    for (let dow = 0; dow < 7; dow++) {
+        dowDates.push(internal$1.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 = '') {
+    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 = internal$1.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 fullDateStr = internal$1.buildDateStr(context, date);
+            ? dateMarkers.map((dateMarker, i) => {
+                const dateMeta = internal$1.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 internal$1.findWeekdayText(textParts); },
+                    get dayNumberText() { return datesRepDistinctDays ? internal$1.findDayNumberText(textParts) : ''; },
+                    isMajor, isNarrow: false, isSticky: false, inPopover: false, level: 0, // HACK. gets overridden
+                    hasNavLink, view: viewApi });
+                const fullDateStr = internal$1.buildDateStr(context, dateMarker);
                 // for DayGridHeaderCell
                 return {
-                    key: keyPrefix + date.toUTCString(),
+                    key: keyPrefix + dateMarker.toUTCString(),
+                    dateMarker,
                     renderProps,
-                    attrs: Object.assign(Object.assign({ 'aria-label': fullDateStr }, (dateMeta.isToday ? { 'aria-current': 'date' } : {})), { 'data-date': internal$1.formatDayString(date) }),
+                    attrs: Object.assign(Object.assign(Object.assign({ 'aria-label': fullDateStr }, (dateMeta.isToday ? { 'aria-current': 'date' } : {})), { 'data-date': internal$1.formatDayString(dateMarker) }), extraAttrs),
                     // for navlink
-                    innerAttrs: isNavLink
-                        ? internal$1.buildNavLinkAttrs(context, date, undefined, fullDateStr)
+                    innerAttrs: hasNavLink
+                        ? internal$1.buildNavLinkAttrs(context, dateMarker, undefined, fullDateStr)
                         : { 'aria-hidden': true },
                     colSpan,
-                    isNavLink,
-                    className: internal$1.getDayClassName(dateMeta),
+                    hasNavLink,
+                    className,
                 };
             })
-            : dates.map((date) => {
-                const dow = date.getUTCDay();
+            : dateMarkers.map((dateMarker, i) => {
+                const dow = dateMarker.getUTCDay();
                 const normDate = internal$1.addDays(firstSunday, dow);
-                const dayMeta = {
+                const dateMeta = {
+                    date: dateEnv.toDate(dateMarker),
                     dow,
                     isDisabled: false,
                     isFuture: false,
@@ -89,22 +122,25 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
                     isToday: false,
                     isOther: false,
                 };
-                const text = dateEnv.format(normDate, dayHeaderFormat);
-                const renderProps = Object.assign(Object.assign({}, dayMeta), { date, view: viewApi, text });
-                const fullWeekDayStr = dateEnv.format(normDate, WEEKDAY_FORMAT);
+                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 internal$1.findWeekdayText(textParts); },
+                    get dayNumberText() { return datesRepDistinctDays ? internal$1.findDayNumberText(textParts) : ''; } }), extraRenderProps);
+                const fullWeekDayStr = dateEnv.format(normDate, internal$1.WEEKDAY_ONLY_FORMAT)[0];
                 // for DayGridHeaderCell
                 return {
                     key: keyPrefix + String(dow),
+                    dateMarker,
                     renderProps,
-                    attrs: {
-                        'aria-label': fullWeekDayStr,
-                    },
-                    // for navlink
+                    attrs: Object.assign({ 'aria-label': fullWeekDayStr }, extraAttrs),
+                    // NOT a navlink
                     innerAttrs: {
                         'aria-hidden': true, // label already on cell
                     },
                     colSpan,
-                    className: internal$1.getDayClassName(dayMeta),
+                    className,
                 };
             });
     }
@@ -120,9 +156,9 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
     }
     // 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) {
@@ -130,15 +166,15 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
         }
         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,
@@ -171,58 +207,29 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
         );
     }
 
-    class DayGridBlockEvent extends internal$1.BaseComponent {
-        render() {
-            let { props } = this;
-            return (preact.createElement(internal$1.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 internal$1.BaseComponent {
-        render() {
-            let { props, context } = this;
-            let { options } = context;
-            let { eventRange } = props;
-            let timeFormat = options.eventTimeFormat || DEFAULT_TABLE_EVENT_TIME_FORMAT;
-            let timeText = internal$1.buildEventRangeTimeText(timeFormat, eventRange, 
-            /* slicedStart = */ undefined, 
-            /* slicedEnd = */ undefined, props.isStart, props.isEnd, context, 
-            /* defaultDisplayEventTime = */ true, props.defaultDisplayEventEnd);
-            let [tag, attrs] = internal$1.getEventTagAndAttrs(eventRange, context);
-            return (preact.createElement(internal$1.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) {
-        return (preact.createElement(preact.Fragment, null,
-            preact.createElement("div", { className: "fc-daygrid-event-dot", style: { borderColor: renderProps.borderColor || renderProps.backgroundColor } }),
-            renderProps.timeText && (preact.createElement("div", { className: "fc-event-time" }, renderProps.timeText)),
-            preact.createElement("div", { className: "fc-event-title" }, renderProps.event.title || preact.createElement(preact.Fragment, null, "\u00A0"))));
-    }
-
     class DayGridMoreLink extends internal$1.BaseComponent {
         render() {
             let { props } = this;
-            return (preact.createElement(internal$1.MoreLinkContainer, { className: internal$1.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 (preact.createElement(preact.Fragment, null, props.segs.map((seg) => {
-                        let { eventRange } = seg;
-                        let { instanceId } = eventRange.instance;
-                        return (preact.createElement("div", { key: instanceId, style: {
-                                visibility: forcedInvisibleMap[instanceId] ? 'hidden' : '',
-                            } }, hasListItemDisplay(seg) ? (preact.createElement(DayGridListEvent, Object.assign({ eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: false, isSelected: instanceId === props.eventSelection, defaultDisplayEventEnd: false }, internal$1.getEventRangeMeta(eventRange, props.todayRange)))) : (preact.createElement(DayGridBlockEvent, Object.assign({ eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: instanceId === props.eventSelection, defaultDisplayEventEnd: false }, internal$1.getEventRangeMeta(eventRange, props.todayRange))))));
-                    })));
-                } }));
+            return (preact.createElement(internal$1.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: () => (preact.createElement(preact.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 (preact.createElement("div", { key: instanceId, style: {
+                            visibility: isInvisible ? 'hidden' : undefined,
+                        } },
+                        preact.createElement(internal$1.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 }, internal$1.getEventRangeMeta(eventRange, props.todayRange)))));
+                }))) }));
         }
     }
 
     class DayGridCell extends internal$1.DateComponent {
         constructor() {
             super(...arguments);
+            // memo
+            this.getDateMeta = internal$1.memoize(internal$1.getDateMeta);
+            this.refineRenderProps = internal$1.memoizeObjArg(refineRenderProps);
             // ref
             this.rootElRef = preact.createRef();
             this.handleBodyEl = (bodyEl) => {
@@ -256,34 +263,53 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
             // TODO: memoize this
             const isMonthStart = props.showDayNumber &&
                 shouldDisplayMonthStart(props.date, props.dateProfile.currentRange, dateEnv);
-            // TODO: memoize this
-            const dateMeta = internal$1.getDateMeta(props.date, props.todayRange, null, props.dateProfile);
-            const baseClassName = internal$1.joinClassNames('fc-daygrid-day', props.borderStart && 'fc-border-s', props.width != null ? '' : 'fc-liquid', 'fc-flex-col');
+            const dateMeta = this.getDateMeta(props.date, dateEnv, props.dateProfile, props.todayRange);
+            const baseClassName = core.joinClassNames(props.borderStart ? classNames__default["default"].borderOnlyS : classNames__default["default"].borderNone, props.width != null ? '' : classNames__default["default"].liquid, classNames__default["default"].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),
+            });
             if (dateMeta.isDisabled) {
-                return (preact.createElement("div", { role: 'gridcell', "aria-disabled": true, className: internal$1.joinClassNames(baseClassName, 'fc-day-disabled'), style: {
+                return (preact.createElement("div", { role: 'gridcell', "aria-disabled": true, className: internal$1.joinArrayishClassNames(internal$1.generateClassName(options.dayCellClass, renderProps), props.className, baseClassName), style: {
                         width: props.width
                     } }));
             }
-            const hasDayNumber = props.showDayNumber || internal$1.hasCustomDayCellContent(options);
-            const isNavLink = options.navLinks;
             const fullDateStr = internal$1.buildDateStr(context, props.date);
-            return (preact.createElement(internal$1.DayCellContainer, { tag: "div", className: internal$1.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, dateMeta: dateMeta, showDayNumber: props.showDayNumber, isMonthStart: isMonthStart }, (InnerContent) => (preact.createElement(preact.Fragment, null,
-                hasDayNumber && (preact.createElement("div", { className: "fc-daygrid-day-header" },
-                    preact.createElement(InnerContent, { tag: 'div', attrs: isNavLink
-                            ? internal$1.buildNavLinkAttrs(context, props.date, undefined, fullDateStr)
-                            : { 'aria-hidden': true } // label already on cell
-                        , className: internal$1.joinClassNames('fc-daygrid-day-number', isMonthStart && 'fc-daygrid-month-start') }))),
-                preact.createElement("div", { className: internal$1.joinClassNames('fc-daygrid-day-body', props.isTall && 'fc-daygrid-day-body-tall', props.fgLiquidHeight ? 'fc-liquid' : 'fc-grow'), ref: this.handleBodyEl },
-                    preact.createElement("div", { className: 'fc-daygrid-day-events', style: { height: props.fgHeight } }, props.fg),
-                    preact.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 }))))));
+            return (preact.createElement(internal$1.ContentContainer, { tag: "div", elRef: this.rootElRef, className: core.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': internal$1.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) => (preact.createElement(preact.Fragment, null,
+                preact.createElement("div", { className: core.joinClassNames(classNames__default["default"].rel, // puts it above bg-fills, which are positioned on TOP of this component :|
+                    internal$1.generateClassName(options.dayCellTopClass, renderProps)) }, props.showDayNumber && (preact.createElement(InnerContent // the dayCellTopContent
+                , { tag: 'div', attrs: hasNavLink
+                        ? internal$1.buildNavLinkAttrs(context, props.date, undefined, fullDateStr)
+                        : { 'aria-hidden': true } // label already on cell
+                    , className: internal$1.generateClassName(options.dayCellTopInnerClass, renderProps) }))),
+                preact.createElement("div", { className: core.joinClassNames(classNames__default["default"].flexCol, props.fgLiquidHeight ? classNames__default["default"].liquid : classNames__default["default"].grow), ref: this.handleBodyEl },
+                    preact.createElement("div", { className: internal$1.generateClassName(options.dayCellInnerClass, renderProps), style: { minHeight: props.fgHeight } }, props.fg),
+                    preact.createElement(DayGridMoreLink, { className: classNames__default["default"].rel, allDayDate: props.date, segs: props.segs, hiddenSegs: props.hiddenSegs, alignElRef: this.rootElRef, alignParentTop: props.showDayNumber
+                            ? '[role=row]'
+                            : `.${classNames__default["default"].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 })),
+                preact.createElement("div", { className: core.joinClassNames(classNames__default["default"].rel, // puts it above bg-fills
+                    internal$1.generateClassName(options.dayCellBottomClass, renderProps)) })))));
         }
     }
     // Utils
     // -------------------------------------------------------------------------------------------------
     function renderTopInner(props) {
-        return props.dayNumberText || preact.createElement(preact.Fragment, null, "\u00A0");
+        return props.text || preact.createElement(preact.Fragment, null, "\u00A0"); // TODO: DRY?
     }
     function shouldDisplayMonthStart(date, currentRange, dateEnv) {
         const { start: currentStart, end: currentEnd } = currentRange;
@@ -300,6 +326,16 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
                 // 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 internal$1.findDayNumberText(textParts); },
+            get monthText() { return internal$1.findMonthText(textParts); }, options: { businessHours }, view: raw.viewApi });
+    }
 
     function computeFgSegVerticals(segs, segHeightMap, cells, maxHeight, strictOrder, allowSlicing = true, dayMaxEvents, dayMaxEventRows) {
         let maxCoord;
@@ -422,20 +458,19 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
         return res;
     }
 
-    /*
-    TODO: move this so @fullcalendar/daygrid
-    */
-    function buildDayTableModel(dateProfile, dateProfileGenerator) {
-        let daySeries = new internal$1.DaySeriesModel(dateProfile.renderRange, dateProfileGenerator);
-        return new internal$1.DayTableModel(daySeries, /year|month|week/.test(dateProfile.currentRangeUnit));
+    function buildDayTableModel(dateProfile, dateProfileGenerator, dateEnv) {
+        const daySeries = new internal$1.DaySeriesModel(dateProfile.renderRange, dateProfileGenerator);
+        const breakOnWeeks = /year|month|week/.test(dateProfile.currentRangeUnit);
+        const majorUnit = !breakOnWeeks && internal$1.computeMajorUnit(dateProfile, dateEnv);
+        return new internal$1.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];
     }
@@ -461,29 +496,24 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
     /*
     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 = internal$1.fracToCssDim(seg.start * colWidthFrac);
             fromEnd = internal$1.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 };
@@ -506,13 +536,17 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
     // 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 = internal$1.createFormatter({
+        weekday: 'narrow'
+    });
     function createDayHeaderFormatter(explicitFormat, datesRepDistinctDays, dateCnt) {
         return explicitFormat || computeFallbackHeaderFormat(datesRepDistinctDays, dateCnt);
     }
@@ -520,13 +554,23 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
     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 internal$1.createFormatter({ weekday: 'short' }); // "Sat"
         }
         if (dayCnt > 1) {
-            return internal$1.createFormatter({ weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true }); // "Sat 11/12"
+            return internal$1.createFormatter({
+                weekday: 'short',
+                weekdayJustify: 'start',
+                day: 'numeric',
+                omitCommas: true,
+            });
         }
-        return internal$1.createFormatter({ weekday: 'long' }); // "Saturday"
+        return internal$1.createFormatter({
+            weekday: 'long',
+            weekdayJustify: 'start',
+            day: 'numeric',
+            omitCommas: true,
+        });
     }
 
     class DayGridEventHarness extends preact.Component {
@@ -537,7 +581,7 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
         }
         render() {
             const { props } = this;
-            return (preact.createElement("div", { className: internal$1.joinClassNames(props.className, 'fc-abs'), style: props.style, ref: this.rootElRef }, props.children));
+            return (preact.createElement("div", { className: core.joinClassNames(props.className, classNames__default["default"].abs), style: props.style, ref: this.rootElRef }, props.children));
         }
         componentDidMount() {
             const rootEl = this.rootElRef.current; // TODO: make dynamic with useEffect
@@ -567,6 +611,8 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
             this.segHeightRefMap = new internal$1.RefMap(() => {
                 internal$1.afterSize(this.handleSegPositioning);
             });
+            // memo
+            this.buildWeekNumberRenderProps = internal$1.memoize(buildWeekNumberRenderProps);
             this.handleRootEl = (rootEl) => {
                 this.rootEl = rootEl;
                 internal$1.setRef(this.props.rootElRef, rootEl);
@@ -579,7 +625,7 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
             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 = internal$1.sortEventSegs(props.fgEventSegs, options.eventOrder);
@@ -598,24 +644,29 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
             }
             const highlightSegs = this.getHighlightSegs();
             const mirrorSegs = this.getMirrorSegs();
-            const forcedInvisibleMap = // TODO: more convenient/DRY
-             (props.eventDrag && props.eventDrag.affectedInstances) ||
-                (props.eventResize && props.eventResize.affectedInstances) ||
-                {};
-            const isNavLink = options.navLinks;
-            const fullWeekStr = internal$1.buildDateStr(context, weekDate, 'week');
+            const hasNavLink = options.navLinks;
+            const fullWeekStr = internal$1.buildDateStr(context, weekDateMarker, 'week');
+            const weekNumberRenderProps = this.buildWeekNumberRenderProps(weekDateMarker, context, props.cellIsNarrow, hasNavLink);
             return (preact.createElement("div", { role: props.role /* !!! */, "aria-label": props.role === 'row' // HACK
                     ? fullWeekStr
                     : undefined // can't have label on non-role div
-                , className: internal$1.joinClassNames('fc-flex-row fc-rel', props.className), style: {
-                    minHeight: props.minHeight,
+                , className: internal$1.joinArrayishClassNames(options.dayRowClass, props.className, classNames__default["default"].flexRow, classNames__default["default"].rel, // origin for inlineWeekNumber?
+                classNames__default["default"].isolate, (props.forPrint && props.basis !== undefined) && // basis implies siblings (must share height)
+                    classNames__default["default"].printSiblingRow), style: {
+                    'flex-basis': props.basis,
                 }, ref: this.handleRootEl },
+                (props.showWeekNumbers && !props.cellIsMicro) && (preact.createElement(internal$1.ContentContainer, { tag: 'div', attrs: Object.assign(Object.assign({}, (hasNavLink
+                        ? internal$1.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__default["default"].z1, renderProps: weekNumberRenderProps, generatorName: "inlineWeekNumberContent", customGenerator: options.inlineWeekNumberContent, defaultGenerator: internal$1.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'),
-                preact.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 (preact.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 (preact.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: (preact.createElement(preact.Fragment, null, normalFgNodes)), eventDrag: props.eventDrag, eventResize: props.eventResize, eventSelection: props.eventSelection, 
                         // render hooks
@@ -624,21 +675,16 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
                         fgHeight: heightsByCol[col], width: props.colWidth, 
                         // refs
                         headerHeightRef: headerHeightRefMap.createRef(cell.key), mainHeightRef: mainHeightRefMap.createRef(cell.key) }));
-                })),
-                props.showWeekNumbers && (preact.createElement(internal$1.WeekNumberContainer, { tag: 'div', attrs: Object.assign(Object.assign({}, (isNavLink
-                        ? internal$1.buildNavLinkAttrs(context, weekDate, 'week', fullWeekStr, /* isTabbable = */ false)
-                        : {})), { 'role': undefined, 'aria-hidden': true }), className: 'fc-daygrid-week-number', date: weekDate, defaultFormat: DEFAULT_WEEK_NUM_FORMAT })),
-                this.renderFgSegs(maxMainTop, mirrorSegs, segTops, props.todayRange, {}, // forcedInvisibleMap
-                Boolean(props.eventDrag), Boolean(props.eventResize), false)));
-        }
-        renderFgSegs(headerHeight, segs, segTops, todayRange, forcedInvisibleMap, isDragging, isResizing, isDateSelecting) {
+                }),
+                this.renderFgSegs(maxMainTop, mirrorSegs, segTops, props.todayRange, 
+                /* isMirror = */ true)));
+        }
+        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);
@@ -647,39 +693,43 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
                 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(preact.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(preact.createElement(DayGridEventHarness, { key: key, className: seg.start ? classNames__default["default"].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) ? (preact.createElement(DayGridListEvent, Object.assign({ eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: isDragging, isSelected: instanceId === eventSelection, defaultDisplayEventEnd: defaultDisplayEventEnd }, internal$1.getEventRangeMeta(eventRange, todayRange)))) : (preact.createElement(DayGridBlockEvent, Object.assign({ eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: isDragging, isResizing: isResizing, isDateSelecting: isDateSelecting, isSelected: instanceId === eventSelection, defaultDisplayEventEnd: defaultDisplayEventEnd }, internal$1.getEventRangeMeta(eventRange, todayRange))))));
+                        : null },
+                    preact.createElement(internal$1.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 }, internal$1.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 = internal$1.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(preact.createElement("div", { key: key, className: "fc-fill-y", style: {
+                nodes.push(preact.createElement("div", { key: key, className: classNames__default["default"].fillY, style: {
                         visibility: isVisible ? '' : 'hidden',
-                        left,
-                        right,
+                        insetInlineStart,
+                        insetInlineEnd,
                     } }, fillType === 'bg-event' ?
-                    preact.createElement(internal$1.BgEvent, Object.assign({ eventRange: seg.eventRange, isStart: seg.isStart, isEnd: seg.isEnd }, internal$1.getEventRangeMeta(seg.eventRange, todayRange))) : (internal$1.renderFill(fillType))));
+                    preact.createElement(internal$1.BgEvent, Object.assign({ eventRange: seg.eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isNarrow: props.cellIsNarrow, isVertical: false }, internal$1.getEventRangeMeta(seg.eventRange, todayRange))) : (internal$1.renderFill(fillType, context.options))));
             }
             return preact.createElement(preact.Fragment, {}, ...nodes); // TODO: shouldn't this be an array, so keyed?
         }
@@ -743,6 +793,22 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
             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 internal$1.DateComponent {
         constructor() {
@@ -778,45 +844,36 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
         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 = internal$1.getIsHeightAuto(options);
             let rowHeightsRedistribute = !props.forPrint && !isHeightAuto;
-            let [rowMinHeight, isCompact] = computeRowHeight(props.visibleWidth, rowCnt, isHeightAuto, props.forPrint, options);
-            return (preact.createElement("div", { role: 'rowgroup', className: internal$1.joinClassNames(
+            let rowBasis = computeRowBasis(props.visibleWidth, rowCount, isHeightAuto, options);
+            return (preact.createElement("div", { role: 'rowgroup', className: core.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) => (preact.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, 
+                !props.forPrint && classNames__default["default"].flexCol), style: { width: props.width }, ref: this.handleRootEl }, props.cellRows.map((cells, row) => (preact.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: internal$1.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: core.joinClassNames(rowHeightsRedistribute && classNames__default["default"].grow, rowCount > 1 && classNames__default["default"].breakInsideAvoid, // don't avoid breaks for single tall row
+                row < rowCount - 1 ? classNames__default["default"].borderOnlyB : classNames__default["default"].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 = internal$1.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;
@@ -827,8 +884,7 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
                         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,
@@ -844,40 +900,41 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
     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 internal$1.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 = internal$1.watchHeight(innerEl, (height) => {
+                    this.disconnectSize = internal$1.watchSize(innerEl, (width, height) => {
                         internal$1.setRef(this.props.innerHeightRef, height);
+                        /*
+                        TODO: DRY with TimelineHeaderCell
+                        */
+                        if (this.align === 'center' && this.isSticky) {
+                            this.setState({ innerWidth: width });
+                        }
                     });
                 }
                 else {
@@ -886,18 +943,54 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
             };
         }
         render() {
-            const { props } = this;
+            const { props, state, context } = this;
             const { renderConfig, dataConfig } = props;
             // HACK
             const isDisabled = dataConfig.renderProps.isDisabled;
-            return (preact.createElement(internal$1.ContentContainer, { tag: 'div', attrs: Object.assign({ role: 'columnheader', 'aria-colspan': dataConfig.colSpan }, dataConfig.attrs), className: internal$1.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: {
+            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 (preact.createElement(internal$1.ContentContainer, { tag: 'div', attrs: Object.assign({ role: 'columnheader', 'aria-colspan': dataConfig.colSpan }, dataConfig.attrs), className: core.joinClassNames(dataConfig.className, classNames__default["default"].tight, classNames__default["default"].flexCol, props.borderStart ? classNames__default["default"].borderOnlyS : classNames__default["default"].borderNone, align === 'center' ? classNames__default["default"].alignCenter :
+                    align === 'end' ? classNames__default["default"].alignEnd :
+                        classNames__default["default"].alignStart, props.colWidth == null && classNames__default["default"].liquid, !isSticky && classNames__default["default"].crop), style: {
                     width: props.colWidth != null
                         ? props.colWidth * (dataConfig.colSpan || 1)
                         : undefined,
-                }, renderProps: dataConfig.renderProps, generatorName: renderConfig.generatorName, customGenerator: renderConfig.customGenerator, defaultGenerator: internal$1.renderText, classNameGenerator: 
+                }, renderProps: finalRenderProps, generatorName: renderConfig.generatorName, customGenerator: renderConfig.customGenerator, defaultGenerator: internal$1.renderText, classNameGenerator: 
                 // don't use custom classNames if disabled
                 // TODO: make DRY with DayCellContainer
-                isDisabled ? undefined : renderConfig.classNameGenerator, didMount: renderConfig.didMount, willUnmount: renderConfig.willUnmount }, (InnerContainer) => (preact.createElement(InnerContainer, { tag: 'div', attrs: dataConfig.innerAttrs, className: internal$1.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) => (preact.createElement("div", { ref: this.handleInnerEl, className: core.joinClassNames(classNames__default["default"].flexCol, classNames__default["default"].rigid, isSticky && classNames__default["default"].sticky), style: {
+                    left: edgeCoord,
+                    right: edgeCoord,
+                } },
+                preact.createElement(InnerContainer, { tag: 'div', attrs: dataConfig.innerAttrs, className: internal$1.generateClassName(renderConfig.innerClassNameGenerator, finalRenderProps) })))));
         }
     }
 
@@ -921,8 +1014,14 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
             };
         }
         render() {
-            const { props } = this;
-            return (preact.createElement("div", { role: props.role /* !!! */, "aria-rowindex": props.rowIndex != null ? 1 + props.rowIndex : undefined, className: internal$1.joinClassNames('fc-flex-row fc-content-box', props.className), style: { height: props.height } }, props.dataConfigs.map((dataConfig, cellI) => (preact.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 (preact.createElement("div", { role: props.role /* !!! */, "aria-rowindex": props.rowIndex != null ? 1 + props.rowIndex : undefined, className: internal$1.joinArrayishClassNames(options.dayHeaderRowClass, props.className, classNames__default["default"].flexRow, classNames__default["default"].contentBox, props.borderBottom ? classNames__default["default"].borderOnlyB : classNames__default["default"].borderNone), style: {
+                    height: props.height,
+                } }, props.dataConfigs.map((dataConfig, cellI) => (preact.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() {
+            internal$1.setRef(this.props.innerHeightRef, null);
         }
     }
 
@@ -932,9 +1031,10 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
     class DayGridHeader extends internal$1.BaseComponent {
         render() {
             const { props } = this;
-            return (preact.createElement("div", { role: 'rowgroup', className: internal$1.joinClassNames(props.className, 'fc-flex-col', props.width == null && 'fc-liquid'), style: {
-                    width: props.width
-                } }, props.headerTiers.map((rowConfig, tierNum) => (preact.createElement(DayGridHeaderRow, Object.assign({}, rowConfig, { key: tierNum, role: 'row', className: tierNum ? 'fc-border-t' : '', colWidth: props.colWidth }))))));
+            const { headerTiers } = props;
+            return (preact.createElement("div", { role: 'rowgroup', className: core.joinClassNames(props.className, classNames__default["default"].flexCol, props.width == null && classNames__default["default"].liquid), style: {
+                    width: props.width,
+                } }, headerTiers.map((rowConfig, i) => (preact.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 }))))));
         }
     }
 
@@ -944,37 +1044,54 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
             this.handleScroller = (scroller) => {
                 internal$1.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 && !internal$1.getIsHeightAuto(options);
             const stickyHeaderDates = !props.forPrint && internal$1.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 (preact.createElement(preact.Fragment, null,
-                options.dayHeaders && (preact.createElement("div", { className: internal$1.joinClassNames(props.forPrint ? 'fc-print-header' : 'fc-flex-row', // col for print, row for screen
-                    'fc-border-b') },
-                    preact.createElement(DayGridHeader, { headerTiers: props.headerTiers, className: internal$1.joinClassNames('fc-daygrid-header', stickyHeaderDates && 'fc-table-header-sticky') }),
-                    Boolean(state.endScrollbarWidth) && (preact.createElement("div", { className: 'fc-border-s fc-filler', style: { minWidth: state.endScrollbarWidth } })))),
-                preact.createElement(internal$1.Scroller, { vertical: verticalScrollbars, clientWidthRef: this.handleClientWidth, endScrollbarWidthRef: this.handleEndScrollbarWidth, className: internal$1.joinClassNames('fc-daygrid-body', 
+                options.dayHeaders && (preact.createElement("div", { className: core.joinClassNames(internal$1.generateClassName(options.tableHeaderClass, {
+                        isSticky: stickyHeaderDates,
+                    }), props.borderlessX && classNames__default["default"].borderlessX, classNames__default["default"].printHeader, // either flexCol or table-header-group
+                    stickyHeaderDates && classNames__default["default"].tableHeaderSticky) },
+                    preact.createElement("div", { className: classNames__default["default"].flexRow },
+                        preact.createElement(DayGridHeader, { headerTiers: props.headerTiers, cellIsNarrow: cellIsNarrow, cellIsMicro: cellIsMicro }),
+                        Boolean(endScrollbarWidth) && (preact.createElement("div", { className: internal$1.joinArrayishClassNames(internal$1.generateClassName(options.fillerClass, { isHeader: true }), classNames__default["default"].borderOnlyS), style: { minWidth: endScrollbarWidth } }))),
+                    preact.createElement("div", { className: internal$1.generateClassName(options.dayHeaderDividerClass, {
+                            isSticky: stickyHeaderDates,
+                            options: { allDaySlot: Boolean(options.allDaySlot) },
+                        }) }))),
+                preact.createElement(internal$1.Scroller, { vertical: verticalScrollbars, className: internal$1.joinArrayishClassNames(options.tableBodyClass, props.borderlessX && classNames__default["default"].borderlessX, stickyHeaderDates && classNames__default["default"].borderlessTop, (stickyHeaderDates || props.noEdgeEffects) && classNames__default["default"].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 },
-                    preact.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__default["default"].flexCol, verticalScrollbars && classNames__default["default"].liquid), ref: this.handleScroller, clientWidthRef: this.handleClientWidth },
+                    preact.createElement(DayGridRows, { dateProfile: props.dateProfile, todayRange: props.todayRange, cellRows: props.cellRows, forPrint: props.forPrint, isHitComboAllowed: props.isHitComboAllowed, className: classNames__default["default"].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 })),
+                preact.createElement(internal$1.Ruler, { widthRef: this.handleTotalWidth })));
         }
     }
 
@@ -986,43 +1103,54 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
             this.footerScrollerRef = preact.createRef();
             // Sizing
             // -----------------------------------------------------------------------------------------------
+            this.handleTotalWidth = (totalWidth) => {
+                this.setState({ totalWidth });
+            };
             this.handleClientWidth = (clientWidth) => {
                 this.setState({ clientWidth });
             };
-            this.handleEndScrollbarWidth = (endScrollbarWidth) => {
-                this.setState({ endScrollbarWidth });
-            };
         }
         render() {
             const { props, state, context } = this;
             const { options } = context;
+            const { totalWidth, clientWidth } = state;
+            const endScrollbarWidth = (totalWidth != null && clientWidth != null)
+                ? totalWidth - clientWidth
+                : undefined;
             const verticalScrollbars = !props.forPrint && !internal$1.getIsHeightAuto(options);
             const stickyHeaderDates = !props.forPrint && internal$1.getStickyHeaderDates(options);
             const stickyFooterScrollbar = !props.forPrint && internal$1.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 (preact.createElement(preact.Fragment, null,
-                options.dayHeaders && (preact.createElement("div", { className: 'fc-print-header' },
-                    preact.createElement(internal$1.Scroller, { horizontal: true, hideScrollbars: true, className: internal$1.joinClassNames('fc-daygrid-header fc-flex-row fc-border-b', stickyHeaderDates && 'fc-table-header-sticky'), ref: this.headerScrollerRef },
-                        preact.createElement(DayGridHeader, { headerTiers: props.headerTiers, colWidth: colWidth, width: canvasWidth }),
-                        Boolean(state.endScrollbarWidth) && (preact.createElement("div", { className: 'fc-border-s fc-filler', style: { minWidth: state.endScrollbarWidth } }))))),
+                options.dayHeaders && (preact.createElement("div", { className: core.joinClassNames(internal$1.generateClassName(options.tableHeaderClass, {
+                        isSticky: stickyHeaderDates,
+                    }), props.borderlessX && classNames__default["default"].borderlessX, classNames__default["default"].printHeader, // either flexCol or table-header-group
+                    stickyHeaderDates && classNames__default["default"].tableHeaderSticky) },
+                    preact.createElement(internal$1.Scroller, { horizontal: true, hideScrollbars: true, className: classNames__default["default"].flexRow, ref: this.headerScrollerRef },
+                        preact.createElement(DayGridHeader, { headerTiers: props.headerTiers, colWidth: colWidth, width: canvasWidth, cellIsNarrow: cellIsNarrow, cellIsMicro: cellIsMicro }),
+                        Boolean(endScrollbarWidth) && (preact.createElement("div", { className: internal$1.joinArrayishClassNames(internal$1.generateClassName(options.fillerClass, { isHeader: true }), classNames__default["default"].borderOnlyS), style: { minWidth: endScrollbarWidth } }))),
+                    preact.createElement("div", { className: internal$1.generateClassName(options.dayHeaderDividerClass, {
+                            isSticky: stickyHeaderDates,
+                            options: { allDaySlot: Boolean(options.allDaySlot) },
+                        }) }))),
                 preact.createElement(internal$1.Scroller, { vertical: verticalScrollbars, horizontal: true, hideScrollbars: stickyFooterScrollbar ||
                         props.forPrint // prevents blank space in print-view on Safari
-                    , className: internal$1.joinClassNames('fc-daygrid-body', 
+                    , className: internal$1.joinArrayishClassNames(options.tableBodyClass, props.borderlessX && classNames__default["default"].borderlessX, stickyHeaderDates && classNames__default["default"].borderlessTop, (stickyHeaderDates || props.noEdgeEffects) && classNames__default["default"].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 },
-                    preact.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__default["default"].flexCol, verticalScrollbars && classNames__default["default"].liquid), ref: this.bodyScrollerRef, clientWidthRef: this.handleClientWidth },
+                    preact.createElement(DayGridRows, { dateProfile: props.dateProfile, todayRange: props.todayRange, cellRows: props.cellRows, forPrint: props.forPrint, isHitComboAllowed: props.isHitComboAllowed, className: classNames__default["default"].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) && (preact.createElement(internal$1.StickyFooterScrollbar, { canvasWidth: canvasWidth, scrollerRef: this.footerScrollerRef }))));
+                Boolean(stickyFooterScrollbar) && (preact.createElement(internal$1.FooterScrollbar, { isSticky: true, canvasWidth: canvasWidth, scrollerRef: this.footerScrollerRef })),
+                preact.createElement(internal$1.Ruler, { widthRef: this.handleTotalWidth })));
         }
         // Lifecycle
         // -----------------------------------------------------------------------------------------------
@@ -1077,7 +1205,7 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
                     }
                 }
             };
-            this.handleScrollEnd = ({ isUser }) => {
+            this.handleScrollEnd = (isUser) => {
                 if (isUser) {
                     this.scrollDate = null;
                 }
@@ -1093,7 +1221,8 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
                     'aria-colcount': props.cellRows[0].length,
                     'aria-labelledby': props.labelId,
                     'aria-label': props.labelStr,
-                }, className: internal$1.joinClassNames(props.className, 'fc-print-root fc-border') }, options.dayMinWidth ? (preact.createElement(DayGridLayoutPannable, Object.assign({}, commonLayoutProps, { dayMinWidth: options.dayMinWidth }))) : (preact.createElement(DayGridLayoutNormal, Object.assign({}, commonLayoutProps)))));
+                }, className: internal$1.joinArrayishClassNames(props.className, classNames__default["default"].printRoot, // either flexCol or table
+                options.tableClass), borderlessX: props.borderlessX, borderlessTop: props.borderlessTop, borderlessBottom: props.borderlessBottom, noEdgeEffects: props.noEdgeEffects }, options.dayMinWidth ? (preact.createElement(DayGridLayoutPannable, Object.assign({}, commonLayoutProps, { dayMinWidth: options.dayMinWidth }))) : (preact.createElement(DayGridLayoutNormal, Object.assign({}, commonLayoutProps)))));
         }
         // Lifecycle
         // -----------------------------------------------------------------------------------------------
@@ -1131,18 +1260,19 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
         }
         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 (preact.createElement(internal$1.NowTimer, { unit: "day" }, (nowDate, todayRange) => {
-                const headerTiers = this.buildDateRowConfigs(dayTableModel.headerDates, datesRepDistinctDays, props.dateProfile, todayRange, dayHeaderFormat, context);
-                return (preact.createElement(DayGridLayout, { labelId: props.labelId, labelStr: props.labelStr, 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 (preact.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 }));
             }));
         }
     }
@@ -1178,19 +1308,26 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
             // 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(internal$1.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
             internal$1.diffWeeks(lastMonthRenderStart, end));
-            end = internal$1.addWeeks(end, 6 - rowCnt);
+            end = internal$1.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}";
-    internal$1.injectStyles(css_248z);
+    const OPTION_REFINERS = {
+        dayHeaders: Boolean,
+        dayHeaderFormat: internal$1.createFormatter,
+    };
+    const OPTION_DEFAULTS = {
+        dayHeaders: true,
+    };
 
     var plugin = core.createPlugin({
         name: '@fullcalendar/daygrid',
         initialView: 'dayGridMonth',
+        optionRefiners: OPTION_REFINERS,
+        optionDefaults: OPTION_DEFAULTS,
         views: {
             dayGrid: {
                 component: DayGridView,
@@ -1228,8 +1365,10 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
         buildDateRenderConfig: buildDateRenderConfig,
         buildDateDataConfigs: buildDateDataConfigs,
         createDayHeaderFormatter: createDayHeaderFormatter,
+        dayHeaderMicroFormat: dayHeaderMicroFormat,
+        dayMicroWidth: dayMicroWidth,
         DayGridLayout: DayGridLayout,
-        computeRowHeight: computeRowHeight,
+        computeRowBasis: computeRowBasis,
         DayGridRow: DayGridRow,
         DayGridRows: DayGridRows,
         buildDayTableModel: buildDayTableModel,
@@ -1248,4 +1387,4 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
 
     return exports;
 
-})({}, FullCalendar, FullCalendar.Internal, FullCalendar.Preact);
+})({}, FullCalendar, FullCalendar.Internal, FullCalendar.Preact, FullCalendar.InternalClassNames);