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

package/internal.js

@@ -1,8 +1,5 @@
-import { injectStyles, Slicer, DateProfileGenerator, addWeeks, addDays, diffWeeks, DaySeriesModel, DayTableModel, fracToCssDim, BaseComponent, getDateMeta, buildNavLinkAttrs, ContentContainer, getDayClassNames, formatDayString, watchHeight, setRef, createFormatter, StandardEvent, buildEventRangeTimeText, EventContainer, getEventRangeAnchorAttrs, MoreLinkContainer, getEventRangeMeta, DateComponent, DayCellContainer, hasCustomDayCellContent, addMs, SegHierarchy, buildEntryKey, intersectSpans, RefMap, afterSize, sortEventSegs, WeekNumberContainer, buildEventRangeKey, BgEvent, renderFill, memoize, getIsHeightAuto, watchWidth, getStickyHeaderDates, Scroller, getStickyFooterScrollbar, getScrollerSyncerClass, ViewContainer, NowTimer } from '@fullcalendar/core/internal.js';
-import { createRef, createElement, Fragment, Component } from '@fullcalendar/core/preact.js';
-
-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}";
-injectStyles(css_248z);
+import { Slicer, createFormatter, getDateMeta, formatDayString, buildNavLinkAttrs, getDayClassName, addDays, getEventKey, BaseComponent, StandardEvent, buildEventRangeTimeText, getEventRangeAnchorAttrs, EventContainer, MoreLinkContainer, joinClassNames, getEventRangeMeta, DateComponent, DayCellContainer, hasCustomDayCellContent, watchSize, isDimsEqual, setRef, addMs, SegHierarchy, DaySeriesModel, DayTableModel, fracToCssDim, watchHeight, RefMap, afterSize, sortEventSegs, WeekNumberContainer, buildEventRangeKey, BgEvent, renderFill, memoize, getIsHeightAuto, watchWidth, ContentContainer, renderText, getStickyHeaderDates, Scroller, getStickyFooterScrollbar, StickyFooterScrollbar, getScrollerSyncerClass, ViewContainer, NowTimer, DateProfileGenerator, addWeeks, diffWeeks, injectStyles } from '@fullcalendar/core/internal.js';
+import { createElement, Fragment, createRef, Component } from '@fullcalendar/core/preact.js';
 
 class DayTableSlicer extends Slicer {
     constructor() {
@@ -14,193 +11,90 @@ class DayTableSlicer extends Slicer {
     }
 }
 
-class TableDateProfileGenerator extends 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,
-        });
-    }
-}
-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 = 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(addDays(currentRange.end, -1)));
-        let rowCnt = Math.ceil(// could be partial weeks due to hiddenDays
-        diffWeeks(lastMonthRenderStart, end));
-        end = addWeeks(end, 6 - rowCnt);
-    }
-    return { start, end };
-}
-
-function renderInner(renderProps) {
-    return renderProps.text;
-}
-function buildDayTableModel(dateProfile, dateProfileGenerator) {
-    let daySeries = new DaySeriesModel(dateProfile.renderRange, dateProfileGenerator);
-    return new 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
+// TODO: converge types with DayTableCell and DayCellContainer (the component) and refineRenderProps
+// the generation of DayTableCell will be distinct (for the BODY cells)
+// but can share some of the same types/utils
+// Date Cells
 // -------------------------------------------------------------------------------------------------
-function computeTopFromDate(date, cellRows, rowHeightMap, adjust = 0) {
-    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;
-        }
-        const rowHeight = rowHeightMap.get(key);
-        if (rowHeight == null) {
-            return; // denote unknown
-        }
-        top += rowHeight + adjust;
-    }
-    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 = fracToCssDim((seg.lastCol - seg.firstCol + 1) * colWidthFrac);
-        if (isRtl) {
-            right = fracToCssDim(seg.firstCol * colWidthFrac);
-        }
-        else {
-            left = fracToCssDim(seg.firstCol * colWidthFrac);
-        }
-    }
-    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 };
+const WEEKDAY_FORMAT = createFormatter({ weekday: 'long' });
+const firstSunday = new Date(259200000);
+function buildDateRowConfigs(...args) {
+    return [buildDateRowConfig(...args)];
 }
