@fullcalendar/daygrid 6.1.14 → 7.0.0-beta.0

package/internal.cjs

@@ -5,128 +5,251 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var internal_cjs = require('@fullcalendar/core/internal.cjs');
 var preact_cjs = require('@fullcalendar/core/preact.cjs');
 
-/* An abstract class for the daygrid views, as well as month view. Renders one or more rows of day cells.
-----------------------------------------------------------------------------------------------------------------------*/
-// It is a manager for a Table subcomponent, which does most of the heavy lifting.
-// It is responsible for managing width/height.
-class TableView extends internal_cjs.DateComponent {
+var css_248z = ":root{--fc-daygrid-event-dot-width:8px}.fc-daygrid-week-number{background-color:var(--fc-neutral-bg-color);color:var(--fc-neutral-text-color);min-width:1.5em;padding:2px;position:absolute;text-align:center;top:0;z-index:5}.fc-daygrid-cell.fc-day-today{background-color:var(--fc-today-bg-color)}.fc-daygrid-row-spacious .fc-daygrid-cell-inner{min-height:3em}.fc-daygrid-cell-header{display:flex;flex-direction:row-reverse}.fc-day-other .fc-daygrid-cell-header{opacity:.3}.fc-daygrid-cell-number{padding:4px;position:relative;z-index:4}.fc-daygrid-month-start{font-size:1.1em;font-weight:700}.fc-daygrid-cell-footer{align-items:flex-start;display:flex;flex-direction:column;font-size:.85em;margin:0 2px}.fc-daygrid-row-spacious .fc-daygrid-cell-footer{margin-bottom:1em!important}.fc-daygrid-row-compact .fc-daygrid-cell-footer{align-items:stretch}.fc-daygrid-more-link{border-radius:3px;cursor:pointer;line-height:1;margin-top:1px;max-width:100%;overflow:hidden;padding:2px;position:relative;white-space:nowrap;z-index:4}.fc-daygrid-more-link:hover{background-color:rgba(0,0,0,.1)}.fc-daygrid-row-compact .fc-daygrid-more-link{border:1px solid var(--fc-event-border-color);padding:1px}.fc-daygrid-cell .fc-non-business{z-index:1}.fc-daygrid-cell .fc-bg-event{z-index:2}.fc-daygrid-cell .fc-highlight{z-index:3}.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-top:1px;z-index:6}.fc-daygrid-event.fc-event-mirror{z-index:7}.fc-direction-ltr .fc-daygrid-event.fc-event-start,.fc-direction-rtl .fc-daygrid-event.fc-event-end{margin-left:2px}.fc-direction-ltr .fc-daygrid-event.fc-event-end,.fc-direction-rtl .fc-daygrid-event.fc-event-start{margin-right:2px}.fc-direction-ltr .fc-daygrid-event .fc-event-time{margin-right:3px}.fc-direction-rtl .fc-daygrid-event .fc-event-time{margin-left:3px}.fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-start),.fc-direction-rtl .fc-daygrid-block-event:not(.fc-event-end){border-bottom-left-radius:0;border-left-width:0;border-top-left-radius:0}.fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-end),.fc-direction-rtl .fc-daygrid-block-event:not(.fc-event-start){border-bottom-right-radius:0;border-right-width:0;border-top-right-radius:0}.fc-daygrid-block-event .fc-event-time{font-weight:700}.fc-daygrid-block-event .fc-event-time,.fc-daygrid-block-event .fc-event-title{padding:1px}.fc-daygrid-dot-event{align-items:center;direction:row;display:flex;padding:2px 0;position:relative}.fc-daygrid-dot-event.fc-event-mirror,.fc-daygrid-dot-event:hover{background:rgba(0,0,0,.1)}.fc-daygrid-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-width:0}";
+internal_cjs.injectStyles(css_248z);
+
+class DayTableSlicer extends internal_cjs.Slicer {
     constructor() {
         super(...arguments);
-        this.headerElRef = preact_cjs.createRef();
+        this.forceDayIfListItem = true;
     }
-    renderSimpleLayout(headerRowContent, bodyContent) {
-        let { props, context } = this;
-        let sections = [];
-        let stickyHeaderDates = internal_cjs.getStickyHeaderDates(context.options);
-        if (headerRowContent) {
-            sections.push({
-                type: 'header',
-                key: 'header',
-                isSticky: stickyHeaderDates,
-                chunk: {
-                    elRef: this.headerElRef,
-                    tableClassName: 'fc-col-header',
-                    rowContent: headerRowContent,
-                },
-            });
-        }
-        sections.push({
-            type: 'body',
-            key: 'body',
-            liquid: true,
-            chunk: { content: bodyContent },
+    sliceRange(dateRange, dayTableModel) {
+        return dayTableModel.sliceRange(dateRange);
+    }
+}
+
+class TableDateProfileGenerator extends internal_cjs.DateProfileGenerator {
+    // Computes the date range that will be rendered
+    buildRenderRange(currentRange, currentRangeUnit, isRangeAllDay) {
+        let renderRange = super.buildRenderRange(currentRange, currentRangeUnit, isRangeAllDay);
+        let { props } = this;
+        return buildDayTableRenderRange({
+            currentRange: renderRange,
+            snapToWeek: /^(year|month)$/.test(currentRangeUnit),
+            fixedWeekCount: props.fixedWeekCount,
+            dateEnv: props.dateEnv,
         });
-        return (preact_cjs.createElement(internal_cjs.ViewContainer, { elClasses: ['fc-daygrid'], viewSpec: context.viewSpec },
-            preact_cjs.createElement(internal_cjs.SimpleScrollGrid, { liquid: !props.isHeightAuto && !props.forPrint, collapsibleWidth: props.forPrint, cols: [] /* TODO: make optional? */, sections: sections })));
     }
-    renderHScrollLayout(headerRowContent, bodyContent, colCnt, dayMinWidth) {
-        let ScrollGrid = this.context.pluginHooks.scrollGridImpl;
-        if (!ScrollGrid) {
-            throw new Error('No ScrollGrid implementation');
+}
+function buildDayTableRenderRange(props) {
+    let { dateEnv, currentRange } = props;
+    let { start, end } = currentRange;
+    let endOfWeek;
+    // year and month views should be aligned with weeks. this is already done for week
+    if (props.snapToWeek) {
+        start = dateEnv.startOfWeek(start);
+        // make end-of-week if not already
+        endOfWeek = dateEnv.startOfWeek(end);
+        if (endOfWeek.valueOf() !== end.valueOf()) {
+            end = internal_cjs.addWeeks(endOfWeek, 1);
         }
-        let { props, context } = this;
-        let stickyHeaderDates = !props.forPrint && internal_cjs.getStickyHeaderDates(context.options);
-        let stickyFooterScrollbar = !props.forPrint && internal_cjs.getStickyFooterScrollbar(context.options);
-        let sections = [];
-        if (headerRowContent) {
-            sections.push({
-                type: 'header',
-                key: 'header',
-                isSticky: stickyHeaderDates,
-                chunks: [{
-                        key: 'main',
-                        elRef: this.headerElRef,
-                        tableClassName: 'fc-col-header',
-                        rowContent: headerRowContent,
-                    }],
-            });
+    }
+    // ensure 6 weeks
+    if (props.fixedWeekCount) {
+        // 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_cjs.addDays(currentRange.end, -1)));
+        let rowCnt = Math.ceil(// could be partial weeks due to hiddenDays
+        internal_cjs.diffWeeks(lastMonthRenderStart, end));
+        end = internal_cjs.addWeeks(end, 6 - rowCnt);
+    }
+    return { start, end };
+}
+
+function renderInner(renderProps) {
+    return renderProps.text;
+}
+function buildDayTableModel(dateProfile, dateProfileGenerator) {
+    let daySeries = new internal_cjs.DaySeriesModel(dateProfile.renderRange, dateProfileGenerator);
+    return new internal_cjs.DayTableModel(daySeries, /year|month|week/.test(dateProfile.currentRangeUnit));
+}
+function computeColWidth(colCnt, colMinWidth, viewportWidth) {
+    if (viewportWidth == null) {
+        return [undefined, undefined];
+    }
+    const colTempWidth = viewportWidth / colCnt;
+    if (colTempWidth < colMinWidth) {
+        return [colMinWidth * colCnt, colMinWidth];
+    }
+    return [viewportWidth, undefined];
+}
+function buildHeaderTiers(dates, datesRepDistinctDays) {
+    return [
+        datesRepDistinctDays
+            ? dates.map((date) => ({ colSpan: 1, date }))
+            : dates.map((date) => ({ colSpan: 1, dow: date.getUTCDay() }))
+    ];
+}
+// Positioning
+// -------------------------------------------------------------------------------------------------
+function computeTopFromDate(date, cellRows, rowHeightMap) {
+    let top = 0;
+    for (const cells of cellRows) {
+        const start = cells[0].date;
+        const end = cells[cells.length - 1].date;
+        const key = start.toISOString();
+        if (date >= start && date <= end) {
+            return top;
         }
-        sections.push({
-            type: 'body',
-            key: 'body',
-            liquid: true,
-            chunks: [{
-                    key: 'main',
-                    content: bodyContent,
-                }],
-        });
-        if (stickyFooterScrollbar) {
-            sections.push({
-                type: 'footer',
-                key: 'footer',
-                isSticky: true,
-                chunks: [{
-                        key: 'main',
-                        content: internal_cjs.renderScrollShim,
-                    }],
-            });
+        const rowHeight = rowHeightMap.get(key);
+        if (rowHeight == null) {
+            return; // denote unknown
+        }
+        top += rowHeight;
+    }
+    return top;
+}
+function computeHorizontalsFromSeg(seg, colWidth, colCnt, isRtl) {
+    let left;
+    let right;
+    let width;
+    if (colWidth != null) {
+        width = (seg.lastCol - seg.firstCol + 1) * colWidth;
+        if (isRtl) {
+            right = seg.firstCol * colWidth;
+        }
+        else {
+            left = seg.firstCol * colWidth;
+        }
+    }
+    else {
+        const colWidthFrac = 1 / colCnt;
+        width = internal_cjs.fracToCssDim((seg.lastCol - seg.firstCol + 1) * colWidthFrac);
+        if (isRtl) {
+            right = internal_cjs.fracToCssDim(seg.firstCol * colWidthFrac);
+        }
+        else {
+            left = internal_cjs.fracToCssDim(seg.firstCol * colWidthFrac);
         }
-        return (preact_cjs.createElement(internal_cjs.ViewContainer, { elClasses: ['fc-daygrid'], viewSpec: context.viewSpec },
-            preact_cjs.createElement(ScrollGrid, { liquid: !props.isHeightAuto && !props.forPrint, forPrint: props.forPrint, collapsibleWidth: props.forPrint, colGroups: [{ cols: [{ span: colCnt, minWidth: dayMinWidth }] }], sections: sections })));
     }
+    return { left, right, width };
+}
+function computeColFromPosition(positionLeft, elWidth, colWidth, colCnt, isRtl) {
+    const realColWidth = colWidth != null ? colWidth : elWidth / colCnt;
+    const colFromLeft = Math.floor(positionLeft / realColWidth);
+    const col = isRtl ? (colCnt - colFromLeft - 1) : colFromLeft;
+    const left = colFromLeft * realColWidth;
+    const right = left + realColWidth;
+    return { col, left, right };
+}
+function computeRowFromPosition(positionTop, cellRows, rowHeightMap) {
+    let row = 0;
+    let top = 0;
+    let bottom = 0;
+    for (const cells of cellRows) {
+        const key = cells[0].key;
+        top = bottom;
+        bottom = top + rowHeightMap.get(key);
+        if (positionTop < bottom) {
+            break;
+        }
+        row++;
+    }
+    return { row, top, bottom };
+}
+// Hit Element
+// -------------------------------------------------------------------------------------------------
+function getRowEl(rootEl, row) {
+    return rootEl.querySelectorAll(':scope > [role=row]')[row];
+}
+function getCellEl(rowEl, col) {
+    return rowEl.querySelectorAll(':scope > [role=gridcell]')[col];
 }
 
-function splitSegsByRow(segs, rowCnt) {
-    let byRow = [];
-    for (let i = 0; i < rowCnt; i += 1) {
-        byRow[i] = [];
+class DateHeaderCell extends internal_cjs.BaseComponent {
+    constructor() {
+        super(...arguments);
+        // ref
+        this.innerElRef = preact_cjs.createRef();
     }
-    for (let seg of segs) {
-        byRow[seg.row].push(seg);
+    render() {
+        let { props, context } = this;
+        let { dateProfile, date, extraRenderProps, extraDataAttrs } = props;
+        let { dateEnv, options, theme, viewApi } = context;
+        let dayMeta = internal_cjs.getDateMeta(date, props.todayRange, null, dateProfile);
+        let text = dateEnv.format(date, props.dayHeaderFormat);
+        let navLinkAttrs = (!dayMeta.isDisabled && props.navLink)
+            ? internal_cjs.buildNavLinkAttrs(context, date)
+            : {};
+        let renderProps = Object.assign(Object.assign(Object.assign({ date: dateEnv.toDate(date), view: viewApi }, extraRenderProps), { text }), dayMeta);
+        return (preact_cjs.createElement(internal_cjs.ContentContainer, { elTag: 'div', elClasses: [
+                ...internal_cjs.getDayClassNames(dayMeta, theme),
+                ...(props.extraClassNames || []),
+                'fc-header-cell',
+                'fc-cell',
+                props.colWidth != null ? '' : 'fc-liquid',
+                'fc-flex-column',
+                'fc-align-center',
+            ], elAttrs: Object.assign({ 'data-date': !dayMeta.isDisabled ? internal_cjs.formatDayString(date) : undefined }, extraDataAttrs), elStyle: {
+                width: props.colWidth != null // TODO: DRY
+                    ? props.colWidth * (props.colSpan || 1)
+                    : undefined,
+            }, renderProps: renderProps, generatorName: "dayHeaderContent", customGenerator: options.dayHeaderContent, defaultGenerator: renderInner, classNameGenerator: options.dayHeaderClassNames, didMount: options.dayHeaderDidMount, willUnmount: options.dayHeaderWillUnmount }, (InnerContainer) => (preact_cjs.createElement("div", { ref: this.innerElRef, className: [
+                'fc-flex-column',
+                props.isSticky ? 'fc-sticky-x' : '',
+            ].join(' ') }, !dayMeta.isDisabled && (preact_cjs.createElement(InnerContainer, { elTag: "a", elAttrs: navLinkAttrs, elClasses: [
+                'fc-cell-inner',
+                'fc-padding-sm',
+            ] }))))));
+    }
+    componentDidMount() {
+        const innerEl = this.innerElRef.current; // TODO: make dynamic with useEffect
+        // TODO: only attach this if refs props present
+        this.disconectInnerHeight = internal_cjs.watchHeight(innerEl, (height) => {
+            internal_cjs.setRef(this.props.innerHeightRef, height);
+        });
+    }
+    componentWillUnmount() {
+        this.disconectInnerHeight();
     }
-    return byRow;
 }
-function splitSegsByFirstCol(segs, colCnt) {
-    let byCol = [];
-    for (let i = 0; i < colCnt; i += 1) {
-        byCol[i] = [];
+
+function splitSegsByRow(segs, rowCnt) {
+    const byRow = [];
+    for (let row = 0; row < rowCnt; row++) {
+        byRow[row] = [];
     }
-    for (let seg of segs) {
-        byCol[seg.firstCol].push(seg);
+    for (const seg of segs) {
+        byRow[seg.row].push(seg);
     }
-    return byCol;
+    return byRow;
 }
 function splitInteractionByRow(ui, rowCnt) {
-    let byRow = [];
+    const byRow = [];
     if (!ui) {
-        for (let i = 0; i < rowCnt; i += 1) {
-            byRow[i] = null;
+        for (let row = 0; row < rowCnt; row++) {
+            byRow[row] = null;
         }
     }
     else {
-        for (let i = 0; i < rowCnt; i += 1) {
-            byRow[i] = {
+        for (let row = 0; row < rowCnt; row++) {
+            byRow[row] = {
                 affectedInstances: ui.affectedInstances,
                 isEvent: ui.isEvent,
                 segs: [],
             };
         }
-        for (let seg of ui.segs) {
+        for (const seg of ui.segs) {
             byRow[seg.row].segs.push(seg);
         }
     }
     return byRow;
 }
+function splitSegsByCol(segs, colCnt) {
+    let byCol = [];
+    for (let col = 0; col < colCnt; col++) {
+        byCol.push([]);
+    }
+    for (let seg of segs) {
+        for (let col = seg.firstCol; col <= seg.lastCol; col++) {
+            if (seg.firstCol !== col) {
+                seg = Object.assign(Object.assign({}, seg), { firstCol: col, lastCol: col, isStart: false, isEnd: seg.isEnd && seg.lastCol === col, isStandin: true });
+            }
+            byCol[col].push(seg);
+        }
+    }
+    return byCol;
+}
 
 const DEFAULT_TABLE_EVENT_TIME_FORMAT = internal_cjs.createFormatter({
     hour: 'numeric',
@@ -144,14 +267,14 @@ function hasListItemDisplay(seg) {
     );
 }
 
-class TableBlockEvent extends internal_cjs.BaseComponent {
+class DayGridBlockEvent extends internal_cjs.BaseComponent {
     render() {
         let { props } = this;
         return (preact_cjs.createElement(internal_cjs.StandardEvent, Object.assign({}, props, { elClasses: ['fc-daygrid-event', 'fc-daygrid-block-event', 'fc-h-event'], defaultTimeFormat: DEFAULT_TABLE_EVENT_TIME_FORMAT, defaultDisplayEventEnd: props.defaultDisplayEventEnd, disableResizing: !props.seg.eventRange.def.allDay })));
     }
 }
 
-class TableListItemEvent extends internal_cjs.BaseComponent {
+class DayGridListEvent extends internal_cjs.BaseComponent {
     render() {
         let { props, context } = this;
         let { options } = context;
@@ -168,80 +291,83 @@ function renderInnerContent(renderProps) {
         preact_cjs.createElement("div", { className: "fc-event-title" }, renderProps.event.title || preact_cjs.createElement(preact_cjs.Fragment, null, "\u00A0"))));
 }
 
-class TableCellMoreLink extends internal_cjs.BaseComponent {
-    constructor() {
-        super(...arguments);
-        this.compileSegs = internal_cjs.memoize(compileSegs);
-    }
+class DayGridMoreLink extends internal_cjs.BaseComponent {
     render() {
         let { props } = this;
-        let { allSegs, invisibleSegs } = this.compileSegs(props.singlePlacements);
-        return (preact_cjs.createElement(internal_cjs.MoreLinkContainer, { elClasses: ['fc-daygrid-more-link'], dateProfile: props.dateProfile, todayRange: props.todayRange, allDayDate: props.allDayDate, moreCnt: props.moreCnt, allSegs: allSegs, hiddenSegs: invisibleSegs, alignmentElRef: props.alignmentElRef, alignGridTop: props.alignGridTop, extraDateSpan: props.extraDateSpan, popoverContent: () => {
-                let isForcedInvisible = (props.eventDrag ? props.eventDrag.affectedInstances : null) ||
+        return (preact_cjs.createElement(internal_cjs.MoreLinkContainer, { elClasses: ['fc-daygrid-more-link'], dateProfile: props.dateProfile, todayRange: props.todayRange, allDayDate: props.allDayDate, segs: props.segs, hiddenSegs: props.hiddenSegs, alignmentElRef: props.alignmentElRef, alignGridTop: props.alignGridTop, extraDateSpan: props.extraDateSpan, popoverContent: () => {
+                let forcedInvisibleMap = // TODO: more convenient/DRY
+                 (props.eventDrag ? props.eventDrag.affectedInstances : null) ||
                     (props.eventResize ? props.eventResize.affectedInstances : null) ||
                     {};
-                return (preact_cjs.createElement(preact_cjs.Fragment, null, allSegs.map((seg) => {
+                return (preact_cjs.createElement(preact_cjs.Fragment, null, props.segs.map((seg) => {
                     let instanceId = seg.eventRange.instance.instanceId;
-                    return (preact_cjs.createElement("div", { className: "fc-daygrid-event-harness", key: instanceId, style: {
-                            visibility: isForcedInvisible[instanceId] ? 'hidden' : '',
-                        } }, hasListItemDisplay(seg) ? (preact_cjs.createElement(TableListItemEvent, Object.assign({ seg: seg, isDragging: false, isSelected: instanceId === props.eventSelection, defaultDisplayEventEnd: false }, internal_cjs.getSegMeta(seg, props.todayRange)))) : (preact_cjs.createElement(TableBlockEvent, Object.assign({ seg: seg, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: instanceId === props.eventSelection, defaultDisplayEventEnd: false }, internal_cjs.getSegMeta(seg, props.todayRange))))));
+                    return (preact_cjs.createElement("div", { key: instanceId, style: {
+                            visibility: forcedInvisibleMap[instanceId] ? 'hidden' : '',
+                        } }, hasListItemDisplay(seg) ? (preact_cjs.createElement(DayGridListEvent, Object.assign({ seg: seg, isDragging: false, isSelected: instanceId === props.eventSelection, defaultDisplayEventEnd: false }, internal_cjs.getSegMeta(seg, props.todayRange)))) : (preact_cjs.createElement(DayGridBlockEvent, Object.assign({ seg: seg, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: instanceId === props.eventSelection, defaultDisplayEventEnd: false }, internal_cjs.getSegMeta(seg, props.todayRange))))));
                 })));
             } }));
     }
 }
-function compileSegs(singlePlacements) {
-    let allSegs = [];
-    let invisibleSegs = [];
-    for (let placement of singlePlacements) {
-        allSegs.push(placement.seg);
-        if (!placement.isVisible) {
-            invisibleSegs.push(placement.seg);
-        }
-    }
-    return { allSegs, invisibleSegs };
-}
 
-const DEFAULT_WEEK_NUM_FORMAT = internal_cjs.createFormatter({ week: 'narrow' });
-class TableCell extends internal_cjs.DateComponent {
+class DayGridCell extends internal_cjs.DateComponent {
     constructor() {
         super(...arguments);
-        this.rootElRef = preact_cjs.createRef();
-        this.state = {
-            dayNumberId: internal_cjs.getUniqueDomId(),
-        };
-        this.handleRootEl = (el) => {
-            internal_cjs.setRef(this.rootElRef, el);
-            internal_cjs.setRef(this.props.elRef, el);
-        };
+        // ref
+        this.innerElRef = preact_cjs.createRef();
+        this.headerWrapElRef = preact_cjs.createRef();
     }
     render() {
-        let { context, props, state, rootElRef } = this;
+        let { props, context } = this;
         let { options, dateEnv } = context;
-        let { date, dateProfile } = props;
-        // TODO: memoize this?
+        // TODO: memoize this
         const isMonthStart = props.showDayNumber &&
-            shouldDisplayMonthStart(date, dateProfile.currentRange, dateEnv);
-        return (preact_cjs.createElement(internal_cjs.DayCellContainer, { elTag: "td", elRef: this.handleRootEl, elClasses: [
-                'fc-daygrid-day',
+            shouldDisplayMonthStart(props.date, props.dateProfile.currentRange, dateEnv);
+        return (preact_cjs.createElement(internal_cjs.DayCellContainer, { elTag: "div", elClasses: [
+                'fc-daygrid-cell',
+                'fc-cell',
+                props.width != null ? '' : 'fc-liquid',
+                'fc-flex-column',
                 ...(props.extraClassNames || []),
-            ], elAttrs: Object.assign(Object.assign(Object.assign({}, props.extraDataAttrs), (props.showDayNumber ? { 'aria-labelledby': state.dayNumberId } : {})), { role: 'gridcell' }), defaultGenerator: renderTopInner, date: date, dateProfile: dateProfile, todayRange: props.todayRange, showDayNumber: props.showDayNumber, isMonthStart: isMonthStart, extraRenderProps: props.extraRenderProps }, (InnerContent, renderProps) => (preact_cjs.createElement("div", { ref: props.innerElRef, className: "fc-daygrid-day-frame fc-scrollgrid-sync-inner", style: { minHeight: props.minHeight } },
-            props.showWeekNumber && (preact_cjs.createElement(internal_cjs.WeekNumberContainer, { elTag: "a", elClasses: ['fc-daygrid-week-number'], elAttrs: internal_cjs.buildNavLinkAttrs(context, date, 'week'), date: date, defaultFormat: DEFAULT_WEEK_NUM_FORMAT })),
-            !renderProps.isDisabled &&
-                (props.showDayNumber || internal_cjs.hasCustomDayCellContent(options) || props.forceDayTop) ? (preact_cjs.createElement("div", { className: "fc-daygrid-day-top" },
+            ], elAttrs: Object.assign(Object.assign({}, props.extraDataAttrs), { role: 'gridcell' }), elStyle: {
+                width: props.width
+            }, extraRenderProps: props.extraRenderProps, defaultGenerator: renderTopInner, date: props.date, dateProfile: props.dateProfile, todayRange: props.todayRange, showDayNumber: props.showDayNumber, isMonthStart: isMonthStart }, (InnerContent, renderProps) => (preact_cjs.createElement("div", { ref: this.innerElRef, className: [
+                'fc-daygrid-cell-inner',
+                props.fgLiquidHeight ? 'fc-liquid' : ''
+            ].join(' ') },
+            preact_cjs.createElement("div", { ref: this.headerWrapElRef, className: "fc-flex-column" }, !renderProps.isDisabled && (props.showDayNumber || internal_cjs.hasCustomDayCellContent(options)) && (preact_cjs.createElement("div", { className: "fc-daygrid-cell-header" },
                 preact_cjs.createElement(InnerContent, { elTag: "a", elClasses: [
-                        'fc-daygrid-day-number',
+                        'fc-daygrid-cell-number',
                         isMonthStart && 'fc-daygrid-month-start',
-                    ], elAttrs: Object.assign(Object.assign({}, internal_cjs.buildNavLinkAttrs(context, date)), { id: state.dayNumberId }) }))) : props.showDayNumber ? (
-            // for creating correct amount of space (see issue #7162)
-            preact_cjs.createElement("div", { className: "fc-daygrid-day-top", style: { visibility: 'hidden' } },
-                preact_cjs.createElement("a", { className: "fc-daygrid-day-number" }, "\u00A0"))) : undefined,
-            preact_cjs.createElement("div", { className: "fc-daygrid-day-events", ref: props.fgContentElRef },
-                props.fgContent,
-                preact_cjs.createElement("div", { className: "fc-daygrid-day-bottom", style: { marginTop: props.moreMarginTop } },
-                    preact_cjs.createElement(TableCellMoreLink, { allDayDate: date, singlePlacements: props.singlePlacements, moreCnt: props.moreCnt, alignmentElRef: rootElRef, alignGridTop: !props.showDayNumber, extraDateSpan: props.extraDateSpan, dateProfile: props.dateProfile, eventSelection: props.eventSelection, eventDrag: props.eventDrag, eventResize: props.eventResize, todayRange: props.todayRange }))),
-            preact_cjs.createElement("div", { className: "fc-daygrid-day-bg" }, props.bgContent)))));
+                    ], elAttrs: internal_cjs.buildNavLinkAttrs(context, props.date) })))),
+            preact_cjs.createElement("div", { className: "fc-daygrid-cell-main", style: {
+                    height: props.fgLiquidHeight ? '' : props.fgHeight
+                } }, props.fg),
+            preact_cjs.createElement("div", { className: "fc-daygrid-cell-footer", style: props.fgLiquidHeight
+                    ? { position: 'relative', top: props.fgHeight }
+                    : {} },
+                preact_cjs.createElement(DayGridMoreLink, { allDayDate: props.date, segs: props.segs, hiddenSegs: props.hiddenSegs, alignmentElRef: this.innerElRef, alignGridTop: !props.showDayNumber, extraDateSpan: props.extraDateSpan, dateProfile: props.dateProfile, eventSelection: props.eventSelection, eventDrag: props.eventDrag, eventResize: props.eventResize, todayRange: props.todayRange })),
+            props.bg))));
+    }
+    componentDidMount() {
+        const innerEl = this.innerElRef.current; // TODO: make dynamic with useEffect
+        const headerWrapEl = this.headerWrapElRef.current; // "
+        // TODO: only attach this if refs props present
+        this.detachInnerHeight = internal_cjs.watchHeight(innerEl, (height) => {
+            internal_cjs.setRef(this.props.innerHeightRef, height);
+        });
+        this.detachHeaderHeight = internal_cjs.watchHeight(headerWrapEl, (height) => {
+            internal_cjs.setRef(this.props.headerHeightRef, height);
+        });
+    }
+    componentWillUnmount() {
+        this.detachInnerHeight();
+        this.detachHeaderHeight();
+        internal_cjs.setRef(this.props.innerHeightRef, null);
+        internal_cjs.setRef(this.props.headerHeightRef, null);
     }
 }
+// Utils
+// -------------------------------------------------------------------------------------------------
 function renderTopInner(props) {
     return props.dayNumberText || preact_cjs.createElement(preact_cjs.Fragment, null, "\u00A0");
 }
@@ -261,26 +387,43 @@ function shouldDisplayMonthStart(date, currentRange, dateEnv) {
             (dateEnv.getDay(date) === 1 && date.valueOf() < currentEnd.valueOf()));
 }
 
-function generateSegKey(seg) {
+/*
+Unique per-START-column, good for cataloging by top
+*/
+function getSegStartId(seg) {
     return seg.eventRange.instance.instanceId + ':' + seg.firstCol;
 }
-function generateSegUid(seg) {
-    return generateSegKey(seg) + ':' + seg.lastCol;
-}
-function computeFgSegPlacement(segs, // assumed already sorted
-dayMaxEvents, dayMaxEventRows, strictOrder, segHeights, maxContentHeight, cells) {
-    let hierarchy = new DayGridSegHierarchy((segEntry) => {
-        // TODO: more DRY with generateSegUid
-        let segUid = segs[segEntry.index].eventRange.instance.instanceId +
-            ':' + segEntry.span.start +
-            ':' + (segEntry.span.end - 1);
-        // if no thickness known, assume 1 (if 0, so small it always fits)
-        return segHeights[segUid] || 1;
-    });
-    hierarchy.allowReslicing = true;
+/*
+Unique per-START-and-END-column, good for cataloging by width/height
+*/
+function getSegSpanId(seg) {
+    return getSegStartId(seg) + ':' + seg.lastCol;
+}
+function computeFgSegVerticals(segs, segHeightMap, // keyed by segSpanId
+cells, topOrigin, maxHeight, strictOrder, dayMaxEvents, dayMaxEventRows) {
+    // initialize column-based arrays
+    const colCnt = cells.length;
+    const hiddenSegsByCol = [];
+    const heightsByCol = [];
+    for (let col = 0; col < colCnt; col++) {
+        hiddenSegsByCol.push([]);
+        heightsByCol.push(0);
+    }
+    // create entries to be given to DayGridSegHierarchy
+    const segEntries = segs.map((seg, index) => ({
+        index: index,
+        seg,
+        span: {
+            start: seg.firstCol,
+            end: seg.lastCol + 1,
+        },
+    }));
+    // configure hierarchy position-generator
+    let hierarchy = new DayGridSegHierarchy((segEntry) => (segHeightMap.get(getSegSpanId(segs[segEntry.index]))));
+    hierarchy.allowReslicing = false;
     hierarchy.strictOrder = strictOrder;
     if (dayMaxEvents === true || dayMaxEventRows === true) {
-        hierarchy.maxCoord = maxContentHeight;
+        hierarchy.maxCoord = maxHeight;
         hierarchy.hiddenConsumes = true;
     }
     else if (typeof dayMaxEvents === 'number') {
@@ -290,172 +433,30 @@ dayMaxEvents, dayMaxEventRows, strictOrder, segHeights, maxContentHeight, cells)
         hierarchy.maxStackCnt = dayMaxEventRows;
         hierarchy.hiddenConsumes = true;
     }
-    // create segInputs only for segs with known heights
-    let segInputs = [];
-    let unknownHeightSegs = [];
-    for (let i = 0; i < segs.length; i += 1) {
-        let seg = segs[i];
-        let segUid = generateSegUid(seg);
-        let eventHeight = segHeights[segUid];
-        if (eventHeight != null) {
-            segInputs.push({
-                index: i,
-                span: {
-                    start: seg.firstCol,
-                    end: seg.lastCol + 1,
-                },
-            });
-        }
-        else {
-            unknownHeightSegs.push(seg);
-        }
-    }
-    let hiddenEntries = hierarchy.addSegs(segInputs);
-    let segRects = hierarchy.toRects();
-    let { singleColPlacements, multiColPlacements, leftoverMargins } = placeRects(segRects, segs, cells);
-    let moreCnts = [];
-    let moreMarginTops = [];
-    // add segs with unknown heights
-    for (let seg of unknownHeightSegs) {
-        multiColPlacements[seg.firstCol].push({
-            seg,
-            isVisible: false,
-            isAbsolute: true,
-            absoluteTop: 0,
-            marginTop: 0,
-        });
-        for (let col = seg.firstCol; col <= seg.lastCol; col += 1) {
-            singleColPlacements[col].push({
-                seg: resliceSeg(seg, col, col + 1, cells),
-                isVisible: false,
-                isAbsolute: false,
-                absoluteTop: 0,
-                marginTop: 0,
-            });
+    // compile segTops & heightsByCol
+    const hiddenSegEntries = hierarchy.addSegs(segEntries);
+    const segRects = hierarchy.toRects();
+    const segTops = {};
+    for (const segRect of segRects) {
+        const seg = segs[segRect.index];
+        segTops[getSegStartId(seg)] = topOrigin + segRect.levelCoord;
+        let { start: col, end: endCol } = segRect.span;
+        for (; col < endCol; col++) {
+            heightsByCol[col] = Math.max(heightsByCol[col], segRect.levelCoord + segRect.thickness);
         }
     }
-    // add the hidden entries
-    for (let col = 0; col < cells.length; col += 1) {
-        moreCnts.push(0);
-    }
-    for (let hiddenEntry of hiddenEntries) {
-        let seg = segs[hiddenEntry.index];
-        let hiddenSpan = hiddenEntry.span;
-        multiColPlacements[hiddenSpan.start].push({
-            seg: resliceSeg(seg, hiddenSpan.start, hiddenSpan.end, cells),
-            isVisible: false,
-            isAbsolute: true,
-            absoluteTop: 0,
-            marginTop: 0,
-        });
-        for (let col = hiddenSpan.start; col < hiddenSpan.end; col += 1) {
-            moreCnts[col] += 1;
-            singleColPlacements[col].push({
-                seg: resliceSeg(seg, col, col + 1, cells),
-                isVisible: false,
-                isAbsolute: false,
-                absoluteTop: 0,
-                marginTop: 0,
-            });
+    // compile # of invisible segs per-column
+    for (const hiddenSegEntry of hiddenSegEntries) {
+        const { span } = hiddenSegEntry;
+        const hiddenSeg = segs[hiddenSegEntry.index];
+        for (let col = span.start; col < span.end; col++) {
+            hiddenSegsByCol[col].push(hiddenSeg);
         }
     }
-    // deal with leftover margins
-    for (let col = 0; col < cells.length; col += 1) {
-        moreMarginTops.push(leftoverMargins[col]);
-    }
-    return { singleColPlacements, multiColPlacements, moreCnts, moreMarginTops };
-}
-// rects ordered by top coord, then left
-function placeRects(allRects, segs, cells) {
-    let rectsByEachCol = groupRectsByEachCol(allRects, cells.length);
-    let singleColPlacements = [];
-    let multiColPlacements = [];
-    let leftoverMargins = [];
-    for (let col = 0; col < cells.length; col += 1) {
-        let rects = rectsByEachCol[col];
-        // compute all static segs in singlePlacements
-        let singlePlacements = [];
-        let currentHeight = 0;
-        let currentMarginTop = 0;
-        for (let rect of rects) {
-            let seg = segs[rect.index];
-            singlePlacements.push({
-                seg: resliceSeg(seg, col, col + 1, cells),
-                isVisible: true,
-                isAbsolute: false,
-                absoluteTop: rect.levelCoord,
-                marginTop: rect.levelCoord - currentHeight,
-            });
-            currentHeight = rect.levelCoord + rect.thickness;
-        }
-        // compute mixed static/absolute segs in multiPlacements
-        let multiPlacements = [];
-        currentHeight = 0;
-        currentMarginTop = 0;
-        for (let rect of rects) {
-            let seg = segs[rect.index];
-            let isAbsolute = rect.span.end - rect.span.start > 1; // multi-column?
-            let isFirstCol = rect.span.start === col;
-            currentMarginTop += rect.levelCoord - currentHeight; // amount of space since bottom of previous seg
-            currentHeight = rect.levelCoord + rect.thickness; // height will now be bottom of current seg
-            if (isAbsolute) {
-                currentMarginTop += rect.thickness;
-                if (isFirstCol) {
-                    multiPlacements.push({
-                        seg: resliceSeg(seg, rect.span.start, rect.span.end, cells),
-                        isVisible: true,
-                        isAbsolute: true,
-                        absoluteTop: rect.levelCoord,
-                        marginTop: 0,
-                    });
-                }
-            }
-            else if (isFirstCol) {
-                multiPlacements.push({
-                    seg: resliceSeg(seg, rect.span.start, rect.span.end, cells),
-                    isVisible: true,
-                    isAbsolute: false,
-                    absoluteTop: rect.levelCoord,
-                    marginTop: currentMarginTop, // claim the margin
-                });
-                currentMarginTop = 0;
-            }
-        }
-        singleColPlacements.push(singlePlacements);
-        multiColPlacements.push(multiPlacements);
-        leftoverMargins.push(currentMarginTop);
-    }
-    return { singleColPlacements, multiColPlacements, leftoverMargins };
-}
-function groupRectsByEachCol(rects, colCnt) {
-    let rectsByEachCol = [];
-    for (let col = 0; col < colCnt; col += 1) {
-        rectsByEachCol.push([]);
-    }
-    for (let rect of rects) {
-        for (let col = rect.span.start; col < rect.span.end; col += 1) {
-            rectsByEachCol[col].push(rect);
-        }
-    }
-    return rectsByEachCol;
-}
-function resliceSeg(seg, spanStart, spanEnd, cells) {
-    if (seg.firstCol === spanStart && seg.lastCol === spanEnd - 1) {
-        return seg;
-    }
-    let eventRange = seg.eventRange;
-    let origRange = eventRange.range;
-    let slicedRange = internal_cjs.intersectRanges(origRange, {
-        start: cells[spanStart].date,
-        end: internal_cjs.addDays(cells[spanEnd - 1].date, 1),
-    });
-    return Object.assign(Object.assign({}, seg), { firstCol: spanStart, lastCol: spanEnd - 1, eventRange: {
-            def: eventRange.def,
-            ui: Object.assign(Object.assign({}, eventRange.ui), { durationEditable: false }),
-            instance: eventRange.instance,
-            range: slicedRange,
-        }, isStart: seg.isStart && slicedRange.start.valueOf() === origRange.start.valueOf(), isEnd: seg.isEnd && slicedRange.end.valueOf() === origRange.end.valueOf() });
+    return [segTops, heightsByCol, hiddenSegsByCol];
 }
+// DayGridSegHierarchy
+// -------------------------------------------------------------------------------------------------
 class DayGridSegHierarchy extends internal_cjs.SegHierarchy {
     constructor() {
         super(...arguments);
@@ -503,74 +504,205 @@ class DayGridSegHierarchy extends internal_cjs.SegHierarchy {
     }
 }
 
-class TableRow extends internal_cjs.DateComponent {
+class DayGridEventHarness extends preact_cjs.Component {
     constructor() {
         super(...arguments);
-        this.cellElRefs = new internal_cjs.RefMap(); // the <td>
-        this.frameElRefs = new internal_cjs.RefMap(); // the fc-daygrid-day-frame
-        this.fgElRefs = new internal_cjs.RefMap(); // the fc-daygrid-day-events
-        this.segHarnessRefs = new internal_cjs.RefMap(); // indexed by "instanceId:firstCol"
+        // ref
         this.rootElRef = preact_cjs.createRef();
-        this.state = {
-            framePositions: null,
-            maxContentHeight: null,
-            segHeights: {},
+    }
+    render() {
+        const { props } = this;
+        return (preact_cjs.createElement("div", { className: "fc-abs", style: props.style, ref: this.rootElRef }, props.children));
+    }
+    componentDidMount() {
+        const rootEl = this.rootElRef.current; // TODO: make dynamic with useEffect
+        this.detachHeight = internal_cjs.watchHeight(rootEl, (height) => {
+            internal_cjs.setRef(this.props.heightRef, height);
+        });
+    }
+    componentWillUnmount() {
+        this.detachHeight();
+    }
+}
+
+const DEFAULT_WEEK_NUM_FORMAT = internal_cjs.createFormatter({ week: 'narrow' });
+const COMPACT_CELL_WIDTH = 80;
+class DayGridRow extends internal_cjs.BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.cellInnerHeightRefMap = new internal_cjs.RefMap(() => {
+            internal_cjs.afterSize(this.handleInnerHeights);
+        });
+        this.cellHeaderHeightRefMap = new internal_cjs.RefMap(() => {
+            internal_cjs.afterSize(this.handleHeaderHeights);
+        });
+        this.segHeightRefMap = new internal_cjs.RefMap(() => {
+            internal_cjs.afterSize(this.handleSegHeights);
+        });
+        this.handleRootEl = (rootEl) => {
+            this.rootEl = rootEl;
+            internal_cjs.setRef(this.props.rootElRef, rootEl);
+        };
+        // Sizing
+        // -----------------------------------------------------------------------------------------------
+        this.handleHeaderHeights = () => {
+            const cellHeaderHeightMap = this.cellHeaderHeightRefMap.current;
+            let max = 0;
+            for (const height of cellHeaderHeightMap.values()) {
+                max = Math.max(max, height);
+            }
+            if (this.state.headerHeight !== max) {
+                this.setState({ headerHeight: max });
+            }
         };
-        this.handleResize = (isForced) => {
-            if (isForced) {
-                this.updateSizing(true); // isExternal=true
+        this.handleInnerHeights = () => {
+            const { props } = this;
+            const fgLiquidHeight = props.dayMaxEvents === true || props.dayMaxEventRows === true;
+            const cellInnerHeightMap = this.cellInnerHeightRefMap.current;
+            let max = 0;
+            for (const height of cellInnerHeightMap.values()) {
+                max = Math.max(max, height);
+            }
+            if (fgLiquidHeight) {
+                if (this.state.innerHeight !== max) {
+                    this.setState({ innerHeight: max }); // will trigger event rerender
+                }
+            }
+            else {
+                internal_cjs.setRef(props.innerHeightRef, max);
             }
         };
+        this.handleSegHeights = () => {
+            this.setState({ segHeightRev: this.segHeightRefMap.rev }); // will trigger event rerender
+        };
     }
     render() {
-        let { props, state, context } = this;
-        let { options } = context;
-        let colCnt = props.cells.length;
-        let businessHoursByCol = splitSegsByFirstCol(props.businessHourSegs, colCnt);
-        let bgEventSegsByCol = splitSegsByFirstCol(props.bgEventSegs, colCnt);
-        let highlightSegsByCol = splitSegsByFirstCol(this.getHighlightSegs(), colCnt);
-        let mirrorSegsByCol = splitSegsByFirstCol(this.getMirrorSegs(), colCnt);
-        let { singleColPlacements, multiColPlacements, moreCnts, moreMarginTops } = computeFgSegPlacement(internal_cjs.sortEventSegs(props.fgEventSegs, options.eventOrder), props.dayMaxEvents, props.dayMaxEventRows, options.eventOrderStrict, state.segHeights, state.maxContentHeight, props.cells);
-        let isForcedInvisible = // TODO: messy way to compute this
+        const { props, state, context, cellInnerHeightRefMap, cellHeaderHeightRefMap } = this;
+        const { cells } = props;
+        const { options } = context;
+        const weekDate = props.cells[0].date;
+        const colCnt = props.cells.length;
+        const fgLiquidHeight = props.dayMaxEvents === true || props.dayMaxEventRows === true;
+        // TODO: memoize? sort all types of segs?
+        const fgEventSegs = internal_cjs.sortEventSegs(props.fgEventSegs, options.eventOrder);
+        // TODO: memoize?
+        const fgEventSegsByCol = splitSegsByCol(fgEventSegs, colCnt);
+        const bgEventSegsByCol = splitSegsByCol(props.bgEventSegs, colCnt);
+        const businessHoursByCol = splitSegsByCol(props.businessHourSegs, colCnt);
+        const highlightSegsByCol = splitSegsByCol(this.getHighlightSegs(), colCnt); // TODO: doesn't need standins
+        const mirrorSegsByCol = splitSegsByCol(this.getMirrorSegs(), colCnt); // TODO: doesn't need standins
+        // TODO: memoize?
+        const [segTops, heightsByCol, hiddenSegsByCol] = computeFgSegVerticals(fgEventSegs, this.segHeightRefMap.current, cells, state.headerHeight, (fgLiquidHeight && state.innerHeight != null && state.headerHeight != null)
+            ? state.innerHeight - state.headerHeight
+            : undefined, options.eventOrderStrict, props.dayMaxEvents, props.dayMaxEventRows);
+        const forcedInvisibleMap = // TODO: more convenient/DRY
          (props.eventDrag && props.eventDrag.affectedInstances) ||
             (props.eventResize && props.eventResize.affectedInstances) ||
             {};
-        return (preact_cjs.createElement("tr", { ref: this.rootElRef, role: "row" },
-            props.renderIntro && props.renderIntro(),
+        return (preact_cjs.createElement("div", { role: props.cellGroup ? undefined : 'row', className: [
+                'fc-daygrid-row',
+                props.forceVSpacing
+                    ? 'fc-daygrid-row-spacious'
+                    : props.compact
+                        ? 'fc-daygrid-row-compact'
+                        : '',
+                props.cellGroup ? 'fc-flex-row' : 'fc-row',
+                'fc-rel',
+                props.className || '',
+            ].join(' '), style: {
+                minHeight: props.minHeight,
+            }, ref: this.handleRootEl },
             props.cells.map((cell, col) => {
-                let normalFgNodes = this.renderFgSegs(col, props.forPrint ? singleColPlacements[col] : multiColPlacements[col], props.todayRange, isForcedInvisible);
-                let mirrorFgNodes = this.renderFgSegs(col, buildMirrorPlacements(mirrorSegsByCol[col], multiColPlacements), props.todayRange, {}, Boolean(props.eventDrag), Boolean(props.eventResize), false);
-                return (preact_cjs.createElement(TableCell, { key: cell.key, elRef: this.cellElRefs.createRef(cell.key), innerElRef: this.frameElRefs.createRef(cell.key) /* FF <td> problem, but okay to use for left/right. TODO: rename prop */, dateProfile: props.dateProfile, date: cell.date, showDayNumber: props.showDayNumbers, showWeekNumber: props.showWeekNumbers && col === 0, forceDayTop: props.showWeekNumbers /* even displaying weeknum for row, not necessarily day */, todayRange: props.todayRange, eventSelection: props.eventSelection, eventDrag: props.eventDrag, eventResize: props.eventResize, extraRenderProps: cell.extraRenderProps, extraDataAttrs: cell.extraDataAttrs, extraClassNames: cell.extraClassNames, extraDateSpan: cell.extraDateSpan, moreCnt: moreCnts[col], moreMarginTop: moreMarginTops[col], singlePlacements: singleColPlacements[col], fgContentElRef: this.fgElRefs.createRef(cell.key), fgContent: ( // Fragment scopes the keys
-                    preact_cjs.createElement(preact_cjs.Fragment, null,
+                const normalFgNodes = this.renderFgSegs(fgEventSegsByCol[col], segTops, props.todayRange, forcedInvisibleMap);
+                const mirrorFgNodes = this.renderFgSegs(mirrorSegsByCol[col], segTops, props.todayRange, {}, // forcedInvisibleMap
+                Boolean(props.eventDrag), Boolean(props.eventResize), false);
+                return (preact_cjs.createElement(DayGridCell, { key: cell.key, dateProfile: props.dateProfile, todayRange: props.todayRange, date: cell.date, showDayNumber: props.showDayNumbers, 
+                    // content
+                    segs: fgEventSegsByCol[col], hiddenSegs: hiddenSegsByCol[col], fgLiquidHeight: fgLiquidHeight, fg: (preact_cjs.createElement(preact_cjs.Fragment, null,
                         preact_cjs.createElement(preact_cjs.Fragment, null, normalFgNodes),
-                        preact_cjs.createElement(preact_cjs.Fragment, null, mirrorFgNodes))), bgContent: ( // Fragment scopes the keys
-                    preact_cjs.createElement(preact_cjs.Fragment, null,
+                        preact_cjs.createElement(preact_cjs.Fragment, null, mirrorFgNodes))), bg: (preact_cjs.createElement(preact_cjs.Fragment, null,
                         this.renderFillSegs(highlightSegsByCol[col], 'highlight'),
                         this.renderFillSegs(businessHoursByCol[col], 'non-business'),
-                        this.renderFillSegs(bgEventSegsByCol[col], 'bg-event'))), minHeight: props.cellMinHeight }));
-            })));
+                        this.renderFillSegs(bgEventSegsByCol[col], 'bg-event'))), eventDrag: props.eventDrag, eventResize: props.eventResize, eventSelection: props.eventSelection, 
+                    // render hooks
+                    extraRenderProps: cell.extraRenderProps, extraDateSpan: cell.extraDateSpan, extraDataAttrs: cell.extraDataAttrs, extraClassNames: cell.extraClassNames, 
+                    // dimensions
+                    fgHeight: heightsByCol[col], width: props.colWidth, 
+                    // refs
+                    innerHeightRef: cellInnerHeightRefMap.createRef(cell.key), headerHeightRef: cellHeaderHeightRefMap.createRef(cell.key) }));
+            }),
+            props.showWeekNumbers && (preact_cjs.createElement(internal_cjs.WeekNumberContainer, { elTag: "a", elClasses: ['fc-daygrid-week-number'], elAttrs: internal_cjs.buildNavLinkAttrs(context, weekDate, 'week'), date: weekDate, defaultFormat: DEFAULT_WEEK_NUM_FORMAT }))));
+    }
+    renderFgSegs(segs, segTops, todayRange, forcedInvisibleMap, isDragging, isResizing, isDateSelecting) {
+        const { props, context, segHeightRefMap } = this;
+        const { isRtl } = context;
+        const { colWidth, eventSelection } = props;
+        const colCnt = props.cells.length;
+        const defaultDisplayEventEnd = props.cells.length === 1;
+        const isMirror = isDragging || isResizing || isDateSelecting;
+        const nodes = [];
+        for (const seg of segs) {
+            const { left, right, width } = computeHorizontalsFromSeg(seg, colWidth, colCnt, isRtl);
+            // TODO: optimize ID creation? all related
+            const { instanceId } = seg.eventRange.instance;
+            const segSpanId = getSegSpanId(seg);
+            const segStartId = getSegStartId(seg);
+            const top = segTops[segStartId];
+            const isVisible = !seg.isStandin &&
+                top != null &&
+                !forcedInvisibleMap[instanceId];
+            /*
+            TODO: is this comment still relevant? vvvvvvvv
+            known bug: events that are force to be list-item but span multiple days still take up space in later columns
+            todo: in print view, for multi-day events, don't display title within non-start/end segs
+            */
+            nodes.push(preact_cjs.createElement(DayGridEventHarness, { key: segSpanId, style: {
+                    visibility: isVisible ? '' : 'hidden',
+                    top,
+                    left,
+                    right,
+                    width,
+                }, heightRef: (isMirror || seg.isStandin)
+                    ? null
+                    : segHeightRefMap.createRef(segSpanId) }, hasListItemDisplay(seg) ? (preact_cjs.createElement(DayGridListEvent, Object.assign({ seg: seg, isDragging: isDragging, isSelected: instanceId === eventSelection, defaultDisplayEventEnd: defaultDisplayEventEnd }, internal_cjs.getSegMeta(seg, todayRange)))) : (preact_cjs.createElement(DayGridBlockEvent, Object.assign({ seg: seg, isDragging: isDragging, isResizing: isResizing, isDateSelecting: isDateSelecting, isSelected: instanceId === eventSelection, defaultDisplayEventEnd: defaultDisplayEventEnd }, internal_cjs.getSegMeta(seg, todayRange))))));
+        }
+        return nodes;
     }
-    componentDidMount() {
-        this.updateSizing(true);
-        this.context.addResizeHandler(this.handleResize);
+    renderFillSegs(segs, fillType) {
+        const { props, context } = this;
+        const { isRtl } = context;
+        const { todayRange, colWidth } = props;
+        const colCnt = props.cells.length;
+        const nodes = [];
+        for (const seg of segs) {
+            const { left, right, width } = computeHorizontalsFromSeg(seg, colWidth, colCnt, isRtl);
+            const isVisible = !seg.isStandin;
+            nodes.push(preact_cjs.createElement("div", { key: internal_cjs.buildEventRangeKey(seg.eventRange), className: "fc-fill-y", style: {
+                    visibility: isVisible ? '' : 'hidden',
+                    left,
+                    right,
+                    width,
+                } }, fillType === 'bg-event' ?
+                preact_cjs.createElement(internal_cjs.BgEvent, Object.assign({ seg: seg }, internal_cjs.getSegMeta(seg, todayRange))) :
+                internal_cjs.renderFill(fillType)));
+        }
+        return preact_cjs.createElement(preact_cjs.Fragment, {}, ...nodes);
     }
-    componentDidUpdate(prevProps, prevState) {
-        let currentProps = this.props;
-        this.updateSizing(!internal_cjs.isPropsEqual(prevProps, currentProps));
+    // Sizing
+    // -----------------------------------------------------------------------------------------------
+    componentDidMount() {
+        const { rootEl } = this; // TODO: make dynamic with useEffect
+        this.disconnectHeight = internal_cjs.watchHeight(rootEl, (contentHeight) => {
+            internal_cjs.setRef(this.props.heightRef, contentHeight);
+        });
     }
     componentWillUnmount() {
-        this.context.removeResizeHandler(this.handleResize);
-    }
-    getHighlightSegs() {
-        let { props } = this;
-        if (props.eventDrag && props.eventDrag.segs.length) { // messy check
-            return props.eventDrag.segs;
-        }
-        if (props.eventResize && props.eventResize.segs.length) { // messy check
-            return props.eventResize.segs;
-        }
-        return props.dateSelectionSegs;
+        this.disconnectHeight();
+        internal_cjs.setRef(this.props.heightRef, null);
+        internal_cjs.setRef(this.props.innerHeightRef, null);
     }
+    // Utils
+    // -----------------------------------------------------------------------------------------------
     getMirrorSegs() {
         let { props } = this;
         if (props.eventResize && props.eventResize.segs.length) { // messy check
@@ -578,420 +710,476 @@ class TableRow extends internal_cjs.DateComponent {
         }
         return [];
     }
-    renderFgSegs(col, segPlacements, todayRange, isForcedInvisible, isDragging, isResizing, isDateSelecting) {
-        let { context } = this;
-        let { eventSelection } = this.props;
-        let { framePositions } = this.state;
-        let defaultDisplayEventEnd = this.props.cells.length === 1; // colCnt === 1
-        let isMirror = isDragging || isResizing || isDateSelecting;
-        let nodes = [];
-        if (framePositions) {
-            for (let placement of segPlacements) {
-                let { seg } = placement;
-                let { instanceId } = seg.eventRange.instance;
-                let isVisible = placement.isVisible && !isForcedInvisible[instanceId];
-                let isAbsolute = placement.isAbsolute;
-                let left = '';
-                let right = '';
-                if (isAbsolute) {
-                    if (context.isRtl) {
-                        right = 0;
-                        left = framePositions.lefts[seg.lastCol] - framePositions.lefts[seg.firstCol];
-                    }
-                    else {
-                        left = 0;
-                        right = framePositions.rights[seg.firstCol] - framePositions.rights[seg.lastCol];
-                    }
-                }
-                /*
-                known bug: events that are force to be list-item but span multiple days still take up space in later columns
-                todo: in print view, for multi-day events, don't display title within non-start/end segs
-                */
-                nodes.push(preact_cjs.createElement("div", { className: 'fc-daygrid-event-harness' + (isAbsolute ? ' fc-daygrid-event-harness-abs' : ''), key: generateSegKey(seg), ref: isMirror ? null : this.segHarnessRefs.createRef(generateSegUid(seg)), style: {
-                        visibility: isVisible ? '' : 'hidden',
-                        marginTop: isAbsolute ? '' : placement.marginTop,
-                        top: isAbsolute ? placement.absoluteTop : '',
-                        left,
-                        right,
-                    } }, hasListItemDisplay(seg) ? (preact_cjs.createElement(TableListItemEvent, Object.assign({ seg: seg, isDragging: isDragging, isSelected: instanceId === eventSelection, defaultDisplayEventEnd: defaultDisplayEventEnd }, internal_cjs.getSegMeta(seg, todayRange)))) : (preact_cjs.createElement(TableBlockEvent, Object.assign({ seg: seg, isDragging: isDragging, isResizing: isResizing, isDateSelecting: isDateSelecting, isSelected: instanceId === eventSelection, defaultDisplayEventEnd: defaultDisplayEventEnd }, internal_cjs.getSegMeta(seg, todayRange))))));
-            }
-        }
-        return nodes;
-    }
-    renderFillSegs(segs, fillType) {
-        let { isRtl } = this.context;
-        let { todayRange } = this.props;
-        let { framePositions } = this.state;
-        let nodes = [];
-        if (framePositions) {
-            for (let seg of segs) {
-                let leftRightCss = isRtl ? {
-                    right: 0,
-                    left: framePositions.lefts[seg.lastCol] - framePositions.lefts[seg.firstCol],
-                } : {
-                    left: 0,
-                    right: framePositions.rights[seg.firstCol] - framePositions.rights[seg.lastCol],
-                };
-                nodes.push(preact_cjs.createElement("div", { key: internal_cjs.buildEventRangeKey(seg.eventRange), className: "fc-daygrid-bg-harness", style: leftRightCss }, fillType === 'bg-event' ?
-                    preact_cjs.createElement(internal_cjs.BgEvent, Object.assign({ seg: seg }, internal_cjs.getSegMeta(seg, todayRange))) :
-                    internal_cjs.renderFill(fillType)));
-            }
-        }
-        return preact_cjs.createElement(preact_cjs.Fragment, {}, ...nodes);
-    }
-    updateSizing(isExternalSizingChange) {
-        let { props, state, frameElRefs } = this;
-        if (!props.forPrint &&
-            props.clientWidth !== null // positioning ready?
-        ) {
-            if (isExternalSizingChange) {
-                let frameEls = props.cells.map((cell) => frameElRefs.currentMap[cell.key]);
-                if (frameEls.length) {
-                    let originEl = this.rootElRef.current;
-                    let newPositionCache = new internal_cjs.PositionCache(originEl, frameEls, true, // isHorizontal
-                    false);
-                    if (!state.framePositions || !state.framePositions.similarTo(newPositionCache)) {
-                        this.setState({
-                            framePositions: new internal_cjs.PositionCache(originEl, frameEls, true, // isHorizontal
-                            false),
-                        });
-                    }
-                }
-            }
-            const oldSegHeights = this.state.segHeights;
-            const newSegHeights = this.querySegHeights();
-            const limitByContentHeight = props.dayMaxEvents === true || props.dayMaxEventRows === true;
-            this.safeSetState({
-                // HACK to prevent oscillations of events being shown/hidden from max-event-rows
-                // Essentially, once you compute an element's height, never null-out.
-                // TODO: always display all events, as visibility:hidden?
-                segHeights: Object.assign(Object.assign({}, oldSegHeights), newSegHeights),
-                maxContentHeight: limitByContentHeight ? this.computeMaxContentHeight() : null,
-            });
-        }
-    }
-    querySegHeights() {
-        let segElMap = this.segHarnessRefs.currentMap;
-        let segHeights = {};
-        // get the max height amongst instance segs
-        for (let segUid in segElMap) {
-            let height = Math.round(segElMap[segUid].getBoundingClientRect().height);
-            segHeights[segUid] = Math.max(segHeights[segUid] || 0, height);
+    getHighlightSegs() {
+        let { props } = this;
+        if (props.eventDrag && props.eventDrag.segs.length) { // messy check
+            return props.eventDrag.segs;
         }
-        return segHeights;
-    }
-    computeMaxContentHeight() {
-        let firstKey = this.props.cells[0].key;
-        let cellEl = this.cellElRefs.currentMap[firstKey];
-        let fcContainerEl = this.fgElRefs.currentMap[firstKey];
-        return cellEl.getBoundingClientRect().bottom - fcContainerEl.getBoundingClientRect().top;
-    }
-    getCellEls() {
-        let elMap = this.cellElRefs.currentMap;
-        return this.props.cells.map((cell) => elMap[cell.key]);
-    }
-}
-TableRow.addStateEquality({
-    segHeights: internal_cjs.isPropsEqual,
-});
-function buildMirrorPlacements(mirrorSegs, colPlacements) {
-    if (!mirrorSegs.length) {
-        return [];
-    }
-    let topsByInstanceId = buildAbsoluteTopHash(colPlacements); // TODO: cache this at first render?
-    return mirrorSegs.map((seg) => ({
-        seg,
-        isVisible: true,
-        isAbsolute: true,
-        absoluteTop: topsByInstanceId[seg.eventRange.instance.instanceId],
-        marginTop: 0,
-    }));
-}
-function buildAbsoluteTopHash(colPlacements) {
-    let topsByInstanceId = {};
-    for (let placements of colPlacements) {
-        for (let placement of placements) {
-            topsByInstanceId[placement.seg.eventRange.instance.instanceId] = placement.absoluteTop;
+        if (props.eventResize && props.eventResize.segs.length) { // messy check
+            return props.eventResize.segs;
         }
+        return props.dateSelectionSegs;
     }
-    return topsByInstanceId;
 }
 
-class TableRows extends internal_cjs.DateComponent {
+class DayGridRows extends internal_cjs.DateComponent {
     constructor() {
         super(...arguments);
+        // memo
         this.splitBusinessHourSegs = internal_cjs.memoize(splitSegsByRow);
         this.splitBgEventSegs = internal_cjs.memoize(splitSegsByRow);
         this.splitFgEventSegs = internal_cjs.memoize(splitSegsByRow);
         this.splitDateSelectionSegs = internal_cjs.memoize(splitSegsByRow);
         this.splitEventDrag = internal_cjs.memoize(splitInteractionByRow);
         this.splitEventResize = internal_cjs.memoize(splitInteractionByRow);
-        this.rowRefs = new internal_cjs.RefMap();
+        // internal
+        this.rowHeightRefMap = new internal_cjs.RefMap((height, key) => {
+            // HACKy way of syncing RefMap results with prop
+            const { rowHeightRefMap } = this.props;
+            if (rowHeightRefMap) {
+                rowHeightRefMap.handleValue(height, key);
+            }
+        });
+        this.handleRootEl = (rootEl) => {
+            this.rootEl = rootEl;
+            if (rootEl) {
+                this.context.registerInteractiveComponent(this, {
+                    el: rootEl,
+                    isHitComboAllowed: this.props.isHitComboAllowed,
+                });
+            }
+            else {
+                this.context.unregisterInteractiveComponent(this);
+            }
+        };
     }
     render() {
-        let { props, context } = this;
-        let rowCnt = props.cells.length;
-        let businessHourSegsByRow = this.splitBusinessHourSegs(props.businessHourSegs, rowCnt);
-        let bgEventSegsByRow = this.splitBgEventSegs(props.bgEventSegs, rowCnt);
+        let { props, state, 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);
-        // for DayGrid view with many rows, force a min-height on cells so doesn't appear squished
-        // choose 7 because a month view will have max 6 rows
-        let cellMinHeight = (rowCnt >= 7 && props.clientWidth) ?
-            props.clientWidth / context.options.aspectRatio / 6 :
-            null;
-        return (preact_cjs.createElement(internal_cjs.NowTimer, { unit: "day" }, (nowDate, todayRange) => (preact_cjs.createElement(preact_cjs.Fragment, null, props.cells.map((cells, row) => (preact_cjs.createElement(TableRow, { ref: this.rowRefs.createRef(row), key: cells.length
-                ? cells[0].date.toISOString() /* best? or put key on cell? or use diff formatter? */
-                : row // in case there are no cells (like when resource view is loading)
-            , showDayNumbers: rowCnt > 1, showWeekNumbers: props.showWeekNumbers, todayRange: todayRange, dateProfile: props.dateProfile, cells: cells, renderIntro: props.renderRowIntro, businessHourSegs: businessHourSegsByRow[row], eventSelection: props.eventSelection, bgEventSegs: bgEventSegsByRow[row].filter(isSegAllDay) /* hack */, fgEventSegs: fgEventSegsByRow[row], dateSelectionSegs: dateSelectionSegsByRow[row], eventDrag: eventDragByRow[row], eventResize: eventResizeByRow[row], dayMaxEvents: props.dayMaxEvents, dayMaxEventRows: props.dayMaxEventRows, clientWidth: props.clientWidth, clientHeight: props.clientHeight, cellMinHeight: cellMinHeight, forPrint: props.forPrint })))))));
+        // whether the ROW should expand in height
+        // (not to be confused with whether the fg events within the row should be molded by height of row)
+        let isHeightAuto = internal_cjs.getIsHeightAuto(options);
+        // maintain at least aspectRatio for cells?
+        let rowMinHeight = (state.width != null && (rowCnt >= 7 || // TODO: better way to infer if across single-month boundary
+            isHeightAuto)) ? state.width / context.options.aspectRatio / 6 // okay to hardcode 6 (weeks) ?
+            : null;
+        return (preact_cjs.createElement("div", { className: 'fc-grow fc-flex-column', style: { width: props.width }, ref: this.handleRootEl }, props.cellRows.map((cells, row) => (preact_cjs.createElement(DayGridRow, { key: cells[0].key, dateProfile: props.dateProfile, todayRange: props.todayRange, cells: cells, showDayNumbers: rowCnt > 1, showWeekNumbers: options.weekNumbers, forPrint: props.forPrint, compact: state.width != null && (state.width / cells.length) < COMPACT_CELL_WIDTH, 
+            // 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: isHeightAuto ? '' : 'fc-grow fc-basis0', 
+            // 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: options.dayMaxEvents, dayMaxEventRows: options.dayMaxEventRows, 
+            // dimensions
+            colWidth: props.colWidth, minHeight: rowMinHeight, 
+            // refs
+            heightRef: rowHeightRefMap.createRef(cells[0].key) })))));
     }
     componentDidMount() {
-        this.registerInteractiveComponent();
-    }
-    componentDidUpdate() {
-        // for if started with zero cells
-        this.registerInteractiveComponent();
-    }
-    registerInteractiveComponent() {
-        if (!this.rootEl) {
-            // HACK: need a daygrid wrapper parent to do positioning
-            // NOTE: a daygrid resource view w/o resources can have zero cells
-            const firstCellEl = this.rowRefs.currentMap[0].getCellEls()[0];
-            const rootEl = firstCellEl ? firstCellEl.closest('.fc-daygrid-body') : null;
-            if (rootEl) {
-                this.rootEl = rootEl;
-                this.context.registerInteractiveComponent(this, {
-                    el: rootEl,
-                    isHitComboAllowed: this.props.isHitComboAllowed,
-                });
-            }
-        }
+        this.unwatchWidth = internal_cjs.watchWidth(this.rootEl, (width) => {
+            this.setState({ width });
+        });
     }
     componentWillUnmount() {
-        if (this.rootEl) {
-            this.context.unregisterInteractiveComponent(this);
-            this.rootEl = null;
-        }
+        this.unwatchWidth();
     }
     // Hit System
-    // ----------------------------------------------------------------------------------------------------
-    prepareHits() {
-        this.rowPositions = new internal_cjs.PositionCache(this.rootEl, this.rowRefs.collect().map((rowObj) => rowObj.getCellEls()[0]), // first cell el in each row. TODO: not optimal
-        false, true);
-        this.colPositions = new internal_cjs.PositionCache(this.rootEl, this.rowRefs.currentMap[0].getCellEls(), // cell els in first row
-        true, // horizontal
-        false);
-    }
-    queryHit(positionLeft, positionTop) {
-        let { colPositions, rowPositions } = this;
-        let col = colPositions.leftToIndex(positionLeft);
-        let row = rowPositions.topToIndex(positionTop);
-        if (row != null && col != null) {
-            let cell = this.props.cells[row][col];
-            return {
-                dateProfile: this.props.dateProfile,
-                dateSpan: Object.assign({ range: this.getCellRange(row, col), allDay: true }, cell.extraDateSpan),
-                dayEl: this.getCellEl(row, col),
-                rect: {
-                    left: colPositions.lefts[col],
-                    right: colPositions.rights[col],
-                    top: rowPositions.tops[row],
-                    bottom: rowPositions.bottoms[row],
-                },
-                layer: 0,
-            };
-        }
-        return null;
-    }
-    getCellEl(row, col) {
-        return this.rowRefs.currentMap[row].getCellEls()[col]; // TODO: not optimal
-    }
-    getCellRange(row, col) {
-        let start = this.props.cells[row][col].date;
-        let end = internal_cjs.addDays(start, 1);
-        return { start, end };
+    // -----------------------------------------------------------------------------------------------
+    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);
+        const { row, top, bottom } = computeRowFromPosition(positionTop, props.cellRows, this.rowHeightRefMap.current);
+        const cell = props.cellRows[row][col];
+        const cellStartDate = cell.date;
+        const cellEndDate = internal_cjs.addDays(cellStartDate, 1);
+        return {
+            dateProfile: props.dateProfile,
+            dateSpan: Object.assign({ range: {
+                    start: cellStartDate,
+                    end: cellEndDate,
+                }, allDay: true }, cell.extraDateSpan),
+            // HACK. TODO: This is expensive to do every hit-query
+            dayEl: getCellEl(getRowEl(this.rootEl, row), col),
+            rect: {
+                left,
+                right,
+                top,
+                bottom,
+            },
+            layer: 0,
+        };
     }
 }
+// Utils
+// -------------------------------------------------------------------------------------------------
 function isSegAllDay(seg) {
     return seg.eventRange.def.allDay;
 }
 
-class Table extends internal_cjs.DateComponent {
+class HeaderRow extends internal_cjs.BaseComponent {
+    render() {
+        const { props } = this;
+        return (preact_cjs.createElement("div", { role: props.cellGroup ? undefined : 'row', className: [
+                props.cellGroup ? 'fc-flex-row' : 'fc-row',
+                props.className || '',
+            ].join(' ') }, props.cells.map((cell) => (preact_cjs.createElement(preact_cjs.Fragment, { key: props.getHeaderModelKey(cell) }, props.renderHeaderContent(cell, props.tierNum, undefined, // innerHeightRef
+        props.colWidth))))));
+    }
+}
+
+function DayGridHeader(props) {
+    return (preact_cjs.createElement("div", { className: [
+            'fc-rowgroup',
+            'fc-content-box',
+            ...(props.extraClassNames || []),
+        ].join(' '), style: {
+            width: props.width,
+            paddingLeft: props.paddingLeft,
+            paddingRight: props.paddingRight,
+        } }, props.headerTiers.map((cells, tierNum) => (preact_cjs.createElement(HeaderRow, { key: tierNum, tierNum: tierNum, cells: cells, renderHeaderContent: props.renderHeaderContent, getHeaderModelKey: props.getHeaderModelKey, colWidth: props.colWidth })))));
+}
+
+class DayGridLayoutNormal extends internal_cjs.BaseComponent {
     constructor() {
         super(...arguments);
-        this.elRef = preact_cjs.createRef();
-        this.needsScrollReset = false;
+        this.handleScroller = (scroller) => {
+            internal_cjs.setRef(this.props.scrollerRef, scroller);
+        };
+        this.handleLeftScrollbarWidth = (leftScrollbarWidth) => {
+            this.setState({ leftScrollbarWidth });
+        };
+        this.handleRightScrollbarWidth = (rightScrollbarWidth) => {
+            this.setState({ rightScrollbarWidth });
+        };
     }
     render() {
-        let { props } = this;
-        let { dayMaxEventRows, dayMaxEvents, expandRows } = props;
-        let limitViaBalanced = dayMaxEvents === true || dayMaxEventRows === true;
-        // if rows can't expand to fill fixed height, can't do balanced-height event limit
-        // TODO: best place to normalize these options?
-        if (limitViaBalanced && !expandRows) {
-            limitViaBalanced = false;
-            dayMaxEventRows = null;
-            dayMaxEvents = null;
-        }
-        let classNames = [
-            'fc-daygrid-body',
-            limitViaBalanced ? 'fc-daygrid-body-balanced' : 'fc-daygrid-body-unbalanced',
-            expandRows ? '' : 'fc-daygrid-body-natural', // will height of one row depend on the others?
-        ];
-        return (preact_cjs.createElement("div", { ref: this.elRef, className: classNames.join(' '), style: {
-                // these props are important to give this wrapper correct dimensions for interactions
-                // TODO: if we set it here, can we avoid giving to inner tables?
-                width: props.clientWidth,
-                minWidth: props.tableMinWidth,
-            } },
-            preact_cjs.createElement("table", { role: "presentation", className: "fc-scrollgrid-sync-table", style: {
-                    width: props.clientWidth,
-                    minWidth: props.tableMinWidth,
-                    height: expandRows ? props.clientHeight : '',
-                } },
-                props.colGroupNode,
-                preact_cjs.createElement("tbody", { role: "presentation" },
-                    preact_cjs.createElement(TableRows, { dateProfile: props.dateProfile, cells: props.cells, renderRowIntro: props.renderRowIntro, showWeekNumbers: props.showWeekNumbers, clientWidth: props.clientWidth, clientHeight: props.clientHeight, businessHourSegs: props.businessHourSegs, bgEventSegs: props.bgEventSegs, fgEventSegs: props.fgEventSegs, dateSelectionSegs: props.dateSelectionSegs, eventSelection: props.eventSelection, eventDrag: props.eventDrag, eventResize: props.eventResize, dayMaxEvents: dayMaxEvents, dayMaxEventRows: dayMaxEventRows, forPrint: props.forPrint, isHitComboAllowed: props.isHitComboAllowed })))));
+        const { props, state, context } = this;
+        const { options } = context;
+        const verticalScrollbars = !props.forPrint && !internal_cjs.getIsHeightAuto(options);
+        const stickyHeaderDates = !props.forPrint && internal_cjs.getStickyHeaderDates(options);
+        return (preact_cjs.createElement(preact_cjs.Fragment, null,
+            options.dayHeaders && (preact_cjs.createElement(DayGridHeader, { headerTiers: props.headerTiers, renderHeaderContent: props.renderHeaderContent, getHeaderModelKey: props.getHeaderModelKey, 
+                // render hooks
+                extraClassNames: [
+                    'fc-daygrid-header',
+                    stickyHeaderDates ? 'fc-sticky-header' : '',
+                ], 
+                // dimensions
+                paddingLeft: state.leftScrollbarWidth, paddingRight: state.rightScrollbarWidth })),
+            preact_cjs.createElement(internal_cjs.Scroller, { vertical: verticalScrollbars, leftScrollbarWidthRef: this.handleLeftScrollbarWidth, rightScrollbarWidthRef: this.handleRightScrollbarWidth, elClassNames: [
+                    'fc-daygrid-body',
+                    'fc-rowgroup',
+                    'fc-flex-column',
+                    verticalScrollbars ? 'fc-liquid' : '',
+                ], ref: this.handleScroller },
+                preact_cjs.createElement(DayGridRows // .fc-grow
+                , { dateProfile: props.dateProfile, todayRange: props.todayRange, cellRows: props.cellRows, forPrint: props.forPrint, isHitComboAllowed: props.isHitComboAllowed, 
+                    // content
+                    fgEventSegs: props.fgEventSegs, bgEventSegs: props.bgEventSegs, businessHourSegs: props.businessHourSegs, dateSelectionSegs: props.dateSelectionSegs, eventDrag: props.eventDrag, eventResize: props.eventResize, eventSelection: props.eventSelection, 
+                    // refs
+                    rowHeightRefMap: props.rowHeightRefMap }))));
     }
-    componentDidMount() {
-        this.requestScrollReset();
+}
+
+class DayGridLayoutPannable extends internal_cjs.BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.headerScrollerRef = preact_cjs.createRef();
+        this.bodyScrollerRef = preact_cjs.createRef();
+        this.footerScrollerRef = preact_cjs.createRef();
+        // Sizing
+        // -----------------------------------------------------------------------------------------------
+        this.handleWidth = (width) => {
+            this.setState({ width });
+        };
+        this.handleLeftScrollbarWidth = (leftScrollbarWidth) => {
+            this.setState({ leftScrollbarWidth });
+        };
+        this.handleRightScrollbarWidth = (rightScrollbarWidth) => {
+            this.setState({ rightScrollbarWidth });
+        };
     }
-    componentDidUpdate(prevProps) {
-        if (prevProps.dateProfile !== this.props.dateProfile) {
-            this.requestScrollReset();
-        }
-        else {
-            this.flushScrollReset();
-        }
+    render() {
+        const { props, state, context } = this;
+        const { options } = context;
+        const verticalScrollbars = !props.forPrint && !internal_cjs.getIsHeightAuto(options);
+        const stickyHeaderDates = !props.forPrint && internal_cjs.getStickyHeaderDates(options);
+        const stickyFooterScrollbar = !props.forPrint && internal_cjs.getStickyFooterScrollbar(options);
+        const colCnt = props.cellRows[0].length;
+        const [canvasWidth, colWidth] = computeColWidth(colCnt, props.dayMinWidth, state.width);
+        return (preact_cjs.createElement(preact_cjs.Fragment, null,
+            options.dayHeaders && (preact_cjs.createElement(internal_cjs.Scroller, { horizontal: true, hideScrollbars: true, elClassNames: [
+                    'fc-daygrid-header',
+                    'fc-rowgroup',
+                    stickyHeaderDates ? 'fc-sticky-header' : ''
+                ], ref: this.headerScrollerRef },
+                preact_cjs.createElement(DayGridHeader, { headerTiers: props.headerTiers, renderHeaderContent: props.renderHeaderContent, getHeaderModelKey: props.getHeaderModelKey, 
+                    // dimensions
+                    colWidth: colWidth, width: canvasWidth, paddingLeft: state.leftScrollbarWidth, paddingRight: state.rightScrollbarWidth }))),
+            preact_cjs.createElement(internal_cjs.Scroller, { vertical: verticalScrollbars, horizontal: true, hideScrollbars: stickyFooterScrollbar, widthRef: this.handleWidth, leftScrollbarWidthRef: this.handleLeftScrollbarWidth, rightScrollbarWidthRef: this.handleRightScrollbarWidth, elClassNames: [
+                    'fc-daygrid-body',
+                    'fc-rowgroup',
+                    'fc-flex-column',
+                    verticalScrollbars ? 'fc-liquid' : '',
+                ], ref: this.bodyScrollerRef },
+                preact_cjs.createElement(DayGridRows // .fc-grow
+                , { dateProfile: props.dateProfile, todayRange: props.todayRange, cellRows: props.cellRows, forPrint: props.forPrint, isHitComboAllowed: props.isHitComboAllowed, 
+                    // 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, 
+                    // refs
+                    rowHeightRefMap: props.rowHeightRefMap })),
+            Boolean(stickyFooterScrollbar) && (preact_cjs.createElement(internal_cjs.Scroller, { ref: this.footerScrollerRef, horizontal: true, elClassNames: ['fc-sticky-footer'], elStyle: {
+                    marginTop: '-1px', // HACK
+                } },
+                preact_cjs.createElement("div", { style: {
+                        width: canvasWidth,
+                        height: '1px', // HACK
+                    } })))));
     }
-    requestScrollReset() {
-        this.needsScrollReset = true;
-        this.flushScrollReset();
-    }
-    flushScrollReset() {
-        if (this.needsScrollReset &&
-            this.props.clientWidth // sizes computed?
-        ) {
-            const subjectEl = getScrollSubjectEl(this.elRef.current, this.props.dateProfile);
-            if (subjectEl) {
-                const originEl = subjectEl.closest('.fc-daygrid-body');
-                const scrollEl = originEl.closest('.fc-scroller');
-                const scrollTop = subjectEl.getBoundingClientRect().top -
-                    originEl.getBoundingClientRect().top;
-                scrollEl.scrollTop = scrollTop ? (scrollTop + 1) : 0; // overcome border
-            }
-            this.needsScrollReset = false;
-        }
+    // Lifecycle
+    // -----------------------------------------------------------------------------------------------
+    componentDidMount() {
+        // scroller
+        const ScrollerSyncer = internal_cjs.getScrollerSyncerClass(this.context.pluginHooks);
+        this.syncedScroller = new ScrollerSyncer(true); // horizontal=true
+        internal_cjs.setRef(this.props.scrollerRef, this.syncedScroller);
+        this.updateSyncedScroller();
     }
-}
-function getScrollSubjectEl(containerEl, dateProfile) {
-    let el;
-    if (dateProfile.currentRangeUnit.match(/year|month/)) {
-        el = containerEl.querySelector(`[data-date="${internal_cjs.formatIsoMonthStr(dateProfile.currentDate)}-01"]`);
-        // even if view is month-based, first-of-month might be hidden...
+    componentDidUpdate() {
+        // scroller
+        this.updateSyncedScroller();
     }
-    if (!el) {
-        el = containerEl.querySelector(`[data-date="${internal_cjs.formatDayString(dateProfile.currentDate)}"]`);
-        // could still be hidden if an interior-view hidden day
+    componentWillUnmount() {
+        // scroller
+        this.syncedScroller.destroy();
+    }
+    // Scrolling
+    // -----------------------------------------------------------------------------------------------
+    updateSyncedScroller() {
+        const { isRtl } = this.context;
+        this.syncedScroller.handleChildren([
+            this.headerScrollerRef.current,
+            this.bodyScrollerRef.current,
+            this.footerScrollerRef.current,
+        ], isRtl);
     }
-    return el;
 }
 
-class DayTableSlicer extends internal_cjs.Slicer {
+class DayGridLayout extends internal_cjs.BaseComponent {
     constructor() {
         super(...arguments);
-        this.forceDayIfListItem = true;
+        // ref
+        this.scrollerRef = preact_cjs.createRef();
+        this.rowHeightRefMap = new internal_cjs.RefMap();
+        // Scrolling
+        // -----------------------------------------------------------------------------------------------
+        this.timeScrollResponder = new internal_cjs.ScrollResponder((_time) => {
+            // HACK to scroll to day
+            const rowHeightMap = this.rowHeightRefMap.current;
+            const scroller = this.scrollerRef.current;
+            const scrollTop = computeTopFromDate(this.props.dateProfile.currentDate, this.props.cellRows, rowHeightMap);
+            if (scrollTop != null) {
+                scroller.scrollTo({ y: scrollTop });
+                return true;
+            }
+            return false;
+        });
     }
-    sliceRange(dateRange, dayTableModel) {
-        return dayTableModel.sliceRange(dateRange);
+    render() {
+        const { props, context } = this;
+        const { options } = context;
+        const commonLayoutProps = Object.assign(Object.assign({}, props), { scrollerRef: this.scrollerRef, rowHeightRefMap: this.rowHeightRefMap });
+        return (preact_cjs.createElement(internal_cjs.ViewContainer, { viewSpec: context.viewSpec, elClasses: [props.className, 'fc-flex-column', 'fc-border'] }, options.dayMinWidth ? (preact_cjs.createElement(DayGridLayoutPannable, Object.assign({}, commonLayoutProps, { dayMinWidth: options.dayMinWidth }))) : (preact_cjs.createElement(DayGridLayoutNormal, Object.assign({}, commonLayoutProps)))));
+    }
+    // Lifecycle
+    // -----------------------------------------------------------------------------------------------
+    componentDidMount() {
+        const { context } = this;
+        const { options } = context;
+        context.emitter.on('_timeScrollRequest', this.timeScrollResponder.handleScroll);
+        this.timeScrollResponder.handleScroll(options.scrollTime);
+    }
+    componentDidUpdate(prevProps) {
+        const { options } = this.context;
+        if (prevProps.dateProfile !== this.props.dateProfile && options.scrollTimeReset) {
+            this.timeScrollResponder.handleScroll(options.scrollTime);
+        }
+        else {
+            this.timeScrollResponder.drain();
+        }
+    }
+    componentWillUnmount() {
+        this.context.emitter.off('_timeScrollRequest', this.timeScrollResponder.handleScroll);
     }
 }
 
-class DayTable extends internal_cjs.DateComponent {
+const WEEKDAY_FORMAT = internal_cjs.createFormatter({ weekday: 'long' });
+class DayOfWeekHeaderCell extends internal_cjs.BaseComponent {
     constructor() {
         super(...arguments);
-        this.slicer = new DayTableSlicer();
-        this.tableRef = preact_cjs.createRef();
+        // ref
+        this.innerElRef = preact_cjs.createRef();
     }
     render() {
         let { props, context } = this;
-        return (preact_cjs.createElement(Table, Object.assign({ ref: this.tableRef }, this.slicer.sliceProps(props, props.dateProfile, props.nextDayThreshold, context, props.dayTableModel), { dateProfile: props.dateProfile, cells: props.dayTableModel.cells, colGroupNode: props.colGroupNode, tableMinWidth: props.tableMinWidth, renderRowIntro: props.renderRowIntro, dayMaxEvents: props.dayMaxEvents, dayMaxEventRows: props.dayMaxEventRows, showWeekNumbers: props.showWeekNumbers, expandRows: props.expandRows, headerAlignElRef: props.headerAlignElRef, clientWidth: props.clientWidth, clientHeight: props.clientHeight, forPrint: props.forPrint })));
+        let { dateEnv, theme, viewApi, options } = context;
+        let date = internal_cjs.addDays(new Date(259200000), props.dow); // start with Sun, 04 Jan 1970 00:00:00 GMT
+        let dateMeta = {
+            dow: props.dow,
+            isDisabled: false,
+            isFuture: false,
+            isPast: false,
+            isToday: false,
+            isOther: false,
+        };
+        let text = dateEnv.format(date, props.dayHeaderFormat);
+        let renderProps = Object.assign(Object.assign(Object.assign(Object.assign({ date }, dateMeta), { view: viewApi }), props.extraRenderProps), { text });
+        return (preact_cjs.createElement(internal_cjs.ContentContainer, { elTag: 'div', elClasses: [
+                ...internal_cjs.getDayClassNames(dateMeta, theme),
+                ...(props.extraClassNames || []),
+                'fc-header-cell',
+                'fc-cell',
+                props.colWidth != null ? '' : 'fc-liquid',
+                'fc-flex-column',
+                'fc-align-center',
+            ], elAttrs: props.extraDataAttrs, elStyle: {
+                width: props.colWidth != null // TODO: DRY
+                    ? props.colWidth * (props.colSpan || 1)
+                    : undefined,
+            }, renderProps: renderProps, generatorName: "dayHeaderContent", customGenerator: options.dayHeaderContent, defaultGenerator: renderInner, classNameGenerator: options.dayHeaderClassNames, didMount: options.dayHeaderDidMount, willUnmount: options.dayHeaderWillUnmount }, (InnerContent) => (preact_cjs.createElement("div", { ref: this.innerElRef, className: [
+                'fc-flex-column',
+                props.isSticky ? 'fc-sticky-x' : '',
+            ].join(' ') },
+            preact_cjs.createElement(InnerContent, { elTag: "a", elClasses: [
+                    'fc-cell-inner',
+                    'fc-padding-sm',
+                ], elAttrs: {
+                    'aria-label': dateEnv.format(date, WEEKDAY_FORMAT),
+                } })))));
+    }
+    componentDidMount() {
+        const innerEl = this.innerElRef.current; // TODO: make dynamic with useEffect
+        // TODO: only attach this if refs props present
+        this.disconectInnerHeight = internal_cjs.watchHeight(innerEl, (height) => {
+            internal_cjs.setRef(this.props.innerHeightRef, height);
+        });
+    }
+    componentWillUnmount() {
+        this.disconectInnerHeight();
+    }
+}
+
+function createDayHeaderFormatter(explicitFormat, datesRepDistinctDays, dateCnt) {
+    return explicitFormat || computeFallbackHeaderFormat(datesRepDistinctDays, dateCnt);
+}
+// Computes a default column header formatting string if `colFormat` is not explicitly defined
+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) {
+        return internal_cjs.createFormatter({ weekday: 'short' }); // "Sat"
     }
+    if (dayCnt > 1) {
+        return internal_cjs.createFormatter({ weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true }); // "Sat 11/12"
+    }
+    return internal_cjs.createFormatter({ weekday: 'long' }); // "Saturday"
 }
 
-class DayTableView extends TableView {
+class DayGridView extends internal_cjs.BaseComponent {
     constructor() {
         super(...arguments);
+        // memo
         this.buildDayTableModel = internal_cjs.memoize(buildDayTableModel);
-        this.headerRef = preact_cjs.createRef();
-        this.tableRef = preact_cjs.createRef();
-        // can't override any lifecycle methods from parent
+        this.buildHeaderTiers = internal_cjs.memoize(buildHeaderTiers);
+        this.createDayHeaderFormatter = internal_cjs.memoize(createDayHeaderFormatter);
+        // internal
+        this.slicer = new DayTableSlicer();
     }
     render() {
-        let { options, dateProfileGenerator } = this.context;
-        let { props } = this;
-        let dayTableModel = this.buildDayTableModel(props.dateProfile, dateProfileGenerator);
-        let headerContent = options.dayHeaders && (preact_cjs.createElement(internal_cjs.DayHeader, { ref: this.headerRef, dateProfile: props.dateProfile, dates: dayTableModel.headerDates, datesRepDistinctDays: dayTableModel.rowCnt === 1 }));
-        let bodyContent = (contentArg) => (preact_cjs.createElement(DayTable, { ref: this.tableRef, dateProfile: props.dateProfile, dayTableModel: dayTableModel, businessHours: props.businessHours, dateSelection: props.dateSelection, eventStore: props.eventStore, eventUiBases: props.eventUiBases, eventSelection: props.eventSelection, eventDrag: props.eventDrag, eventResize: props.eventResize, nextDayThreshold: options.nextDayThreshold, colGroupNode: contentArg.tableColGroupNode, tableMinWidth: contentArg.tableMinWidth, dayMaxEvents: options.dayMaxEvents, dayMaxEventRows: options.dayMaxEventRows, showWeekNumbers: options.weekNumbers, expandRows: !props.isHeightAuto, headerAlignElRef: this.headerElRef, clientWidth: contentArg.clientWidth, clientHeight: contentArg.clientHeight, forPrint: props.forPrint }));
-        return options.dayMinWidth
-            ? this.renderHScrollLayout(headerContent, bodyContent, dayTableModel.colCnt, options.dayMinWidth)
-            : this.renderSimpleLayout(headerContent, bodyContent);
+        const { props, context } = this;
+        const { options } = context;
+        const dayTableModel = this.buildDayTableModel(props.dateProfile, context.dateProfileGenerator);
+        const datesRepDistinctDays = dayTableModel.rowCnt === 1;
+        const headerTiers = this.buildHeaderTiers(dayTableModel.headerDates, datesRepDistinctDays);
+        const slicedProps = this.slicer.sliceProps(props, props.dateProfile, options.nextDayThreshold, context, dayTableModel);
+        const dayHeaderFormat = this.createDayHeaderFormatter(context.options.dayHeaderFormat, datesRepDistinctDays, dayTableModel.colCnt);
+        return (preact_cjs.createElement(internal_cjs.NowTimer, { unit: "day" }, (nowDate, todayRange) => (preact_cjs.createElement(DayGridLayout, { dateProfile: props.dateProfile, todayRange: todayRange, cellRows: dayTableModel.cellRows, forPrint: props.forPrint, className: 'fc-daygrid-view', 
+            // header content
+            headerTiers: headerTiers, renderHeaderContent: (model, tier, innerHeightRef, colWidth) => {
+                if (model.date) {
+                    return (preact_cjs.createElement(DateHeaderCell, Object.assign({}, model, { dateProfile: props.dateProfile, todayRange: todayRange, navLink: dayTableModel.colCnt > 1, dayHeaderFormat: dayHeaderFormat, colSpan: model.colSpan, colWidth: colWidth })));
+                }
+                else {
+                    return (preact_cjs.createElement(DayOfWeekHeaderCell, Object.assign({}, model, { dayHeaderFormat: dayHeaderFormat, colSpan: model.colSpan, colWidth: colWidth })));
+                }
+            }, getHeaderModelKey: (model) => {
+                // can use model.key???
+                if (model.date) {
+                    return model.date.toUTCString();
+                }
+                return model.dow;
+            }, 
+            // body content
+            fgEventSegs: slicedProps.fgEventSegs, bgEventSegs: slicedProps.bgEventSegs, businessHourSegs: slicedProps.businessHourSegs, dateSelectionSegs: slicedProps.dateSelectionSegs, eventDrag: slicedProps.eventDrag, eventResize: slicedProps.eventResize, eventSelection: slicedProps.eventSelection }))));
     }
 }
-function buildDayTableModel(dateProfile, dateProfileGenerator) {
-    let daySeries = new internal_cjs.DaySeriesModel(dateProfile.renderRange, dateProfileGenerator);
-    return new internal_cjs.DayTableModel(daySeries, /year|month|week/.test(dateProfile.currentRangeUnit));
-}
 
-class TableDateProfileGenerator extends internal_cjs.DateProfileGenerator {
-    // Computes the date range that will be rendered
-    buildRenderRange(currentRange, currentRangeUnit, isRangeAllDay) {
-        let renderRange = super.buildRenderRange(currentRange, currentRangeUnit, isRangeAllDay);
-        let { props } = this;
-        return buildDayTableRenderRange({
-            currentRange: renderRange,
-            snapToWeek: /^(year|month)$/.test(currentRangeUnit),
-            fixedWeekCount: props.fixedWeekCount,
-            dateEnv: props.dateEnv,
+/*
+TODO: is it even worth doing this "advanced" version?
+*/
+class HeaderRowAdvanced extends internal_cjs.BaseComponent {
+    constructor() {
+        super(...arguments);
+        // ref
+        this.innerHeightRefMap = new internal_cjs.RefMap(() => {
+            internal_cjs.afterSize(this.handleInnerHeights);
         });
+        this.handleInnerHeights = () => {
+            const innerHeightMap = this.innerHeightRefMap.current;
+            let max = 0;
+            for (const innerHeight of innerHeightMap.values()) {
+                max = Math.max(max, innerHeight);
+            }
+            if (this.currentInnerHeight !== max) {
+                this.currentInnerHeight = max;
+                internal_cjs.setRef(this.props.innerHeightRef, max);
+            }
+        };
     }
-}
-function buildDayTableRenderRange(props) {
-    let { dateEnv, currentRange } = props;
-    let { start, end } = currentRange;
-    let endOfWeek;
-    // year and month views should be aligned with weeks. this is already done for week
-    if (props.snapToWeek) {
-        start = dateEnv.startOfWeek(start);
-        // make end-of-week if not already
-        endOfWeek = dateEnv.startOfWeek(end);
-        if (endOfWeek.valueOf() !== end.valueOf()) {
-            end = internal_cjs.addWeeks(endOfWeek, 1);
-        }
-    }
-    // ensure 6 weeks
-    if (props.fixedWeekCount) {
-        // 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_cjs.addDays(currentRange.end, -1)));
-        let rowCnt = Math.ceil(// could be partial weeks due to hiddenDays
-        internal_cjs.diffWeeks(lastMonthRenderStart, end));
-        end = internal_cjs.addWeeks(end, 6 - rowCnt);
+    render() {
+        const { props } = this;
+        return (preact_cjs.createElement("div", { role: 'row', className: 'fc-row', style: { height: props.height } }, props.cells.map((cell) => {
+            const key = props.getHeaderModelKey(cell);
+            return (preact_cjs.createElement(preact_cjs.Fragment, { key: props.getHeaderModelKey(cell) }, props.renderHeaderContent(cell, props.tierNum, this.innerHeightRefMap.createRef(key), // innerHeightRef
+            props.colWidth)));
+        })));
     }
-    return { start, end };
 }
 
-var css_248z = ":root{--fc-daygrid-event-dot-width:8px}.fc-daygrid-day-events:after,.fc-daygrid-day-events:before,.fc-daygrid-day-frame:after,.fc-daygrid-day-frame:before,.fc-daygrid-event-harness:after,.fc-daygrid-event-harness:before{clear:both;content:\"\";display:table}.fc .fc-daygrid-body{position:relative;z-index:1}.fc .fc-daygrid-day.fc-day-today{background-color:var(--fc-today-bg-color)}.fc .fc-daygrid-day-frame{min-height:100%;position:relative}.fc .fc-daygrid-day-top{display:flex;flex-direction:row-reverse}.fc .fc-day-other .fc-daygrid-day-top{opacity:.3}.fc .fc-daygrid-day-number{padding:4px;position:relative;z-index:4}.fc .fc-daygrid-month-start{font-size:1.1em;font-weight:700}.fc .fc-daygrid-day-events{margin-top:1px}.fc .fc-daygrid-body-balanced .fc-daygrid-day-events{left:0;position:absolute;right:0}.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events{min-height:2em;position:relative}.fc .fc-daygrid-body-natural .fc-daygrid-day-events{margin-bottom:1em}.fc .fc-daygrid-event-harness{position:relative}.fc .fc-daygrid-event-harness-abs{left:0;position:absolute;right:0;top:0}.fc .fc-daygrid-bg-harness{bottom:0;position:absolute;top:0}.fc .fc-daygrid-day-bg .fc-non-business{z-index:1}.fc .fc-daygrid-day-bg .fc-bg-event{z-index:2}.fc .fc-daygrid-day-bg .fc-highlight{z-index:3}.fc .fc-daygrid-event{margin-top:1px;z-index:6}.fc .fc-daygrid-event.fc-event-mirror{z-index:7}.fc .fc-daygrid-day-bottom{font-size:.85em;margin:0 2px}.fc .fc-daygrid-day-bottom:after,.fc .fc-daygrid-day-bottom:before{clear:both;content:\"\";display:table}.fc .fc-daygrid-more-link{border-radius:3px;cursor:pointer;line-height:1;margin-top:1px;max-width:100%;overflow:hidden;padding:2px;position:relative;white-space:nowrap;z-index:4}.fc .fc-daygrid-more-link:hover{background-color:rgba(0,0,0,.1)}.fc .fc-daygrid-week-number{background-color:var(--fc-neutral-bg-color);color:var(--fc-neutral-text-color);min-width:1.5em;padding:2px;position:absolute;text-align:center;top:0;z-index:5}.fc .fc-more-popover .fc-popover-body{min-width:220px;padding:10px}.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-more-link{float:left}.fc-direction-ltr .fc-daygrid-week-number{border-radius:0 0 3px 0;left:0}.fc-direction-rtl .fc-daygrid-more-link{float:right}.fc-direction-rtl .fc-daygrid-week-number{border-radius:0 0 0 3px;right:0}.fc-liquid-hack .fc-daygrid-day-frame{position:static}.fc-daygrid-event{border-radius:3px;font-size:var(--fc-small-font-size);position:relative;white-space:nowrap}.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;display:flex;padding:2px 0}.fc-daygrid-dot-event .fc-event-title{flex-grow:1;flex-shrink:1;font-weight:700;min-width:0;overflow:hidden}.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-direction-ltr .fc-daygrid-event .fc-event-time{margin-right:3px}.fc-direction-rtl .fc-daygrid-event .fc-event-time{margin-left:3px}";
-internal_cjs.injectStyles(css_248z);
-
-exports.DayGridView = DayTableView;
-exports.DayTable = DayTable;
+exports.COMPACT_CELL_WIDTH = COMPACT_CELL_WIDTH;
+exports.DateHeaderCell = DateHeaderCell;
+exports.DayGridLayout = DayGridLayout;
+exports.DayGridRow = DayGridRow;
+exports.DayGridRows = DayGridRows;
+exports.DayGridView = DayGridView;
+exports.DayOfWeekHeaderCell = DayOfWeekHeaderCell;
 exports.DayTableSlicer = DayTableSlicer;
-exports.Table = Table;
+exports.HeaderRow = HeaderRow;
+exports.HeaderRowAdvanced = HeaderRowAdvanced;
 exports.TableDateProfileGenerator = TableDateProfileGenerator;
-exports.TableRows = TableRows;
-exports.TableView = TableView;
 exports.buildDayTableModel = buildDayTableModel;
 exports.buildDayTableRenderRange = buildDayTableRenderRange;
+exports.computeColFromPosition = computeColFromPosition;
+exports.computeColWidth = computeColWidth;
+exports.createDayHeaderFormatter = createDayHeaderFormatter;
+exports.getCellEl = getCellEl;
+exports.getRowEl = getRowEl;