-// Hit Element
-// -------------------------------------------------------------------------------------------------
-function getRowEl(rootEl, row) {
-    return rootEl.querySelectorAll(':scope > [role=row]')[row];
+/*
+Should this receive resource data attributes?
+Or ResourceApi object itself?
+*/
+function buildDateRowConfig(dates, datesRepDistinctDays, dateProfile, todayRange, dayHeaderFormat, // TODO: rename to dateHeaderFormat?
+context, colSpan) {
+    return {
+        renderConfig: buildDateRenderConfig(context),
+        dataConfigs: buildDateDataConfigs(dates, datesRepDistinctDays, dateProfile, todayRange, dayHeaderFormat, context, colSpan)
+    };
 }
-function getCellEl(rowEl, col) {
-    return rowEl.querySelectorAll(':scope > [role=gridcell]')[col];
+function buildDateRenderConfig(context) {
+    const { options } = context;
+    return {
+        generatorName: 'dayHeaderContent',
+        customGenerator: options.dayHeaderContent,
+        classNameGenerator: options.dayHeaderClassNames,
+        didMount: options.dayHeaderDidMount,
+        willUnmount: options.dayHeaderWillUnmount,
+    };
 }
-
-class DateHeaderCell extends BaseComponent {
-    constructor() {
-        super(...arguments);
-        // ref
-        this.innerElRef = createRef();
-    }
-    render() {
-        let { props, context } = this;
-        let { dateProfile, date, extraRenderProps, extraDataAttrs } = props;
-        let { dateEnv, options, theme, viewApi } = context;
-        let dayMeta = getDateMeta(date, props.todayRange, null, dateProfile);
-        let text = dateEnv.format(date, props.dayHeaderFormat);
-        let navLinkAttrs = (!dayMeta.isDisabled && props.navLink)
-            ? buildNavLinkAttrs(context, date)
-            : {};
-        let renderProps = Object.assign(Object.assign(Object.assign({ date: dateEnv.toDate(date), view: viewApi }, extraRenderProps), { text }), dayMeta);
-        return (createElement(ContentContainer, { elTag: 'div', elClasses: [
-                ...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 ? 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) => (createElement("div", { ref: this.innerElRef, className: [
-                'fc-flex-column',
-                props.isSticky ? 'fc-sticky-x' : '',
-            ].join(' ') }, !dayMeta.isDisabled && (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 = watchHeight(innerEl, (height) => {
-            setRef(this.props.innerHeightRef, height);
+function buildDateDataConfigs(dates, datesRepDistinctDays, dateProfile, todayRange, dayHeaderFormat, // TODO: rename to dateHeaderFormat?
+context, colSpan = 1, keyPrefix = '') {
+    const { dateEnv, viewApi, options } = context;
+    return datesRepDistinctDays
+        ? dates.map((date) => {
+            const dateMeta = getDateMeta(date, todayRange, null, dateProfile);
+            const text = dateEnv.format(date, dayHeaderFormat);
+            const renderProps = Object.assign(Object.assign({}, dateMeta), { date: dateEnv.toDate(date), view: viewApi, text });
+            const isNavLink = options.navLinks && !dateMeta.isDisabled;
+            return {
+                key: keyPrefix + date.toUTCString(),
+                renderProps,
+                attrs: { 'data-date': !dateMeta.isDisabled ? formatDayString(date) : undefined },
+                innerAttrs: isNavLink ? buildNavLinkAttrs(context, date) : {},
+                colSpan,
+                isNavLink,
+                className: getDayClassName(dateMeta),
+            };
+        })
+        : dates.map((date) => {
+            const dow = date.getUTCDay();
+            const normDate = addDays(firstSunday, dow);
+            const dayMeta = {
+                dow,
+                isDisabled: false,
+                isFuture: false,
+                isPast: false,
+                isToday: false,
+                isOther: false,
+            };
+            const text = dateEnv.format(normDate, dayHeaderFormat);
+            const renderProps = Object.assign(Object.assign({}, dayMeta), { date, view: viewApi, text });
+            return {
+                key: keyPrefix + String(dow),
+                renderProps,
+                innerAttrs: { 'aria-label': dateEnv.format(normDate, WEEKDAY_FORMAT) },
+                colSpan,
+                className: getDayClassName(dayMeta),
+            };
         });
-    }
-    componentWillUnmount() {
-        this.disconectInnerHeight();
-        setRef(this.props.innerHeightRef, null);
-    }
 }
 
+/*
+We need really specific keys because RefMap::createRef() which is then given to heightRef
+unable to change key! As a result, we cannot reuse elements between normal/slice/standin types,
+but that's okay since they render quite differently
+*/
+function getEventPartKey(seg) {
+    return getEventKey(seg) + ':' + seg.start +
+        (seg.standinFor ? ':standin' : seg.isSlice ? ':slice' : '');
+}
+// DayGridRange utils (TODO: move)
+// -------------------------------------------------------------------------------------------------
 function splitSegsByRow(segs, rowCnt) {
     const byRow = [];
     for (let row = 0; row < rowCnt; row++) {
@@ -232,20 +126,8 @@ function splitInteractionByRow(ui, rowCnt) {
     }
     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;
+function sliceSegForCol(seg, col) {
+    return Object.assign(Object.assign({}, seg), { start: col, end: col + 1, isStart: seg.isStart && seg.start === col, isEnd: seg.isEnd && seg.end - 1 === col, standinFor: seg });
 }
 
 const DEFAULT_TABLE_EVENT_TIME_FORMAT = createFormatter({
@@ -258,7 +140,7 @@ function hasListItemDisplay(seg) {
     let { display } = seg.eventRange.ui;
     return display === 'list-item' || (display === 'auto' &&
         !seg.eventRange.def.allDay &&
-        seg.firstCol === seg.lastCol && // can't be multi-day
+        (seg.end - seg.start) === 1 && // single-day
         seg.isStart && // "
         seg.isEnd // "
     );
@@ -267,7 +149,7 @@ function hasListItemDisplay(seg) {
 class DayGridBlockEvent extends BaseComponent {
     render() {
         let { props } = this;
-        return (createElement(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.eventRange.def.allDay })));
+        return (createElement(StandardEvent, Object.assign({}, props, { className: 'fc-daygrid-block-event fc-daygrid-event fc-h-event', defaultTimeFormat: DEFAULT_TABLE_EVENT_TIME_FORMAT, defaultDisplayEventEnd: props.defaultDisplayEventEnd, disableResizing: !props.eventRange.def.allDay })));
     }
 }
 
@@ -277,8 +159,12 @@ class DayGridListEvent extends BaseComponent {
         let { options } = context;
         let { eventRange } = props;
         let timeFormat = options.eventTimeFormat || DEFAULT_TABLE_EVENT_TIME_FORMAT;
-        let timeText = buildEventRangeTimeText(eventRange, timeFormat, context, true, props.defaultDisplayEventEnd);
-        return (createElement(EventContainer, Object.assign({}, props, { elTag: "a", elClasses: ['fc-daygrid-event', 'fc-daygrid-dot-event'], elAttrs: getEventRangeAnchorAttrs(eventRange, context), defaultGenerator: renderInnerContent, timeText: timeText, isResizing: false, isDateSelecting: false })));
+        let timeText = buildEventRangeTimeText(timeFormat, eventRange, 
+        /* slicedStart = */ undefined, 
+        /* slicedEnd = */ undefined, props.isStart, props.isEnd, context, 
+        /* defaultDisplayEventTime = */ true, props.defaultDisplayEventEnd);
+        let anchorAttrs = getEventRangeAnchorAttrs(eventRange, context);
+        return (createElement(EventContainer, Object.assign({}, props, { tag: anchorAttrs ? 'a' : 'div', attrs: anchorAttrs, className: 'fc-daygrid-dot-event fc-daygrid-event', defaultGenerator: renderInnerContent, timeText: timeText, isResizing: false, isDateSelecting: false })));
     }
 }
 function renderInnerContent(renderProps) {
@@ -291,14 +177,16 @@ function renderInnerContent(renderProps) {
 class DayGridMoreLink extends BaseComponent {
     render() {
         let { props } = this;
-        return (createElement(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: () => {
+        return (createElement(MoreLinkContainer, { className: joinClassNames('fc-daygrid-more-link', props.isBlock
+                ? 'fc-daygrid-more-link-block'
+                : 'fc-daygrid-more-link-button'), dateProfile: props.dateProfile, todayRange: props.todayRange, allDayDate: props.allDayDate, segs: props.segs, hiddenSegs: props.hiddenSegs, alignElRef: props.alignElRef, alignParentTop: props.alignParentTop, dateSpanProps: props.dateSpanProps, popoverContent: () => {
                 let forcedInvisibleMap = // TODO: more convenient/DRY
                  (props.eventDrag ? props.eventDrag.affectedInstances : null) ||
                     (props.eventResize ? props.eventResize.affectedInstances : null) ||
                     {};
                 return (createElement(Fragment, null, props.segs.map((seg) => {
                     let { eventRange } = seg;
-                    let instanceId = eventRange.instance.instanceId;
+                    let { instanceId } = eventRange.instance;
                     return (createElement("div", { key: instanceId, style: {
                             visibility: forcedInvisibleMap[instanceId] ? 'hidden' : '',
                         } }, hasListItemDisplay(seg) ? (createElement(DayGridListEvent, Object.assign({ eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: false, isSelected: instanceId === props.eventSelection, defaultDisplayEventEnd: false }, getEventRangeMeta(eventRange, props.todayRange)))) : (createElement(DayGridBlockEvent, Object.assign({ eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: instanceId === props.eventSelection, defaultDisplayEventEnd: false }, getEventRangeMeta(eventRange, props.todayRange))))));
@@ -311,8 +199,8 @@ class DayGridCell extends DateComponent {
     constructor() {
         super(...arguments);
         // ref
-        this.innerElRef = createRef();
-        this.headerWrapElRef = createRef();
+        this.rootElRef = createRef();
+        this.bodyElRef = createRef();
     }
     render() {
         let { props, context } = this;
@@ -320,48 +208,37 @@ class DayGridCell extends DateComponent {
         // TODO: memoize this
         const isMonthStart = props.showDayNumber &&
             shouldDisplayMonthStart(props.date, props.dateProfile.currentRange, dateEnv);
-        return (createElement(DayCellContainer, { elTag: "div", elClasses: [
-                'fc-daygrid-cell',
-                'fc-cell',
-                props.width != null ? '' : 'fc-liquid',
-                'fc-flex-column',
-                ...(props.extraClassNames || []),
-            ], elAttrs: Object.assign(Object.assign({}, props.extraDataAttrs), { role: 'gridcell' }), elStyle: {
+        return (createElement(DayCellContainer, { tag: "div", className: joinClassNames(props.className, 'fc-daygrid-day fc-flex-col', props.borderStart && 'fc-border-s', props.width != null ? '' : 'fc-liquid'), attrs: Object.assign(Object.assign({}, props.attrs), { role: 'gridcell' }), style: {
                 width: props.width
-            }, extraRenderProps: props.extraRenderProps, defaultGenerator: renderTopInner, date: props.date, dateProfile: props.dateProfile, todayRange: props.todayRange, showDayNumber: props.showDayNumber, isMonthStart: isMonthStart }, (InnerContent, renderProps) => (createElement("div", { ref: this.innerElRef, className: [
-                'fc-daygrid-cell-inner',
-                props.fgLiquidHeight ? 'fc-liquid' : ''
-            ].join(' ') },
-            createElement("div", { ref: this.headerWrapElRef, className: "fc-flex-column" }, !renderProps.isDisabled && (props.showDayNumber || hasCustomDayCellContent(options)) && (createElement("div", { className: "fc-daygrid-cell-header" },
-                createElement(InnerContent, { elTag: "a", elClasses: [
-                        'fc-daygrid-cell-number',
-                        isMonthStart && 'fc-daygrid-month-start',
-                    ], elAttrs: buildNavLinkAttrs(context, props.date) })))),
-            createElement("div", { className: "fc-daygrid-cell-main", style: {
-                    height: props.fgLiquidHeight ? '' : props.fgHeight
-                } }, props.fg),
-            createElement("div", { className: "fc-daygrid-cell-footer", style: props.fgLiquidHeight
-                    ? { position: 'relative', top: props.fgHeight }
-                    : {} },
-                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))));
+            }, elRef: this.rootElRef, renderProps: props.renderProps, defaultGenerator: renderTopInner, date: props.date, dateProfile: props.dateProfile, todayRange: props.todayRange, showDayNumber: props.showDayNumber, isMonthStart: isMonthStart }, (InnerContent, renderProps) => (createElement(Fragment, null,
+            !renderProps.isDisabled && (props.showDayNumber || hasCustomDayCellContent(options)) && (createElement("div", { className: "fc-daygrid-day-header" },
+                createElement(InnerContent, { tag: "a", attrs: buildNavLinkAttrs(context, props.date), className: joinClassNames('fc-daygrid-day-number', isMonthStart && 'fc-daygrid-month-start') }))),
+            createElement("div", { className: joinClassNames('fc-daygrid-day-body', props.isTall && 'fc-daygrid-day-body-tall', props.fgLiquidHeight ? 'fc-liquid' : 'fc-grow'), ref: this.bodyElRef },
+                createElement("div", { className: 'fc-daygrid-day-events', style: { height: props.fgHeight } }, props.fg),
+                createElement(DayGridMoreLink, { isBlock: props.isCompact, allDayDate: props.date, segs: props.segs, hiddenSegs: props.hiddenSegs, alignElRef: this.rootElRef, alignParentTop: props.showDayNumber ? '[role=row]' : '.fc-view', dateSpanProps: props.dateSpanProps, dateProfile: props.dateProfile, eventSelection: props.eventSelection, eventDrag: props.eventDrag, eventResize: props.eventResize, todayRange: props.todayRange }))))));
     }
     componentDidMount() {
-        const innerEl = this.innerElRef.current; // TODO: make dynamic with useEffect
-        const headerWrapEl = this.headerWrapElRef.current; // "
-        // TODO: only attach this if refs props present
-        this.detachInnerHeight = watchHeight(innerEl, (height) => {
-            setRef(this.props.innerHeightRef, height);
-        });
-        this.detachHeaderHeight = watchHeight(headerWrapEl, (height) => {
-            setRef(this.props.headerHeightRef, height);
+        const bodyEl = this.bodyElRef.current;
+        // we want to fire on ANY size change, because we do more advanced stuff
+        this.disconnectBodyHeight = watchSize(bodyEl, (_bodyWidth, bodyHeight) => {
+            const { props } = this;
+            const mainRect = bodyEl.getBoundingClientRect();
+            const rootRect = this.rootElRef.current.getBoundingClientRect();
+            const headerHeight = mainRect.top - rootRect.top;
+            if (!isDimsEqual(this.headerHeight, headerHeight)) {
+                this.headerHeight = headerHeight;
+                setRef(props.headerHeightRef, headerHeight);
+            }
+            if (props.fgLiquidHeight) {
+                setRef(props.mainHeightRef, bodyHeight);
+            }
         });
     }
     componentWillUnmount() {
-        this.detachInnerHeight();
-        this.detachHeaderHeight();
-        setRef(this.props.innerHeightRef, null);
-        setRef(this.props.headerHeightRef, null);
+        this.disconnectBodyHeight();
+        const { props } = this;
+        setRef(props.headerHeightRef, null);
+        setRef(props.mainHeightRef, null);
     }
 }
 // Utils
@@ -385,121 +262,232 @@ function shouldDisplayMonthStart(date, currentRange, dateEnv) {
             (dateEnv.getDay(date) === 1 && date.valueOf() < currentEnd.valueOf()));
 }
 
+function computeFgSegVerticals(segs, segHeightMap, cells, maxHeight, strictOrder, allowSlicing = true, dayMaxEvents, dayMaxEventRows) {
+    let maxCoord;
+    let maxDepth;
+    let hiddenConsumes;
+    if (dayMaxEvents === true || dayMaxEventRows === true) {
+        maxCoord = maxHeight;
+        hiddenConsumes = true;
+    }
+    else if (typeof dayMaxEvents === 'number') {
+        maxDepth = dayMaxEvents;
+        hiddenConsumes = false;
+    }
+    else if (typeof dayMaxEventRows === 'number') {
+        maxDepth = dayMaxEventRows;
+        hiddenConsumes = true;
+    }
+    // NOTE: visibleSegsMap and hiddenSegMap map NEVER overlap for a given event
+    // once a seg has a height, the combined potentially-sliced segs will comprise the entire span of the seg
+    // if a seg does not have a height yet, it won't be inserted into either visibleSegsMap/hiddenSegMap
+    const visibleSegMap = new Map();
+    const hiddenSegMap = new Map();
+    const segTops = new Map();
+    const isSlicedMap = new Map();
+    let hierarchy = new SegHierarchy(segs, (seg) => segHeightMap.get(getEventPartKey(seg)), strictOrder, maxCoord, maxDepth, hiddenConsumes, allowSlicing);
+    hierarchy.traverseSegs((seg, segTop) => {
+        addToSegMap(visibleSegMap, seg);
+        segTops.set(getEventPartKey(seg), segTop);
+        if (seg.isSlice) {
+            isSlicedMap.set(seg.eventRange, true);
+        }
+    });
+    for (const hiddenSeg of hierarchy.hiddenSegs) {
+        addToSegMap(hiddenSegMap, hiddenSeg); // hidden main segs
+    }
+    // recompute tops while considering slices
+    // portions of these slices might be added to hiddenSegMap
+    if (isSlicedMap.size) {
+        segTops.clear();
+        hierarchy = new SegHierarchy(compileSegMap(segs, visibleSegMap), (seg) => segHeightMap.get(getEventPartKey(seg)), strictOrder, maxCoord, maxDepth, hiddenConsumes);
+        hierarchy.traverseSegs((seg, segTop) => {
+            segTops.set(getEventPartKey(seg), segTop); // newly-hidden main segs and slices
+        });
+        for (const hiddenSeg of hierarchy.hiddenSegs) {
+            addToSegMap(hiddenSegMap, hiddenSeg);
+        }
+    }
+    const segsByCol = [];
+    const hiddenSegsByCol = [];
+    const renderableSegsByCol = [];
+    const heightsByCol = [];
+    for (let col = 0; col < cells.length; col++) {
+        segsByCol.push([]);
+        hiddenSegsByCol.push([]);
+        renderableSegsByCol.push([]);
+        heightsByCol.push(0);
+    }
+    for (const seg of segs) {
+        const { eventRange } = seg;
+        const visibleSegs = visibleSegMap.get(eventRange) || [];
+        const hiddenSegs = hiddenSegMap.get(eventRange) || [];
+        const isSliced = isSlicedMap.get(eventRange) || false;
+        // add orig to renderable
+        renderableSegsByCol[seg.start].push(seg);
+        // add slices to renderable
+        if (isSliced) {
+            for (const visibleSeg of visibleSegs) {
+                renderableSegsByCol[visibleSeg.start].push(visibleSeg);
+            }
+        }
+        // accumulate segsByCol/heightsByCol for visible segs
+        for (const visibleSeg of visibleSegs) {
+            for (let col = visibleSeg.start; col < visibleSeg.end; col++) {
+                const slice = sliceSegForCol(visibleSeg, col);
+                segsByCol[col].push(slice);
+            }
+            const segKey = getEventPartKey(visibleSeg);
+            const segTop = segTops.get(segKey);
+            if (segTop != null) { // positioned?
+                const segHeight = segHeightMap.get(segKey);
+                for (let col = visibleSeg.start; col < visibleSeg.end; col++) {
+                    heightsByCol[col] = Math.max(heightsByCol[col], segTop + segHeight);
+                }
+            }
+        }
+        // accumulate segsByCol/hiddenSegsByCol for hidden segs
+        for (const hiddenSeg of hiddenSegs) {
+            for (let col = hiddenSeg.start; col < hiddenSeg.end; col++) {
+                const slice = sliceSegForCol(hiddenSeg, col);
+                segsByCol[col].push(slice);
+                hiddenSegsByCol[col].push(slice);
+            }
+        }
+    }
+    return [
+        segsByCol,
+        hiddenSegsByCol,
+        renderableSegsByCol,
+        segTops,
+        heightsByCol,
+    ];
+}
+// Utils
+// -------------------------------------------------------------------------------------------------
+function addToSegMap(map, seg) {
+    let list = map.get(seg.eventRange);
+    if (!list) {
+        map.set(seg.eventRange, list = []);
+    }
+    list.push(seg);
+}
 /*
-Unique per-START-column, good for cataloging by top
+Ensures relative order of DayRowEventRange stays consistent with segs
 */
-function getSegStartId(seg) {
-    return seg.eventRange.instance.instanceId + ':' + seg.firstCol;
+function compileSegMap(segs, segMap) {
+    const res = [];
+    for (const seg of segs) {
+        res.push(...(segMap.get(seg.eventRange) || []));
+    }
+    return res;
 }
+
 /*
-Unique per-START-and-END-column, good for cataloging by width/height
+TODO: move this so @fullcalendar/daygrid
 */
-function getSegSpanId(seg) {
-    return getSegStartId(seg) + ':' + seg.lastCol;
+function buildDayTableModel(dateProfile, dateProfileGenerator) {
+    let daySeries = new DaySeriesModel(dateProfile.renderRange, dateProfileGenerator);
+    return new DayTableModel(daySeries, /year|month|week/.test(dateProfile.currentRangeUnit));
 }
-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 = maxHeight;
-        hierarchy.hiddenConsumes = true;
+function computeColWidth(colCnt, colMinWidth, viewportWidth) {
+    if (viewportWidth == null) {
+        return [undefined, undefined];
     }
-    else if (typeof dayMaxEvents === 'number') {
-        hierarchy.maxStackCnt = dayMaxEvents;
+    const colTempWidth = viewportWidth / colCnt;
+    if (colTempWidth < colMinWidth) {
+        return [colMinWidth * colCnt, colMinWidth];
     }
-    else if (typeof dayMaxEventRows === 'number') {
-        hierarchy.maxStackCnt = dayMaxEventRows;
-        hierarchy.hiddenConsumes = true;
-    }
-    // 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);
+    return [viewportWidth, undefined];
+}
+// Positioning
+// -------------------------------------------------------------------------------------------------
+function computeTopFromDate(date, cellRows, rowHeightMap, adjust = 0) {
+    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;
         }
+        const rowHeight = rowHeightMap.get(key);
+        if (rowHeight == null) {
+            return; // denote unknown
+        }
+        top += rowHeight + adjust;
+    }
+    return top;
+}
+/*
+FYI, `width` is not dependable for aligning completely to farside
+*/
+function computeHorizontalsFromSeg(seg, colWidth, colCnt, isRtl) {
+    let fromStart;
+    let fromEnd;
+    if (colWidth != null) {
+        fromStart = seg.start * colWidth;
+        fromEnd = (colCnt - seg.end) * colWidth;
+    }
+    else {
+        const colWidthFrac = 1 / colCnt;
+        fromStart = fracToCssDim(seg.start * colWidthFrac);
+        fromEnd = fracToCssDim(1 - seg.end * colWidthFrac);
+    }
+    if (isRtl) {
+        return { right: fromStart, left: fromEnd };
+    }
+    else {
+        return { left: fromStart, right: fromEnd };
     }
-    // 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);
+}
+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 [segTops, heightsByCol, hiddenSegsByCol];
+    return { row, top, bottom };
 }
-// DayGridSegHierarchy
+// Hit Element
 // -------------------------------------------------------------------------------------------------
-class DayGridSegHierarchy extends SegHierarchy {
-    constructor() {
-        super(...arguments);
-        // config
-        this.hiddenConsumes = false;
-        // allows us to keep hidden entries in the hierarchy so they take up space
-        this.forceHidden = {};
-    }
-    addSegs(segInputs) {
-        const hiddenSegs = super.addSegs(segInputs);
-        const { entriesByLevel } = this;
-        const excludeHidden = (entry) => !this.forceHidden[buildEntryKey(entry)];
-        // remove the forced-hidden segs
-        for (let level = 0; level < entriesByLevel.length; level += 1) {
-            entriesByLevel[level] = entriesByLevel[level].filter(excludeHidden);
-        }
-        return hiddenSegs;
-    }
-    handleInvalidInsertion(insertion, entry, hiddenEntries) {
-        const { entriesByLevel, forceHidden } = this;
-        const { touchingEntry, touchingLevel, touchingLateral } = insertion;
-        // the entry that the new insertion is touching must be hidden
-        if (this.hiddenConsumes && touchingEntry) {
-            const touchingEntryId = buildEntryKey(touchingEntry);
-            if (!forceHidden[touchingEntryId]) {
-                if (this.allowReslicing) {
-                    // split up the touchingEntry, reinsert it
-                    const hiddenEntry = Object.assign(Object.assign({}, touchingEntry), { span: intersectSpans(touchingEntry.span, entry.span) });
-                    // reinsert the area that turned into a "more" link (so no other entries try to
-                    // occupy the space) but mark it forced-hidden
-                    const hiddenEntryId = buildEntryKey(hiddenEntry);
-                    forceHidden[hiddenEntryId] = true;
-                    entriesByLevel[touchingLevel][touchingLateral] = hiddenEntry;
-                    hiddenEntries.push(hiddenEntry);
-                    this.splitEntry(touchingEntry, entry, hiddenEntries);
-                }
-                else {
-                    forceHidden[touchingEntryId] = true;
-                    hiddenEntries.push(touchingEntry);
-                }
-            }
-        }
-        // will try to reslice...
-        super.handleInvalidInsertion(insertion, entry, hiddenEntries);
+function getRowEl(rootEl, row) {
+    return rootEl.querySelectorAll(':scope > [role=row]')[row];
+}
+function getCellEl(rowEl, col) {
+    return rowEl.querySelectorAll(':scope > [role=gridcell]')[col];
+}
+// Header Formatting
+// -------------------------------------------------------------------------------------------------
+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 createFormatter({ weekday: 'short' }); // "Sat"
     }
+    if (dayCnt > 1) {
+        return createFormatter({ weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true }); // "Sat 11/12"
+    }
+    return createFormatter({ weekday: 'long' }); // "Saturday"
 }
 
 class DayGridEventHarness extends Component {
@@ -510,129 +498,96 @@ class DayGridEventHarness extends Component {
     }
     render() {
         const { props } = this;
-        return (createElement("div", { className: "fc-abs", style: props.style, ref: this.rootElRef }, props.children));
+        return (createElement("div", { className: joinClassNames(props.className, 'fc-abs'), style: props.style, ref: this.rootElRef }, props.children));
     }
     componentDidMount() {
         const rootEl = this.rootElRef.current; // TODO: make dynamic with useEffect
-        this.detachHeight = watchHeight(rootEl, (height) => {
+        this.disconnectHeight = watchHeight(rootEl, (height) => {
             setRef(this.props.heightRef, height);
         });
     }
     componentWillUnmount() {
-        this.detachHeight();
+        this.disconnectHeight();
         setRef(this.props.heightRef, null);
     }
 }
 
 const DEFAULT_WEEK_NUM_FORMAT = createFormatter({ week: 'narrow' });
-const COMPACT_CELL_WIDTH = 80;
 class DayGridRow extends BaseComponent {
     constructor() {
         super(...arguments);
-        this.cellInnerHeightRefMap = new RefMap(() => {
-            afterSize(this.handleInnerHeights);
+        this.headerHeightRefMap = new RefMap(() => {
+            afterSize(this.handleSegPositioning);
         });
-        this.cellHeaderHeightRefMap = new RefMap(() => {
-            afterSize(this.handleHeaderHeights);
+        this.mainHeightRefMap = new RefMap(() => {
+            const fgLiquidHeight = this.props.dayMaxEvents === true || this.props.dayMaxEventRows === true;
+            if (fgLiquidHeight) {
+                afterSize(this.handleSegPositioning);
+            }
         });
         this.segHeightRefMap = new RefMap(() => {
-            afterSize(this.handleSegHeights);
+            afterSize(this.handleSegPositioning);
         });
         this.handleRootEl = (rootEl) => {
             this.rootEl = rootEl;
             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.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 {
-                setRef(props.innerHeightRef, max);
-            }
-        };
-        this.handleSegHeights = () => {
-            this.setState({ segHeightRev: this.segHeightRefMap.rev }); // will trigger event rerender
+        this.handleSegPositioning = () => {
+            this.forceUpdate();
         };
     }
     render() {
-        const { props, state, context, cellInnerHeightRefMap, cellHeaderHeightRefMap } = this;
+        const { props, context, headerHeightRefMap, mainHeightRefMap } = 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 = 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 [maxMainTop, minMainHeight] = this.computeFgDims(); // uses headerHeightRefMap/mainHeightRefMap
+        const [segsByCol, hiddenSegsByCol, renderableSegsByCol, segTops, simpleHeightsByCol] = computeFgSegVerticals(fgEventSegs, this.segHeightRefMap.current, cells, fgLiquidHeight ? minMainHeight : undefined, // if not defined in first run, will unlimited!?
+        options.eventOrderStrict, options.eventSlicing, props.dayMaxEvents, props.dayMaxEventRows);
+        const heightsByCol = [];
+        if (maxMainTop != null) {
+            let col = 0;
+            for (const cell of cells) { // uses headerHeightRefMap/maxMainTop/simpleHeightsByCol
+                const cellHeaderHeight = headerHeightRefMap.current.get(cell.key);
+                const extraFgHeight = maxMainTop - cellHeaderHeight;
+                heightsByCol.push(simpleHeightsByCol[col++] + extraFgHeight);
+            }
+        }
+        const highlightSegs = this.getHighlightSegs();
+        const mirrorSegs = this.getMirrorSegs();
         const forcedInvisibleMap = // TODO: more convenient/DRY
          (props.eventDrag && props.eventDrag.affectedInstances) ||
             (props.eventResize && props.eventResize.affectedInstances) ||
             {};
-        return (createElement("div", { role: 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: {
+        return (createElement("div", { role: 'row' // TODO: audit this for all scenarios
+            , className: joinClassNames('fc-flex-row fc-rel', props.className), style: {
                 minHeight: props.minHeight,
             }, ref: this.handleRootEl },
-            props.cells.map((cell, col) => {
-                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 (createElement(DayGridCell, { key: cell.key, dateProfile: props.dateProfile, todayRange: props.todayRange, date: cell.date, showDayNumber: props.showDayNumbers, 
+            this.renderFillSegs(props.businessHourSegs, 'non-business'),
+            this.renderFillSegs(props.bgEventSegs, 'bg-event'),
+            this.renderFillSegs(highlightSegs, 'highlight'),
+            createElement("div", { className: 'fc-flex-row fc-liquid fc-rel' }, props.cells.map((cell, col) => {
+                const normalFgNodes = this.renderFgSegs(maxMainTop, renderableSegsByCol[col], segTops, props.todayRange, forcedInvisibleMap);
+                return (createElement(DayGridCell, { key: cell.key, dateProfile: props.dateProfile, todayRange: props.todayRange, date: cell.date, showDayNumber: props.showDayNumbers, isCompact: props.isCompact, isTall: props.isTall, borderStart: Boolean(col), 
                     // content
-                    segs: fgEventSegsByCol[col], hiddenSegs: hiddenSegsByCol[col], fgLiquidHeight: fgLiquidHeight, fg: (createElement(Fragment, null,
-                        createElement(Fragment, null, normalFgNodes),
-                        createElement(Fragment, null, mirrorFgNodes))), bg: (createElement(Fragment, null,
-                        this.renderFillSegs(highlightSegsByCol[col], 'highlight'),
-                        this.renderFillSegs(businessHoursByCol[col], 'non-business'),
-                        this.renderFillSegs(bgEventSegsByCol[col], 'bg-event'))), eventDrag: props.eventDrag, eventResize: props.eventResize, eventSelection: props.eventSelection, 
+                    segs: segsByCol[col], hiddenSegs: hiddenSegsByCol[col], fgLiquidHeight: fgLiquidHeight, fg: (createElement(Fragment, null, normalFgNodes)), eventDrag: props.eventDrag, eventResize: props.eventResize, eventSelection: props.eventSelection, 
                     // render hooks
-                    extraRenderProps: cell.extraRenderProps, extraDateSpan: cell.extraDateSpan, extraDataAttrs: cell.extraDataAttrs, extraClassNames: cell.extraClassNames, 
+                    renderProps: cell.renderProps, dateSpanProps: cell.dateSpanProps, attrs: cell.attrs, className: cell.className, 
                     // dimensions
                     fgHeight: heightsByCol[col], width: props.colWidth, 
                     // refs
-                    innerHeightRef: cellInnerHeightRefMap.createRef(cell.key), headerHeightRef: cellHeaderHeightRefMap.createRef(cell.key) }));
-            }),
-            props.showWeekNumbers && (createElement(WeekNumberContainer, { elTag: "a", elClasses: ['fc-daygrid-week-number'], elAttrs: buildNavLinkAttrs(context, weekDate, 'week'), date: weekDate, defaultFormat: DEFAULT_WEEK_NUM_FORMAT }))));
-    }
-    renderFgSegs(segs, segTops, todayRange, forcedInvisibleMap, isDragging, isResizing, isDateSelecting) {
+                    headerHeightRef: headerHeightRefMap.createRef(cell.key), mainHeightRef: mainHeightRefMap.createRef(cell.key) }));
+            })),
+            props.showWeekNumbers && (createElement(WeekNumberContainer, { tag: "a", attrs: buildNavLinkAttrs(context, weekDate, 'week'), className: 'fc-daygrid-week-number', date: weekDate, defaultFormat: DEFAULT_WEEK_NUM_FORMAT })),
+            this.renderFgSegs(maxMainTop, mirrorSegs, segTops, props.todayRange, {}, // forcedInvisibleMap
+            Boolean(props.eventDrag), Boolean(props.eventResize), false)));
+    }
+    renderFgSegs(headerHeight, segs, segTops, todayRange, forcedInvisibleMap, isDragging, isResizing, isDateSelecting) {
+        var _a;
         const { props, context, segHeightRefMap } = this;
         const { isRtl } = context;
         const { colWidth, eventSelection } = props;
@@ -641,30 +596,26 @@ class DayGridRow extends BaseComponent {
         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 { eventRange } = seg;
+            const key = getEventPartKey(seg);
+            const { standinFor, eventRange } = seg;
             const { instanceId } = 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(createElement(DayGridEventHarness, { key: segSpanId, style: {
-                    visibility: isVisible ? '' : 'hidden',
+            if (standinFor) {
+                continue;
+            }
+            const { left, right } = computeHorizontalsFromSeg(seg, colWidth, colCnt, isRtl);
+            const localTop = (_a = segTops.get(standinFor ? getEventPartKey(standinFor) : key)) !== null && _a !== void 0 ? _a : (isMirror ? 0 : undefined);
+            const top = headerHeight != null && localTop != null
+                ? headerHeight + localTop
+                : undefined;
+            const isInvisible = standinFor || forcedInvisibleMap[instanceId] || top == null;
+            nodes.push(createElement(DayGridEventHarness, { key: key, className: seg.start ? 'fc-border-transparent fc-border-s' : '', style: {
+                    visibility: isInvisible ? 'hidden' : '',
                     top,
                     left,
                     right,
-                    width,
-                }, heightRef: (isMirror || seg.isStandin)
-                    ? null
-                    : segHeightRefMap.createRef(segSpanId) }, hasListItemDisplay(seg) ? (createElement(DayGridListEvent, Object.assign({ eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: isDragging, isSelected: instanceId === eventSelection, defaultDisplayEventEnd: defaultDisplayEventEnd }, getEventRangeMeta(eventRange, todayRange)))) : (createElement(DayGridBlockEvent, Object.assign({ eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: isDragging, isResizing: isResizing, isDateSelecting: isDateSelecting, isSelected: instanceId === eventSelection, defaultDisplayEventEnd: defaultDisplayEventEnd }, getEventRangeMeta(eventRange, todayRange))))));
+                }, heightRef: (!standinFor && !isMirror)
+                    ? segHeightRefMap.createRef(key)
+                    : null }, hasListItemDisplay(seg) ? (createElement(DayGridListEvent, Object.assign({ eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: isDragging, isSelected: instanceId === eventSelection, defaultDisplayEventEnd: defaultDisplayEventEnd }, getEventRangeMeta(eventRange, todayRange)))) : (createElement(DayGridBlockEvent, Object.assign({ eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: isDragging, isResizing: isResizing, isDateSelecting: isDateSelecting, isSelected: instanceId === eventSelection, defaultDisplayEventEnd: defaultDisplayEventEnd }, getEventRangeMeta(eventRange, todayRange))))));
         }
         return nodes;
     }
@@ -675,17 +626,17 @@ class DayGridRow extends BaseComponent {
         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(createElement("div", { key: buildEventRangeKey(seg.eventRange), className: "fc-fill-y", style: {
+            const key = buildEventRangeKey(seg.eventRange); // TODO: use different type of key than fg!?
+            const { left, right } = computeHorizontalsFromSeg(seg, colWidth, colCnt, isRtl);
+            const isVisible = !seg.standinFor;
+            nodes.push(createElement("div", { key: key, className: "fc-fill-y", style: {
                     visibility: isVisible ? '' : 'hidden',
                     left,
                     right,
-                    width,
                 } }, fillType === 'bg-event' ?
                 createElement(BgEvent, Object.assign({ eventRange: seg.eventRange, isStart: seg.isStart, isEnd: seg.isEnd }, getEventRangeMeta(seg.eventRange, todayRange))) : (renderFill(fillType))));
         }
-        return createElement(Fragment, {}, ...nodes);
+        return createElement(Fragment, {}, ...nodes); // TODO: shouldn't this be an array, so keyed?
     }
     // Sizing
     // -----------------------------------------------------------------------------------------------
@@ -698,9 +649,36 @@ class DayGridRow extends BaseComponent {
     componentWillUnmount() {
         this.disconnectHeight();
         setRef(this.props.heightRef, null);
-        setRef(this.props.innerHeightRef, null);
     }
-    // Utils
+    computeFgDims() {
+        const { cells } = this.props;
+        const headerHeightMap = this.headerHeightRefMap.current;
+        const mainHeightMap = this.mainHeightRefMap.current;
+        let maxMainTop;
+        let minMainBottom;
+        for (const cell of cells) {
+            const mainTop = headerHeightMap.get(cell.key);
+            const mainHeight = mainHeightMap.get(cell.key);
+            if (mainTop != null) {
+                if (maxMainTop === undefined || mainTop > maxMainTop) {
+                    maxMainTop = mainTop;
+                }
+                if (mainHeight != null) {
+                    const mainBottom = mainTop + mainHeight;
+                    if (minMainBottom === undefined || mainBottom < minMainBottom) {
+                        minMainBottom = mainBottom;
+                    }
+                }
+            }
+        }
+        return [
+            maxMainTop,
+            minMainBottom != null && maxMainTop != null
+                ? minMainBottom - maxMainTop
+                : undefined,
+        ];
+    }
+    // Internal Utils
     // -----------------------------------------------------------------------------------------------
     getMirrorSegs() {
         let { props } = this;
@@ -753,7 +731,7 @@ class DayGridRows extends DateComponent {
         };
     }
     render() {
-        let { props, state, context, rowHeightRefMap } = this;
+        let { props, context, rowHeightRefMap } = this;
         let { options } = context;
         let rowCnt = props.cellRows.length;
         let fgEventSegsByRow = this.splitFgEventSegs(props.fgEventSegs, rowCnt);
@@ -762,31 +740,31 @@ class DayGridRows extends DateComponent {
         let dateSelectionSegsByRow = this.splitDateSelectionSegs(props.dateSelectionSegs, rowCnt);
         let eventDragByRow = this.splitEventDrag(props.eventDrag, rowCnt);
         let eventResizeByRow = this.splitEventResize(props.eventResize, rowCnt);
-        // 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 = 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 (createElement("div", { className: 'fc-grow fc-flex-column', style: { width: props.width }, ref: this.handleRootEl }, props.cellRows.map((cells, row) => (createElement(DayGridRow, { key: cells[0].key, dateProfile: props.dateProfile, todayRange: props.todayRange, cells: cells, showDayNumbers: rowCnt > 1, showWeekNumbers: options.weekNumbers, forPrint: props.forPrint, compact: state.width != null && (state.width / cells.length) < COMPACT_CELL_WIDTH, 
+        let rowHeightsRedistribute = !props.forPrint && !isHeightAuto;
+        let [rowMinHeight, isCompact] = computeRowHeight(props.visibleWidth, rowCnt, isHeightAuto, props.forPrint, options);
+        return (createElement("div", { className: joinClassNames(
+            // HACK for Safari. Can't do break-inside:avoid with flexbox items, likely b/c it's not standard:
+            // https://stackoverflow.com/a/60256345
+            !props.forPrint && 'fc-flex-col', props.className), style: { width: props.width }, ref: this.handleRootEl }, props.cellRows.map((cells, row) => (createElement(DayGridRow, { key: cells[0].key, dateProfile: props.dateProfile, todayRange: props.todayRange, cells: cells, showDayNumbers: rowCnt > 1, showWeekNumbers: options.weekNumbers, forPrint: props.forPrint, isCompact: isCompact, 
             // 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', 
+            className: joinClassNames(rowHeightsRedistribute && 'fc-grow fc-basis0', rowCnt > 1 && 'fc-break-inside-avoid', // don't avoid breaks for single tall row
+            row < rowCnt - 1 && 'fc-border-b'), 
             // 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, 
+            fgEventSegs: fgEventSegsByRow[row], bgEventSegs: bgEventSegsByRow[row].filter(isSegAllDay) /* HACK */, businessHourSegs: businessHourSegsByRow[row], dateSelectionSegs: dateSelectionSegsByRow[row], eventSelection: props.eventSelection, eventDrag: eventDragByRow[row], eventResize: eventResizeByRow[row], dayMaxEvents: props.dayMaxEvents, dayMaxEventRows: props.dayMaxEventRows, 
             // dimensions
             colWidth: props.colWidth, minHeight: rowMinHeight, 
             // refs
             heightRef: rowHeightRefMap.createRef(cells[0].key) })))));
     }
     componentDidMount() {
-        this.detachWidth = watchWidth(this.rootEl, (width) => {
+        this.disconnectWidth = watchWidth(this.rootEl, (width) => {
             this.setState({ width });
         });
     }
     componentWillUnmount() {
-        this.detachWidth();
+        this.disconnectWidth();
     }
     // Hit System
     // -----------------------------------------------------------------------------------------------
@@ -803,7 +781,7 @@ class DayGridRows extends DateComponent {
             dateSpan: Object.assign({ range: {
                     start: cellStartDate,
                     end: cellEndDate,
-                }, allDay: true }, cell.extraDateSpan),
+                }, allDay: true }, cell.dateSpanProps),
             // HACK. TODO: This is expensive to do every hit-query
             dayEl: getCellEl(getRowEl(this.rootEl, row), col),
             rect: {
@@ -821,28 +799,96 @@ class DayGridRows extends DateComponent {
 function isSegAllDay(seg) {
     return seg.eventRange.def.allDay;
 }
+function computeRowHeight(visibleWidth, // should INCLUDE any scrollbar width to avoid oscillation
+rowCnt, isHeightAuto, forPrint, options) {
+    if (visibleWidth != null) {
+        // ensure a consistent row min-height modelled after a month with 6 rows respecting aspectRatio
+        // will result in same minHeight regardless of weekends, dayMinWidth, height:auto
+        const rowMinHeight = visibleWidth / options.aspectRatio / 6;
+        return [
+            forPrint
+                // special-case for print, which condenses whole-page width without notifying
+                // this is value that looks natural on paper for portrait/landscape
+                ? '6em'
+                // don't give minHeight when single-month non-auto-height
+                // TODO: better way to detect this with DateProfile?
+                : (rowCnt > 6 || isHeightAuto)
+                    ? rowMinHeight
+                    : undefined,
+            // isCompact?: just before most lone +more links hit bottom of cell
+            rowMinHeight < 70,
+        ];
+    }
+    return [undefined, false];
+}
+
+class DayGridHeaderCell extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.handleInnerEl = (innerEl) => {
+            if (this.disconectInnerHeight) {
+                this.disconectInnerHeight();
+                this.disconectInnerHeight = undefined;
+            }
+            if (innerEl) {
+                this.disconectInnerHeight = watchHeight(innerEl, (height) => {
+                    setRef(this.props.innerHeightRef, height);
+                });
+            }
+            else {
+                setRef(this.props.innerHeightRef, null);
+            }
+        };
+    }
+    render() {
+        const { props } = this;
+        const { renderConfig, dataConfig } = props;
+        return (createElement(ContentContainer, { tag: 'div', attrs: dataConfig.attrs, className: joinClassNames(dataConfig.className, 'fc-header-cell fc-cell fc-flex-col fc-align-center', props.borderStart && 'fc-border-s', !props.isSticky && 'fc-crop', props.colWidth == null && 'fc-liquid'), style: {
+                width: props.colWidth != null
+                    ? props.colWidth * (dataConfig.colSpan || 1)
+                    : undefined,
+            }, renderProps: dataConfig.renderProps, generatorName: renderConfig.generatorName, customGenerator: renderConfig.customGenerator, defaultGenerator: renderText, classNameGenerator: 
+            // don't use custom classNames if disabled
+            // TODO: make DRY with DayCellContainer
+            dataConfig.renderProps.isDisabled ? undefined : renderConfig.classNameGenerator, didMount: renderConfig.didMount, willUnmount: renderConfig.willUnmount }, (InnerContainer) => (!dataConfig.renderProps.isDisabled && (createElement(InnerContainer, { tag: dataConfig.isNavLink ? 'a' : 'div', attrs: dataConfig.innerAttrs, className: joinClassNames('fc-cell-inner fc-flex-col fc-padding-sm', props.isSticky && 'fc-sticky-s'), elRef: this.handleInnerEl })))));
+    }
+}
 
-class HeaderRow extends BaseComponent {
+class DayGridHeaderRow extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        // ref
+        this.innerHeightRefMap = new RefMap(() => {
+            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;
+                setRef(this.props.innerHeightRef, max);
+            }
+        };
+    }
     render() {
         const { props } = this;
-        return (createElement("div", { role: props.cellGroup ? undefined : 'row', className: [
-                props.cellGroup ? 'fc-flex-row' : 'fc-row',
-                props.className || '',
-            ].join(' ') }, props.cells.map((cell) => (createElement(Fragment, { key: props.getHeaderModelKey(cell) }, props.renderHeaderContent(cell, props.tierNum, undefined, // innerHeightRef
-        props.colWidth))))));
+        return (createElement("div", { role: 'row', className: joinClassNames('fc-flex-row fc-content-box', props.className), style: { height: props.height } }, props.dataConfigs.map((dataConfig, cellI) => (createElement(DayGridHeaderCell, { key: dataConfig.key, renderConfig: props.renderConfig, dataConfig: dataConfig, isSticky: props.isSticky, borderStart: Boolean(cellI), colWidth: props.colWidth, innerHeightRef: props.innerHeightRef })))));
     }
 }
 
-function DayGridHeader(props) {
-    return (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) => (createElement(HeaderRow, { key: tierNum, tierNum: tierNum, cells: cells, renderHeaderContent: props.renderHeaderContent, getHeaderModelKey: props.getHeaderModelKey, colWidth: props.colWidth })))));
+/*
+TODO: kill this class in favor of DayGridHeaderRows?
+*/
+class DayGridHeader extends BaseComponent {
+    render() {
+        const { props } = this;
+        return (createElement("div", { className: joinClassNames(props.className, 'fc-flex-col', props.width == null && 'fc-liquid'), style: {
+                width: props.width
+            } }, props.headerTiers.map((rowConfig, tierNum) => (createElement(DayGridHeaderRow, Object.assign({}, rowConfig, { key: tierNum, className: tierNum ? 'fc-border-t' : '', colWidth: props.colWidth }))))));
+    }
 }
 
 class DayGridLayoutNormal extends BaseComponent {
@@ -851,11 +897,11 @@ class DayGridLayoutNormal extends BaseComponent {
         this.handleScroller = (scroller) => {
             setRef(this.props.scrollerRef, scroller);
         };
-        this.handleLeftScrollbarWidth = (leftScrollbarWidth) => {
-            this.setState({ leftScrollbarWidth });
+        this.handleClientWidth = (clientWidth) => {
+            this.setState({ clientWidth });
         };
-        this.handleRightScrollbarWidth = (rightScrollbarWidth) => {
-            this.setState({ rightScrollbarWidth });
+        this.handleEndScrollbarWidth = (endScrollbarWidth) => {
+            this.setState({ endScrollbarWidth });
         };
     }
     render() {
@@ -864,24 +910,22 @@ class DayGridLayoutNormal extends BaseComponent {
         const verticalScrollbars = !props.forPrint && !getIsHeightAuto(options);
         const stickyHeaderDates = !props.forPrint && getStickyHeaderDates(options);
         return (createElement(Fragment, null,
-            options.dayHeaders && (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 })),
-            createElement(Scroller, { vertical: verticalScrollbars, leftScrollbarWidthRef: this.handleLeftScrollbarWidth, rightScrollbarWidthRef: this.handleRightScrollbarWidth, elClassNames: [
-                    'fc-daygrid-body',
-                    'fc-rowgroup',
-                    'fc-flex-column',
-                    verticalScrollbars ? 'fc-liquid' : '',
-                ], ref: this.handleScroller },
-                createElement(DayGridRows // .fc-grow
-                , { dateProfile: props.dateProfile, todayRange: props.todayRange, cellRows: props.cellRows, forPrint: props.forPrint, isHitComboAllowed: props.isHitComboAllowed, 
+            options.dayHeaders && (createElement("div", { className: joinClassNames(props.forPrint ? 'fc-print-header' : 'fc-flex-row', // col for print, row for screen
+                'fc-border-b') },
+                createElement(DayGridHeader, { headerTiers: props.headerTiers, className: joinClassNames('fc-daygrid-header', stickyHeaderDates && 'fc-table-header-sticky') }),
+                Boolean(state.endScrollbarWidth) && (createElement("div", { className: 'fc-border-s fc-filler', style: { minWidth: state.endScrollbarWidth } })))),
+            createElement(Scroller, { vertical: verticalScrollbars, clientWidthRef: this.handleClientWidth, endScrollbarWidthRef: this.handleEndScrollbarWidth, className: joinClassNames('fc-daygrid-body', 
+                // HACK for Safari. Can't do break-inside:avoid with flexbox items, likely b/c it's not standard:
+                // https://stackoverflow.com/a/60256345
+                !props.forPrint && 'fc-flex-col', verticalScrollbars && 'fc-liquid'), ref: this.handleScroller },
+                createElement(DayGridRows, { dateProfile: props.dateProfile, todayRange: props.todayRange, cellRows: props.cellRows, forPrint: props.forPrint, isHitComboAllowed: props.isHitComboAllowed, className: 'fc-grow', dayMaxEvents: props.forPrint ? undefined : options.dayMaxEvents, dayMaxEventRows: options.dayMaxEventRows, 
                     // content
                     fgEventSegs: props.fgEventSegs, bgEventSegs: props.bgEventSegs, businessHourSegs: props.businessHourSegs, dateSelectionSegs: props.dateSelectionSegs, eventDrag: props.eventDrag, eventResize: props.eventResize, eventSelection: props.eventSelection, 
+                    // dimensions
+                    visibleWidth: // TODO: DRY
+                    state.clientWidth != null && state.endScrollbarWidth != null
+                        ? state.clientWidth + state.endScrollbarWidth
+                        : undefined, 
                     // refs
                     rowHeightRefMap: props.rowHeightRefMap }))));
     }
@@ -895,14 +939,11 @@ class DayGridLayoutPannable extends BaseComponent {
         this.footerScrollerRef = createRef();
         // Sizing
         // -----------------------------------------------------------------------------------------------
-        this.handleWidth = (width) => {
-            this.setState({ width });
-        };
-        this.handleLeftScrollbarWidth = (leftScrollbarWidth) => {
-            this.setState({ leftScrollbarWidth });
+        this.handleClientWidth = (clientWidth) => {
+            this.setState({ clientWidth });
         };
-        this.handleRightScrollbarWidth = (rightScrollbarWidth) => {
-            this.setState({ rightScrollbarWidth });
+        this.handleEndScrollbarWidth = (endScrollbarWidth) => {
+            this.setState({ endScrollbarWidth });
         };
     }
     render() {
@@ -912,37 +953,29 @@ class DayGridLayoutPannable extends BaseComponent {
         const stickyHeaderDates = !props.forPrint && getStickyHeaderDates(options);
         const stickyFooterScrollbar = !props.forPrint && getStickyFooterScrollbar(options);
         const colCnt = props.cellRows[0].length;
-        const [canvasWidth, colWidth] = computeColWidth(colCnt, props.dayMinWidth, state.width);
+        const [canvasWidth, colWidth] = computeColWidth(colCnt, props.dayMinWidth, state.clientWidth);
         return (createElement(Fragment, null,
-            options.dayHeaders && (createElement(Scroller, { horizontal: true, hideScrollbars: true, elClassNames: [
-                    'fc-daygrid-header',
-                    'fc-rowgroup',
-                    stickyHeaderDates ? 'fc-sticky-header' : ''
-                ], ref: this.headerScrollerRef },
-                createElement(DayGridHeader, { headerTiers: props.headerTiers, renderHeaderContent: props.renderHeaderContent, getHeaderModelKey: props.getHeaderModelKey, 
-                    // dimensions
-                    colWidth: colWidth, width: canvasWidth, paddingLeft: state.leftScrollbarWidth, paddingRight: state.rightScrollbarWidth }))),
-            createElement(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 },
-                createElement(DayGridRows // .fc-grow
-                , { dateProfile: props.dateProfile, todayRange: props.todayRange, cellRows: props.cellRows, forPrint: props.forPrint, isHitComboAllowed: props.isHitComboAllowed, 
+            options.dayHeaders && (createElement("div", { className: 'fc-print-header' },
+                createElement(Scroller, { horizontal: true, hideScrollbars: true, className: joinClassNames('fc-daygrid-header fc-flex-row fc-border-b', stickyHeaderDates && 'fc-table-header-sticky'), ref: this.headerScrollerRef },
+                    createElement(DayGridHeader, { headerTiers: props.headerTiers, colWidth: colWidth, width: canvasWidth }),
+                    Boolean(state.endScrollbarWidth) && (createElement("div", { className: 'fc-border-s fc-filler', style: { minWidth: state.endScrollbarWidth } }))))),
+            createElement(Scroller, { vertical: verticalScrollbars, horizontal: true, hideScrollbars: stickyFooterScrollbar ||
+                    props.forPrint // prevents blank space in print-view on Safari
+                , className: joinClassNames('fc-daygrid-body', 
+                // HACK for Safari. Can't do break-inside:avoid with flexbox items, likely b/c it's not standard:
+                // https://stackoverflow.com/a/60256345
+                !props.forPrint && 'fc-flex-col', verticalScrollbars && 'fc-liquid'), ref: this.bodyScrollerRef, clientWidthRef: this.handleClientWidth, endScrollbarWidthRef: this.handleEndScrollbarWidth },
+                createElement(DayGridRows, { dateProfile: props.dateProfile, todayRange: props.todayRange, cellRows: props.cellRows, forPrint: props.forPrint, isHitComboAllowed: props.isHitComboAllowed, className: 'fc-grow', dayMaxEvents: props.forPrint ? undefined : options.dayMaxEvents, dayMaxEventRows: options.dayMaxEventRows, 
                     // content
                     fgEventSegs: props.fgEventSegs, bgEventSegs: props.bgEventSegs, businessHourSegs: props.businessHourSegs, dateSelectionSegs: props.dateSelectionSegs, eventDrag: props.eventDrag, eventResize: props.eventResize, eventSelection: props.eventSelection, 
                     // dimensions
-                    colWidth: colWidth, width: canvasWidth, 
+                    colWidth: colWidth, width: canvasWidth, visibleWidth: // TODO: DRY
+                    state.clientWidth != null && state.endScrollbarWidth != null
+                        ? state.clientWidth + state.endScrollbarWidth
+                        : undefined, 
                     // refs
                     rowHeightRefMap: props.rowHeightRefMap })),
-            Boolean(stickyFooterScrollbar) && (createElement(Scroller, { ref: this.footerScrollerRef, horizontal: true, elClassNames: ['fc-sticky-footer'], elStyle: {
-                    marginTop: '-1px', // HACK
-                } },
-                createElement("div", { style: {
-                        width: canvasWidth,
-                        height: '1px', // HACK
-                    } })))));
+            Boolean(stickyFooterScrollbar) && (createElement(StickyFooterScrollbar, { canvasWidth: canvasWidth, scrollerRef: this.footerScrollerRef }))));
     }
     // Lifecycle
     // -----------------------------------------------------------------------------------------------
@@ -1005,7 +1038,7 @@ class DayGridLayout extends BaseComponent {
         const { props, context } = this;
         const { options } = context;
         const commonLayoutProps = Object.assign(Object.assign({}, props), { scrollerRef: this.scrollerRef, rowHeightRefMap: this.rowHeightRefMap });
-        return (createElement(ViewContainer, { viewSpec: context.viewSpec, elClasses: [props.className, 'fc-flex-column', 'fc-border'] }, options.dayMinWidth ? (createElement(DayGridLayoutPannable, Object.assign({}, commonLayoutProps, { dayMinWidth: options.dayMinWidth }))) : (createElement(DayGridLayoutNormal, Object.assign({}, commonLayoutProps)))));
+        return (createElement(ViewContainer, { viewSpec: context.viewSpec, className: joinClassNames(props.className, 'fc-print-root fc-border') }, options.dayMinWidth ? (createElement(DayGridLayoutPannable, Object.assign({}, commonLayoutProps, { dayMinWidth: options.dayMinWidth }))) : (createElement(DayGridLayoutNormal, Object.assign({}, commonLayoutProps)))));
     }
     // Lifecycle
     // -----------------------------------------------------------------------------------------------
@@ -1032,85 +1065,12 @@ class DayGridLayout extends BaseComponent {
     }
 }
 
-const WEEKDAY_FORMAT = createFormatter({ weekday: 'long' });
-class DayOfWeekHeaderCell extends BaseComponent {
-    constructor() {
-        super(...arguments);
-        // ref
-        this.innerElRef = createRef();
-    }
-    render() {
-        let { props, context } = this;
-        let { dateEnv, theme, viewApi, options } = context;
-        let date = 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 (createElement(ContentContainer, { elTag: 'div', elClasses: [
-                ...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) => (createElement("div", { ref: this.innerElRef, className: [
-                'fc-flex-column',
-                props.isSticky ? 'fc-sticky-x' : '',
-            ].join(' ') },
-            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 = watchHeight(innerEl, (height) => {
-            setRef(this.props.innerHeightRef, height);
-        });
-    }
-    componentWillUnmount() {
-        this.disconectInnerHeight();
-        setRef(this.props.innerHeightRef, null);
-    }
-}
-
-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 createFormatter({ weekday: 'short' }); // "Sat"
-    }
-    if (dayCnt > 1) {
-        return createFormatter({ weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true }); // "Sat 11/12"
-    }
-    return createFormatter({ weekday: 'long' }); // "Saturday"
-}
-
 class DayGridView extends BaseComponent {
     constructor() {
         super(...arguments);
         // memo
         this.buildDayTableModel = memoize(buildDayTableModel);
-        this.buildHeaderTiers = memoize(buildHeaderTiers);
+        this.buildDateRowConfigs = memoize(buildDateRowConfigs);
         this.createDayHeaderFormatter = memoize(createDayHeaderFormatter);
         // internal
         this.slicer = new DayTableSlicer();
@@ -1120,60 +1080,58 @@ class DayGridView extends BaseComponent {
         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 (createElement(NowTimer, { unit: "day" }, (nowDate, todayRange) => (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 (createElement(DateHeaderCell, Object.assign({}, model, { dateProfile: props.dateProfile, todayRange: todayRange, navLink: dayTableModel.colCnt > 1, dayHeaderFormat: dayHeaderFormat, colSpan: model.colSpan, colWidth: colWidth })));
-                }
-                else {
-                    return (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 }))));
+        const slicedProps = this.slicer.sliceProps(props, props.dateProfile, options.nextDayThreshold, context, dayTableModel);
+        return (createElement(NowTimer, { unit: "day" }, (nowDate, todayRange) => {
+            const headerTiers = this.buildDateRowConfigs(dayTableModel.headerDates, datesRepDistinctDays, props.dateProfile, todayRange, dayHeaderFormat, context);
+            return (createElement(DayGridLayout, { dateProfile: props.dateProfile, todayRange: todayRange, cellRows: dayTableModel.cellRows, forPrint: props.forPrint, className: 'fc-daygrid', 
+                // header content
+                headerTiers: headerTiers, 
+                // body content
+                fgEventSegs: slicedProps.fgEventSegs, bgEventSegs: slicedProps.bgEventSegs, businessHourSegs: slicedProps.businessHourSegs, dateSelectionSegs: slicedProps.dateSelectionSegs, eventDrag: slicedProps.eventDrag, eventResize: slicedProps.eventResize, eventSelection: slicedProps.eventSelection }));
+        }));
     }
 }
 
-/*
-TODO: is it even worth doing this "advanced" version?
-*/
-class HeaderRowAdvanced extends BaseComponent {
-    constructor() {
-        super(...arguments);
-        // ref
-        this.innerHeightRefMap = new RefMap(() => {
-            afterSize(this.handleInnerHeights);
+class TableDateProfileGenerator extends 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,
         });
-        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;
-                setRef(this.props.innerHeightRef, max);
-            }
-        };
     }
-    render() {
-        const { props } = this;
-        return (createElement("div", { role: 'row', className: 'fc-row', style: { height: props.height } }, props.cells.map((cell) => {
-            const key = props.getHeaderModelKey(cell);
-            return (createElement(Fragment, { key: props.getHeaderModelKey(cell) }, props.renderHeaderContent(cell, props.tierNum, this.innerHeightRefMap.createRef(key), // innerHeightRef
-            props.colWidth)));
-        })));
+}
+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 = 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(addDays(currentRange.end, -1)));
+        let rowCnt = Math.ceil(// could be partial weeks due to hiddenDays
+        diffWeeks(lastMonthRenderStart, end));
+        end = addWeeks(end, 6 - rowCnt);
     }
+    return { start, end };
 }
 
-export { COMPACT_CELL_WIDTH, DateHeaderCell, DayGridLayout, DayGridRow, DayGridRows, DayGridView, DayOfWeekHeaderCell, DayTableSlicer, HeaderRow, HeaderRowAdvanced, TableDateProfileGenerator, buildDayTableModel, buildDayTableRenderRange, computeColFromPosition, computeColWidth, createDayHeaderFormatter, getCellEl, getRowEl };
+var css_248z = ":root{--fc-daygrid-event-dot-width:8px}.fc-daygrid-day.fc-day-today{background-color:var(--fc-today-bg-color)}.fc-daygrid-day-header{display:flex;flex-direction:row-reverse}.fc-day-other .fc-daygrid-day-header{opacity:.3}.fc-daygrid-day-number{padding:4px;position:relative}.fc-daygrid-month-start{font-size:1.1em;font-weight:700}.fc-daygrid-day-body{display:flex;flex-direction:column;margin-bottom:1px}.fc-daygrid-day-body-tall{margin-bottom:1em;min-height:2em}.fc-daygrid-day-body:only-child{margin-top:2px}.fc-daygrid-more-link{border-radius:3px;cursor:pointer;font-size:var(--fc-small-font-size);margin:0 2px 1px;max-width:100%;overflow:hidden;padding:2px;position:relative;white-space:nowrap}.fc-daygrid-more-link:hover{background-color:rgba(0,0,0,.1)}.fc-daygrid-more-link-button{align-self:flex-start}.fc-daygrid-more-link-block{border:1px solid var(--fc-event-border-color);padding:1px}.fc-daygrid-week-number{background-color:var(--fc-neutral-bg-color);color:var(--fc-neutral-text-color);min-width:1.5em;padding:2px;position:absolute;text-align:center;top:0}.fc-more-popover .fc-popover-body{min-width:220px;padding:10px}.fc-daygrid-event{border-radius:3px;font-size:var(--fc-small-font-size);margin-bottom:1px}.fc-media-print .fc-daygrid-event{overflow:hidden!important;white-space:nowrap!important}.fc-direction-ltr .fc-daygrid-event.fc-event-start,.fc-direction-rtl .fc-daygrid-event.fc-event-end{margin-left:2px}.fc-direction-ltr .fc-daygrid-event.fc-event-end,.fc-direction-rtl .fc-daygrid-event.fc-event-start{margin-right:2px}.fc-direction-ltr .fc-daygrid-event .fc-event-time{margin-right:3px}.fc-direction-rtl .fc-daygrid-event .fc-event-time{margin-left:3px}.fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-start),.fc-direction-rtl .fc-daygrid-block-event:not(.fc-event-end){border-bottom-left-radius:0;border-left-width:0;border-top-left-radius:0}.fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-end),.fc-direction-rtl .fc-daygrid-block-event:not(.fc-event-start){border-bottom-right-radius:0;border-right-width:0;border-top-right-radius:0}.fc-daygrid-block-event .fc-event-time{font-weight:700}.fc-daygrid-block-event .fc-event-time,.fc-daygrid-block-event .fc-event-title{padding:1px}.fc-daygrid-dot-event{align-items:center;direction:row;display:flex;padding:2px 0;position:relative;z-index:2}.fc-daygrid-dot-event.fc-event-mirror,.fc-daygrid-dot-event:hover{background:rgba(0,0,0,.1)}.fc-daygrid-dot-event.fc-event-selected:before{bottom:-10px;top:-10px}.fc-daygrid-event-dot{border:calc(var(--fc-daygrid-event-dot-width)/2) solid var(--fc-event-border-color);border-radius:calc(var(--fc-daygrid-event-dot-width)/2);box-sizing:content-box;height:0;margin:0 4px;width:0}.fc-daygrid-dot-event .fc-event-time,.fc-daygrid-dot-event .fc-event-title{overflow:hidden;white-space:nowrap}.fc-daygrid-dot-event .fc-event-title{flex-basis:0;flex-grow:1;font-weight:700;min-height:0;min-width:0}";
+injectStyles(css_248z);
+
+export { DayGridHeaderRow, DayGridLayout, DayGridRow, DayGridRows, DayGridView, DayTableSlicer, TableDateProfileGenerator, buildDateDataConfigs, buildDateRenderConfig, buildDateRowConfig, buildDateRowConfigs, buildDayTableModel, buildDayTableRenderRange, computeColFromPosition, computeColWidth, computeRowHeight, createDayHeaderFormatter, getCellEl, getRowEl };