@fullcalendar/daygrid 6.0.3 → 6.1.0

package/internal.d.ts

@@ -1,5 +1,5 @@
 import { Duration, CssDimValue } from '@fullcalendar/core';
-import { DateComponent, ViewContext, DateProfile, DayTableModel, EventStore, EventUiHash, DateSpan, EventInteractionState, Seg, Slicer, DateRange, Hit, DayTableCell, EventSegUiInteractionState, Dictionary, ViewProps, ChunkConfigRowContent, ChunkContentCallbackArgs, DateProfileGenerator } from '@fullcalendar/core/internal';
+import { DateComponent, ViewContext, DateProfile, DayTableModel, EventStore, EventUiHash, DateSpan, EventInteractionState, Seg, Slicer, DateRange, DateProfileGenerator, DateEnv, Hit, DayTableCell, EventSegUiInteractionState, Dictionary, ViewProps, ChunkConfigRowContent, ChunkContentCallbackArgs } from '@fullcalendar/core/internal';
 import { createElement, VNode, RefObject } from '@fullcalendar/core/preact';
 
 interface DayTableProps {
@@ -42,13 +42,20 @@ declare class DayTableSlicer extends Slicer<TableSeg, [DayTableModel]> {
     sliceRange(dateRange: DateRange, dayTableModel: DayTableModel): TableSeg[];
 }
 
-interface TableProps {
+declare class TableDateProfileGenerator extends DateProfileGenerator {
+    buildRenderRange(currentRange: any, currentRangeUnit: any, isRangeAllDay: any): DateRange;
+}
+declare function buildDayTableRenderRange(props: {
+    currentRange: DateRange;
+    snapToWeek: boolean;
+    fixedWeekCount: boolean;
+    dateEnv: DateEnv;
+}): DateRange;
+
+interface TableRowsProps {
     dateProfile: DateProfile;
     cells: DayTableCell[][];
     renderRowIntro?: () => VNode;
-    colGroupNode: VNode;
-    tableMinWidth: CssDimValue;
-    expandRows: boolean;
     showWeekNumbers: boolean;
     clientWidth: number | null;
     clientHeight: number | null;
@@ -61,11 +68,10 @@ interface TableProps {
     eventResize: EventSegUiInteractionState | null;
     dayMaxEvents: boolean | number;
     dayMaxEventRows: boolean | number;
-    headerAlignElRef?: RefObject<HTMLElement>;
     forPrint: boolean;
     isHitComboAllowed?: (hit0: Hit, hit1: Hit) => boolean;
 }
-declare class Table extends DateComponent<TableProps> {
+declare class TableRows extends DateComponent<TableRowsProps> {
     private splitBusinessHourSegs;
     private splitBgEventSegs;
     private splitFgEventSegs;
@@ -77,13 +83,30 @@ declare class Table extends DateComponent<TableProps> {
     private rowPositions;
     private colPositions;
     render(): createElement.JSX.Element;
-    handleRootEl: (rootEl: HTMLElement | null) => void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
     prepareHits(): void;
     queryHit(positionLeft: number, positionTop: number): Hit;
     private getCellEl;
     private getCellRange;
 }
 
+interface TableProps extends TableRowsProps {
+    colGroupNode: VNode;
+    tableMinWidth: CssDimValue;
+    expandRows: boolean;
+    headerAlignElRef?: RefObject<HTMLElement>;
+}
+declare class Table extends DateComponent<TableProps> {
+    private elRef;
+    private needsScrollReset;
+    render(): createElement.JSX.Element;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: TableProps): void;
+    requestScrollReset(): void;
+    flushScrollReset(): void;
+}
+
 declare abstract class TableView<State = Dictionary> extends DateComponent<ViewProps, State> {
     protected headerElRef: RefObject<HTMLTableCellElement>;
     renderSimpleLayout(headerRowContent: ChunkConfigRowContent, bodyContent: (contentArg: ChunkContentCallbackArgs) => VNode): createElement.JSX.Element;
@@ -98,4 +121,4 @@ declare class DayTableView extends TableView {
 }
 declare function buildDayTableModel(dateProfile: DateProfile, dateProfileGenerator: DateProfileGenerator): DayTableModel;
 
-export { DayTableView as DayGridView, DayTable, DayTableSlicer, Table, TableSeg, TableView, buildDayTableModel };
+export { DayTableView as DayGridView, DayTable, DayTableSlicer, Table, TableDateProfileGenerator, TableRows, TableSeg, TableView, buildDayTableModel, buildDayTableRenderRange };

package/internal.esm.js

@@ -1,4 +1,4 @@
-import { DateComponent, getStickyHeaderDates, ViewContainer, SimpleScrollGrid, getStickyFooterScrollbar, renderScrollShim, createFormatter, BaseComponent, StandardEvent, buildSegTimeText, EventContainer, getSegAnchorAttrs, memoize, MoreLinkContainer, getSegMeta, getUniqueDomId, setRef, DayCellContainer, WeekNumberContainer, buildNavLinkAttrs, hasCustomDayCellContent, intersectRanges, addDays, SegHierarchy, buildEntryKey, intersectSpans, RefMap, sortEventSegs, isPropsEqual, buildEventRangeKey, BgEvent, renderFill, PositionCache, NowTimer, Slicer, DayHeader, DaySeriesModel, DayTableModel } from '@fullcalendar/core/internal';
+import { DateComponent, getStickyHeaderDates, ViewContainer, SimpleScrollGrid, getStickyFooterScrollbar, renderScrollShim, createFormatter, BaseComponent, StandardEvent, buildSegTimeText, EventContainer, getSegAnchorAttrs, memoize, MoreLinkContainer, getSegMeta, getUniqueDomId, setRef, DayCellContainer, WeekNumberContainer, buildNavLinkAttrs, hasCustomDayCellContent, intersectRanges, addDays, SegHierarchy, buildEntryKey, intersectSpans, RefMap, sortEventSegs, isPropsEqual, buildEventRangeKey, BgEvent, renderFill, PositionCache, NowTimer, formatIsoMonthStr, formatDayString, Slicer, DayHeader, DaySeriesModel, DayTableModel, DateProfileGenerator, addWeeks, diffWeeks } from '@fullcalendar/core/internal';
 import { createRef, createElement, Fragment } from '@fullcalendar/core/preact';
 
 /* An abstract class for the daygrid views, as well as month view. Renders one or more rows of day cells.
@@ -214,14 +214,24 @@ class TableCell extends DateComponent {
         let { context, props, state, rootElRef } = this;
         let { options } = context;
         let { date, dateProfile } = props;
+        // TODO: memoize this?
+        let isMonthStart = props.showDayNumber &&
+            dateProfile.currentRangeUnit !== 'month' && (dateProfile.currentRange.start.valueOf() === date.valueOf() ||
+            date.getUTCDate() === 1);
         return (createElement(DayCellContainer, { elTag: "td", elRef: this.handleRootEl, elClasses: [
                 'fc-daygrid-day',
                 ...(props.extraClassNames || []),
-            ], elAttrs: Object.assign(Object.assign(Object.assign({}, props.extraDataAttrs), (props.showDayNumber ? { 'aria-labelledby': state.dayNumberId } : {})), { role: 'gridcell' }), defaultGenerator: renderTopInner, date: date, dateProfile: dateProfile, todayRange: props.todayRange, showDayNumber: props.showDayNumber, extraRenderProps: props.extraRenderProps }, (InnerContent, renderProps) => (createElement("div", { className: "fc-daygrid-day-frame fc-scrollgrid-sync-inner", ref: props.innerElRef },
+            ], elAttrs: Object.assign(Object.assign(Object.assign({}, props.extraDataAttrs), (props.showDayNumber ? { 'aria-labelledby': state.dayNumberId } : {})), { role: 'gridcell' }), defaultGenerator: renderTopInner, date: date, dateProfile: dateProfile, todayRange: props.todayRange, showDayNumber: props.showDayNumber, isMonthStart: isMonthStart, extraRenderProps: props.extraRenderProps }, (InnerContent, renderProps) => (createElement("div", { ref: props.innerElRef, className: "fc-daygrid-day-frame fc-scrollgrid-sync-inner", style: { minHeight: props.minHeight } },
             props.showWeekNumber && (createElement(WeekNumberContainer, { elTag: "a", elClasses: ['fc-daygrid-week-number'], elAttrs: buildNavLinkAttrs(context, date, 'week'), date: date, defaultFormat: DEFAULT_WEEK_NUM_FORMAT })),
-            Boolean(!renderProps.isDisabled &&
-                (props.showDayNumber || hasCustomDayCellContent(options) || props.forceDayTop)) && (createElement("div", { className: "fc-daygrid-day-top" },
-                createElement(InnerContent, { elTag: "a", elClasses: ['fc-daygrid-day-number'], elAttrs: Object.assign(Object.assign({}, buildNavLinkAttrs(context, date)), { id: state.dayNumberId }) }))),
+            !renderProps.isDisabled &&
+                (props.showDayNumber || hasCustomDayCellContent(options) || props.forceDayTop) ? (createElement("div", { className: "fc-daygrid-day-top" },
+                createElement(InnerContent, { elTag: "a", elClasses: [
+                        'fc-daygrid-day-number',
+                        isMonthStart && 'fc-daygrid-month-start',
+                    ], elAttrs: Object.assign(Object.assign({}, buildNavLinkAttrs(context, date)), { id: state.dayNumberId }) }))) : props.showDayNumber ? (
+            // for creating correct amount of space (see issue #7162)
+            createElement("div", { className: "fc-daygrid-day-top", style: { visibility: 'hidden' } },
+                createElement("a", { className: "fc-daygrid-day-number" }, "\u00A0"))) : undefined,
             createElement("div", { className: "fc-daygrid-day-events", ref: props.fgContentElRef },
                 props.fgContent,
                 createElement("div", { className: "fc-daygrid-day-bottom", style: { marginTop: props.moreMarginTop } },
@@ -502,7 +512,7 @@ class TableRow extends DateComponent {
                     createElement(Fragment, null,
                         this.renderFillSegs(highlightSegsByCol[col], 'highlight'),
                         this.renderFillSegs(businessHoursByCol[col], 'non-business'),
-                        this.renderFillSegs(bgEventSegsByCol[col], 'bg-event'))) }));
+                        this.renderFillSegs(bgEventSegsByCol[col], 'bg-event'))), minHeight: props.cellMinHeight }));
             })));
     }
     componentDidMount() {
@@ -674,7 +684,7 @@ function buildAbsoluteTopHash(colPlacements) {
     return topsByInstanceId;
 }
 
-class Table extends DateComponent {
+class TableRows extends DateComponent {
     constructor() {
         super(...arguments);
         this.splitBusinessHourSegs = memoize(splitSegsByRow);
@@ -684,22 +694,9 @@ class Table extends DateComponent {
         this.splitEventDrag = memoize(splitInteractionByRow);
         this.splitEventResize = memoize(splitInteractionByRow);
         this.rowRefs = new RefMap();
-        this.handleRootEl = (rootEl) => {
-            this.rootEl = rootEl;
-            if (rootEl) {
-                this.context.registerInteractiveComponent(this, {
-                    el: rootEl,
-                    isHitComboAllowed: this.props.isHitComboAllowed,
-                });
-            }
-            else {
-                this.context.unregisterInteractiveComponent(this);
-            }
-        };
     }
     render() {
-        let { props } = this;
-        let { dateProfile, dayMaxEventRows, dayMaxEvents, expandRows } = props;
+        let { props, context } = this;
         let rowCnt = props.cells.length;
         let businessHourSegsByRow = this.splitBusinessHourSegs(props.businessHourSegs, rowCnt);
         let bgEventSegsByRow = this.splitBgEventSegs(props.bgEventSegs, rowCnt);
@@ -707,36 +704,33 @@ class Table extends DateComponent {
         let dateSelectionSegsByRow = this.splitDateSelectionSegs(props.dateSelectionSegs, rowCnt);
         let eventDragByRow = this.splitEventDrag(props.eventDrag, rowCnt);
         let eventResizeByRow = this.splitEventResize(props.eventResize, rowCnt);
-        let limitViaBalanced = dayMaxEvents === true || dayMaxEventRows === true;
-        // if rows can't expand to fill fixed height, can't do balanced-height event limit
-        // TODO: best place to normalize these options?
-        if (limitViaBalanced && !expandRows) {
-            limitViaBalanced = false;
-            dayMaxEventRows = null;
-            dayMaxEvents = null;
+        // for DayGrid view with many rows, force a min-height on cells so doesn't appear squished
+        // choose 7 because a month view will have max 6 rows
+        let cellMinHeight = (rowCnt >= 7 && props.clientWidth) ?
+            props.clientWidth / context.options.aspectRatio / 6 :
+            null;
+        return (createElement(NowTimer, { unit: "day" }, (nowDate, todayRange) => (createElement(Fragment, null, props.cells.map((cells, row) => (createElement(TableRow, { ref: this.rowRefs.createRef(row), key: cells.length
+                ? cells[0].date.toISOString() /* best? or put key on cell? or use diff formatter? */
+                : row // in case there are no cells (like when resource view is loading)
+            , showDayNumbers: rowCnt > 1, showWeekNumbers: props.showWeekNumbers, todayRange: todayRange, dateProfile: props.dateProfile, cells: cells, renderIntro: props.renderRowIntro, businessHourSegs: businessHourSegsByRow[row], eventSelection: props.eventSelection, bgEventSegs: bgEventSegsByRow[row].filter(isSegAllDay) /* hack */, fgEventSegs: fgEventSegsByRow[row], dateSelectionSegs: dateSelectionSegsByRow[row], eventDrag: eventDragByRow[row], eventResize: eventResizeByRow[row], dayMaxEvents: props.dayMaxEvents, dayMaxEventRows: props.dayMaxEventRows, clientWidth: props.clientWidth, clientHeight: props.clientHeight, cellMinHeight: cellMinHeight, forPrint: props.forPrint })))))));
+    }
+    componentDidMount() {
+        // HACK: need a daygrid wrapper parent to do positioning
+        // NOTE: a daygrid resource view w/o resources can have zero cells
+        const firstCellEl = this.rowRefs.currentMap[0].getCellEls()[0];
+        this.rootEl = firstCellEl ? firstCellEl.closest('.fc-daygrid-body') : null;
+        if (this.rootEl) {
+            this.context.registerInteractiveComponent(this, {
+                el: this.rootEl,
+                isHitComboAllowed: this.props.isHitComboAllowed,
+            });
+        }
+    }
+    componentWillUnmount() {
+        if (this.rootEl) {
+            this.context.unregisterInteractiveComponent(this);
+            this.rootEl = null;
         }
-        let classNames = [
-            'fc-daygrid-body',
-            limitViaBalanced ? 'fc-daygrid-body-balanced' : 'fc-daygrid-body-unbalanced',
-            expandRows ? '' : 'fc-daygrid-body-natural', // will height of one row depend on the others?
-        ];
-        return (createElement("div", { className: classNames.join(' '), ref: this.handleRootEl, style: {
-                // these props are important to give this wrapper correct dimensions for interactions
-                // TODO: if we set it here, can we avoid giving to inner tables?
-                width: props.clientWidth,
-                minWidth: props.tableMinWidth,
-            } },
-            createElement(NowTimer, { unit: "day" }, (nowDate, todayRange) => (createElement(Fragment, null,
-                createElement("table", { role: "presentation", className: "fc-scrollgrid-sync-table", style: {
-                        width: props.clientWidth,
-                        minWidth: props.tableMinWidth,
-                        height: expandRows ? props.clientHeight : '',
-                    } },
-                    props.colGroupNode,
-                    createElement("tbody", { role: "presentation" }, props.cells.map((cells, row) => (createElement(TableRow, { ref: this.rowRefs.createRef(row), key: cells.length
-                            ? cells[0].date.toISOString() /* best? or put key on cell? or use diff formatter? */
-                            : row // in case there are no cells (like when resource view is loading)
-                        , showDayNumbers: rowCnt > 1, showWeekNumbers: props.showWeekNumbers, todayRange: todayRange, dateProfile: dateProfile, cells: cells, renderIntro: props.renderRowIntro, businessHourSegs: businessHourSegsByRow[row], eventSelection: props.eventSelection, bgEventSegs: bgEventSegsByRow[row].filter(isSegAllDay) /* hack */, fgEventSegs: fgEventSegsByRow[row], dateSelectionSegs: dateSelectionSegsByRow[row], eventDrag: eventDragByRow[row], eventResize: eventResizeByRow[row], dayMaxEvents: dayMaxEvents, dayMaxEventRows: dayMaxEventRows, clientWidth: props.clientWidth, clientHeight: props.clientHeight, forPrint: props.forPrint }))))))))));
     }
     // Hit System
     // ----------------------------------------------------------------------------------------------------
@@ -781,6 +775,87 @@ function isSegAllDay(seg) {
     return seg.eventRange.def.allDay;
 }
 
+class Table extends DateComponent {
+    constructor() {
+        super(...arguments);
+        this.elRef = createRef();
+        this.needsScrollReset = false;
+    }
+    render() {
+        let { props } = this;
+        let { dayMaxEventRows, dayMaxEvents, expandRows } = props;
+        let limitViaBalanced = dayMaxEvents === true || dayMaxEventRows === true;
+        // if rows can't expand to fill fixed height, can't do balanced-height event limit
+        // TODO: best place to normalize these options?
+        if (limitViaBalanced && !expandRows) {
+            limitViaBalanced = false;
+            dayMaxEventRows = null;
+            dayMaxEvents = null;
+        }
+        let classNames = [
+            'fc-daygrid-body',
+            limitViaBalanced ? 'fc-daygrid-body-balanced' : 'fc-daygrid-body-unbalanced',
+            expandRows ? '' : 'fc-daygrid-body-natural', // will height of one row depend on the others?
+        ];
+        return (createElement("div", { ref: this.elRef, className: classNames.join(' '), style: {
+                // these props are important to give this wrapper correct dimensions for interactions
+                // TODO: if we set it here, can we avoid giving to inner tables?
+                width: props.clientWidth,
+                minWidth: props.tableMinWidth,
+            } },
+            createElement("table", { role: "presentation", className: "fc-scrollgrid-sync-table", style: {
+                    width: props.clientWidth,
+                    minWidth: props.tableMinWidth,
+                    height: expandRows ? props.clientHeight : '',
+                } },
+                props.colGroupNode,
+                createElement("tbody", { role: "presentation" },
+                    createElement(TableRows, { dateProfile: props.dateProfile, cells: props.cells, renderRowIntro: props.renderRowIntro, showWeekNumbers: props.showWeekNumbers, clientWidth: props.clientWidth, clientHeight: props.clientHeight, businessHourSegs: props.businessHourSegs, bgEventSegs: props.bgEventSegs, fgEventSegs: props.fgEventSegs, dateSelectionSegs: props.dateSelectionSegs, eventSelection: props.eventSelection, eventDrag: props.eventDrag, eventResize: props.eventResize, dayMaxEvents: dayMaxEvents, dayMaxEventRows: dayMaxEventRows, forPrint: props.forPrint, isHitComboAllowed: props.isHitComboAllowed })))));
+    }
+    componentDidMount() {
+        this.requestScrollReset();
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.dateProfile !== this.props.dateProfile) {
+            this.requestScrollReset();
+        }
+        else {
+            this.flushScrollReset();
+        }
+    }
+    requestScrollReset() {
+        this.needsScrollReset = true;
+        this.flushScrollReset();
+    }
+    flushScrollReset() {
+        if (this.needsScrollReset &&
+            this.props.clientWidth // sizes computed?
+        ) {
+            const subjectEl = getScrollSubjectEl(this.elRef.current, this.props.dateProfile);
+            if (subjectEl) {
+                const originEl = subjectEl.closest('.fc-daygrid-body');
+                const scrollEl = originEl.closest('.fc-scroller');
+                const scrollTop = subjectEl.getBoundingClientRect().top -
+                    originEl.getBoundingClientRect().top;
+                scrollEl.scrollTop = scrollTop ? (scrollTop + 1) : 0; // overcome border
+            }
+            this.needsScrollReset = false;
+        }
+    }
+}
+function getScrollSubjectEl(containerEl, dateProfile) {
+    let el;
+    if (dateProfile.currentRangeUnit.match(/year|month/)) {
+        el = containerEl.querySelector(`[data-date="${formatIsoMonthStr(dateProfile.currentDate)}-01"]`);
+        // even if view is month-based, first-of-month might be hidden...
+    }
+    if (!el) {
+        el = containerEl.querySelector(`[data-date="${formatDayString(dateProfile.currentDate)}"]`);
+        // could still be hidden if an interior-view hidden day
+    }
+    return el;
+}
+
 class DayTableSlicer extends Slicer {
     constructor() {
         super(...arguments);
@@ -809,6 +884,7 @@ class DayTableView extends TableView {
         this.buildDayTableModel = memoize(buildDayTableModel);
         this.headerRef = createRef();
         this.tableRef = createRef();
+        // can't override any lifecycle methods from parent
     }
     render() {
         let { options, dateProfileGenerator } = this.context;
@@ -826,4 +902,42 @@ function buildDayTableModel(dateProfile, dateProfileGenerator) {
     return new DayTableModel(daySeries, /year|month|week/.test(dateProfile.currentRangeUnit));
 }
 
-export { DayTableView as DayGridView, DayTable, DayTableSlicer, Table, TableView, buildDayTableModel };
+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 };
+}
+
+export { DayTableView as DayGridView, DayTable, DayTableSlicer, Table, TableDateProfileGenerator, TableRows, TableView, buildDayTableModel, buildDayTableRenderRange };

package/internal.js

@@ -218,14 +218,24 @@ class TableCell extends internal.DateComponent {
         let { context, props, state, rootElRef } = this;
         let { options } = context;
         let { date, dateProfile } = props;
+        // TODO: memoize this?
+        let isMonthStart = props.showDayNumber &&
+            dateProfile.currentRangeUnit !== 'month' && (dateProfile.currentRange.start.valueOf() === date.valueOf() ||
+            date.getUTCDate() === 1);
         return (preact.createElement(internal.DayCellContainer, { elTag: "td", elRef: this.handleRootEl, elClasses: [
                 'fc-daygrid-day',
                 ...(props.extraClassNames || []),
-            ], elAttrs: Object.assign(Object.assign(Object.assign({}, props.extraDataAttrs), (props.showDayNumber ? { 'aria-labelledby': state.dayNumberId } : {})), { role: 'gridcell' }), defaultGenerator: renderTopInner, date: date, dateProfile: dateProfile, todayRange: props.todayRange, showDayNumber: props.showDayNumber, extraRenderProps: props.extraRenderProps }, (InnerContent, renderProps) => (preact.createElement("div", { className: "fc-daygrid-day-frame fc-scrollgrid-sync-inner", ref: props.innerElRef },
+            ], elAttrs: Object.assign(Object.assign(Object.assign({}, props.extraDataAttrs), (props.showDayNumber ? { 'aria-labelledby': state.dayNumberId } : {})), { role: 'gridcell' }), defaultGenerator: renderTopInner, date: date, dateProfile: dateProfile, todayRange: props.todayRange, showDayNumber: props.showDayNumber, isMonthStart: isMonthStart, extraRenderProps: props.extraRenderProps }, (InnerContent, renderProps) => (preact.createElement("div", { ref: props.innerElRef, className: "fc-daygrid-day-frame fc-scrollgrid-sync-inner", style: { minHeight: props.minHeight } },
             props.showWeekNumber && (preact.createElement(internal.WeekNumberContainer, { elTag: "a", elClasses: ['fc-daygrid-week-number'], elAttrs: internal.buildNavLinkAttrs(context, date, 'week'), date: date, defaultFormat: DEFAULT_WEEK_NUM_FORMAT })),
-            Boolean(!renderProps.isDisabled &&
-                (props.showDayNumber || internal.hasCustomDayCellContent(options) || props.forceDayTop)) && (preact.createElement("div", { className: "fc-daygrid-day-top" },
-                preact.createElement(InnerContent, { elTag: "a", elClasses: ['fc-daygrid-day-number'], elAttrs: Object.assign(Object.assign({}, internal.buildNavLinkAttrs(context, date)), { id: state.dayNumberId }) }))),
+            !renderProps.isDisabled &&
+                (props.showDayNumber || internal.hasCustomDayCellContent(options) || props.forceDayTop) ? (preact.createElement("div", { className: "fc-daygrid-day-top" },
+                preact.createElement(InnerContent, { elTag: "a", elClasses: [
+                        'fc-daygrid-day-number',
+                        isMonthStart && 'fc-daygrid-month-start',
+                    ], elAttrs: Object.assign(Object.assign({}, internal.buildNavLinkAttrs(context, date)), { id: state.dayNumberId }) }))) : props.showDayNumber ? (
+            // for creating correct amount of space (see issue #7162)
+            preact.createElement("div", { className: "fc-daygrid-day-top", style: { visibility: 'hidden' } },
+                preact.createElement("a", { className: "fc-daygrid-day-number" }, "\u00A0"))) : undefined,
             preact.createElement("div", { className: "fc-daygrid-day-events", ref: props.fgContentElRef },
                 props.fgContent,
                 preact.createElement("div", { className: "fc-daygrid-day-bottom", style: { marginTop: props.moreMarginTop } },
@@ -506,7 +516,7 @@ class TableRow extends internal.DateComponent {
                     preact.createElement(preact.Fragment, null,
                         this.renderFillSegs(highlightSegsByCol[col], 'highlight'),
                         this.renderFillSegs(businessHoursByCol[col], 'non-business'),
-                        this.renderFillSegs(bgEventSegsByCol[col], 'bg-event'))) }));
+                        this.renderFillSegs(bgEventSegsByCol[col], 'bg-event'))), minHeight: props.cellMinHeight }));
             })));
     }
     componentDidMount() {
@@ -678,7 +688,7 @@ function buildAbsoluteTopHash(colPlacements) {
     return topsByInstanceId;
 }
 
-class Table extends internal.DateComponent {
+class TableRows extends internal.DateComponent {
     constructor() {
         super(...arguments);
         this.splitBusinessHourSegs = internal.memoize(splitSegsByRow);
@@ -688,22 +698,9 @@ class Table extends internal.DateComponent {
         this.splitEventDrag = internal.memoize(splitInteractionByRow);
         this.splitEventResize = internal.memoize(splitInteractionByRow);
         this.rowRefs = new internal.RefMap();
-        this.handleRootEl = (rootEl) => {
-            this.rootEl = rootEl;
-            if (rootEl) {
-                this.context.registerInteractiveComponent(this, {
-                    el: rootEl,
-                    isHitComboAllowed: this.props.isHitComboAllowed,
-                });
-            }
-            else {
-                this.context.unregisterInteractiveComponent(this);
-            }
-        };
     }
     render() {
-        let { props } = this;
-        let { dateProfile, dayMaxEventRows, dayMaxEvents, expandRows } = props;
+        let { props, context } = this;
         let rowCnt = props.cells.length;
         let businessHourSegsByRow = this.splitBusinessHourSegs(props.businessHourSegs, rowCnt);
         let bgEventSegsByRow = this.splitBgEventSegs(props.bgEventSegs, rowCnt);
@@ -711,36 +708,33 @@ class Table extends internal.DateComponent {
         let dateSelectionSegsByRow = this.splitDateSelectionSegs(props.dateSelectionSegs, rowCnt);
         let eventDragByRow = this.splitEventDrag(props.eventDrag, rowCnt);
         let eventResizeByRow = this.splitEventResize(props.eventResize, rowCnt);
-        let limitViaBalanced = dayMaxEvents === true || dayMaxEventRows === true;
-        // if rows can't expand to fill fixed height, can't do balanced-height event limit
-        // TODO: best place to normalize these options?
-        if (limitViaBalanced && !expandRows) {
-            limitViaBalanced = false;
-            dayMaxEventRows = null;
-            dayMaxEvents = null;
+        // for DayGrid view with many rows, force a min-height on cells so doesn't appear squished
+        // choose 7 because a month view will have max 6 rows
+        let cellMinHeight = (rowCnt >= 7 && props.clientWidth) ?
+            props.clientWidth / context.options.aspectRatio / 6 :
+            null;
+        return (preact.createElement(internal.NowTimer, { unit: "day" }, (nowDate, todayRange) => (preact.createElement(preact.Fragment, null, props.cells.map((cells, row) => (preact.createElement(TableRow, { ref: this.rowRefs.createRef(row), key: cells.length
+                ? cells[0].date.toISOString() /* best? or put key on cell? or use diff formatter? */
+                : row // in case there are no cells (like when resource view is loading)
+            , showDayNumbers: rowCnt > 1, showWeekNumbers: props.showWeekNumbers, todayRange: todayRange, dateProfile: props.dateProfile, cells: cells, renderIntro: props.renderRowIntro, businessHourSegs: businessHourSegsByRow[row], eventSelection: props.eventSelection, bgEventSegs: bgEventSegsByRow[row].filter(isSegAllDay) /* hack */, fgEventSegs: fgEventSegsByRow[row], dateSelectionSegs: dateSelectionSegsByRow[row], eventDrag: eventDragByRow[row], eventResize: eventResizeByRow[row], dayMaxEvents: props.dayMaxEvents, dayMaxEventRows: props.dayMaxEventRows, clientWidth: props.clientWidth, clientHeight: props.clientHeight, cellMinHeight: cellMinHeight, forPrint: props.forPrint })))))));
+    }
+    componentDidMount() {
+        // HACK: need a daygrid wrapper parent to do positioning
+        // NOTE: a daygrid resource view w/o resources can have zero cells
+        const firstCellEl = this.rowRefs.currentMap[0].getCellEls()[0];
+        this.rootEl = firstCellEl ? firstCellEl.closest('.fc-daygrid-body') : null;
+        if (this.rootEl) {
+            this.context.registerInteractiveComponent(this, {
+                el: this.rootEl,
+                isHitComboAllowed: this.props.isHitComboAllowed,
+            });
+        }
+    }
+    componentWillUnmount() {
+        if (this.rootEl) {
+            this.context.unregisterInteractiveComponent(this);
+            this.rootEl = null;
         }
-        let classNames = [
-            'fc-daygrid-body',
-            limitViaBalanced ? 'fc-daygrid-body-balanced' : 'fc-daygrid-body-unbalanced',
-            expandRows ? '' : 'fc-daygrid-body-natural', // will height of one row depend on the others?
-        ];
-        return (preact.createElement("div", { className: classNames.join(' '), ref: this.handleRootEl, style: {
-                // these props are important to give this wrapper correct dimensions for interactions
-                // TODO: if we set it here, can we avoid giving to inner tables?
-                width: props.clientWidth,
-                minWidth: props.tableMinWidth,
-            } },
-            preact.createElement(internal.NowTimer, { unit: "day" }, (nowDate, todayRange) => (preact.createElement(preact.Fragment, null,
-                preact.createElement("table", { role: "presentation", className: "fc-scrollgrid-sync-table", style: {
-                        width: props.clientWidth,
-                        minWidth: props.tableMinWidth,
-                        height: expandRows ? props.clientHeight : '',
-                    } },
-                    props.colGroupNode,
-                    preact.createElement("tbody", { role: "presentation" }, props.cells.map((cells, row) => (preact.createElement(TableRow, { ref: this.rowRefs.createRef(row), key: cells.length
-                            ? cells[0].date.toISOString() /* best? or put key on cell? or use diff formatter? */
-                            : row // in case there are no cells (like when resource view is loading)
-                        , showDayNumbers: rowCnt > 1, showWeekNumbers: props.showWeekNumbers, todayRange: todayRange, dateProfile: dateProfile, cells: cells, renderIntro: props.renderRowIntro, businessHourSegs: businessHourSegsByRow[row], eventSelection: props.eventSelection, bgEventSegs: bgEventSegsByRow[row].filter(isSegAllDay) /* hack */, fgEventSegs: fgEventSegsByRow[row], dateSelectionSegs: dateSelectionSegsByRow[row], eventDrag: eventDragByRow[row], eventResize: eventResizeByRow[row], dayMaxEvents: dayMaxEvents, dayMaxEventRows: dayMaxEventRows, clientWidth: props.clientWidth, clientHeight: props.clientHeight, forPrint: props.forPrint }))))))))));
     }
     // Hit System
     // ----------------------------------------------------------------------------------------------------
@@ -785,6 +779,87 @@ function isSegAllDay(seg) {
     return seg.eventRange.def.allDay;
 }
 
+class Table extends internal.DateComponent {
+    constructor() {
+        super(...arguments);
+        this.elRef = preact.createRef();
+        this.needsScrollReset = false;
+    }
+    render() {
+        let { props } = this;
+        let { dayMaxEventRows, dayMaxEvents, expandRows } = props;
+        let limitViaBalanced = dayMaxEvents === true || dayMaxEventRows === true;
+        // if rows can't expand to fill fixed height, can't do balanced-height event limit
+        // TODO: best place to normalize these options?
+        if (limitViaBalanced && !expandRows) {
+            limitViaBalanced = false;
+            dayMaxEventRows = null;
+            dayMaxEvents = null;
+        }
+        let classNames = [
+            'fc-daygrid-body',
+            limitViaBalanced ? 'fc-daygrid-body-balanced' : 'fc-daygrid-body-unbalanced',
+            expandRows ? '' : 'fc-daygrid-body-natural', // will height of one row depend on the others?
+        ];
+        return (preact.createElement("div", { ref: this.elRef, className: classNames.join(' '), style: {
+                // these props are important to give this wrapper correct dimensions for interactions
+                // TODO: if we set it here, can we avoid giving to inner tables?
+                width: props.clientWidth,
+                minWidth: props.tableMinWidth,
+            } },
+            preact.createElement("table", { role: "presentation", className: "fc-scrollgrid-sync-table", style: {
+                    width: props.clientWidth,
+                    minWidth: props.tableMinWidth,
+                    height: expandRows ? props.clientHeight : '',
+                } },
+                props.colGroupNode,
+                preact.createElement("tbody", { role: "presentation" },
+                    preact.createElement(TableRows, { dateProfile: props.dateProfile, cells: props.cells, renderRowIntro: props.renderRowIntro, showWeekNumbers: props.showWeekNumbers, clientWidth: props.clientWidth, clientHeight: props.clientHeight, businessHourSegs: props.businessHourSegs, bgEventSegs: props.bgEventSegs, fgEventSegs: props.fgEventSegs, dateSelectionSegs: props.dateSelectionSegs, eventSelection: props.eventSelection, eventDrag: props.eventDrag, eventResize: props.eventResize, dayMaxEvents: dayMaxEvents, dayMaxEventRows: dayMaxEventRows, forPrint: props.forPrint, isHitComboAllowed: props.isHitComboAllowed })))));
+    }
+    componentDidMount() {
+        this.requestScrollReset();
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.dateProfile !== this.props.dateProfile) {
+            this.requestScrollReset();
+        }
+        else {
+            this.flushScrollReset();
+        }
+    }
+    requestScrollReset() {
+        this.needsScrollReset = true;
+        this.flushScrollReset();
+    }
+    flushScrollReset() {
+        if (this.needsScrollReset &&
+            this.props.clientWidth // sizes computed?
+        ) {
+            const subjectEl = getScrollSubjectEl(this.elRef.current, this.props.dateProfile);
+            if (subjectEl) {
+                const originEl = subjectEl.closest('.fc-daygrid-body');
+                const scrollEl = originEl.closest('.fc-scroller');
+                const scrollTop = subjectEl.getBoundingClientRect().top -
+                    originEl.getBoundingClientRect().top;
+                scrollEl.scrollTop = scrollTop ? (scrollTop + 1) : 0; // overcome border
+            }
+            this.needsScrollReset = false;
+        }
+    }
+}
+function getScrollSubjectEl(containerEl, dateProfile) {
+    let el;
+    if (dateProfile.currentRangeUnit.match(/year|month/)) {
+        el = containerEl.querySelector(`[data-date="${internal.formatIsoMonthStr(dateProfile.currentDate)}-01"]`);
+        // even if view is month-based, first-of-month might be hidden...
+    }
+    if (!el) {
+        el = containerEl.querySelector(`[data-date="${internal.formatDayString(dateProfile.currentDate)}"]`);
+        // could still be hidden if an interior-view hidden day
+    }
+    return el;
+}
+
 class DayTableSlicer extends internal.Slicer {
     constructor() {
         super(...arguments);
@@ -813,6 +888,7 @@ class DayTableView extends TableView {
         this.buildDayTableModel = internal.memoize(buildDayTableModel);
         this.headerRef = preact.createRef();
         this.tableRef = preact.createRef();
+        // can't override any lifecycle methods from parent
     }
     render() {
         let { options, dateProfileGenerator } = this.context;
@@ -830,9 +906,50 @@ function buildDayTableModel(dateProfile, dateProfileGenerator) {
     return new internal.DayTableModel(daySeries, /year|month|week/.test(dateProfile.currentRangeUnit));
 }
 
+class TableDateProfileGenerator extends internal.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 = internal.addWeeks(endOfWeek, 1);
+        }
+    }
+    // ensure 6 weeks
+    if (props.fixedWeekCount) {
+        // TODO: instead of these date-math gymnastics (for multimonth view),
+        // compute dateprofiles of all months, then use start of first and end of last.
+        let lastMonthRenderStart = dateEnv.startOfWeek(dateEnv.startOfMonth(internal.addDays(currentRange.end, -1)));
+        let rowCnt = Math.ceil(// could be partial weeks due to hiddenDays
+        internal.diffWeeks(lastMonthRenderStart, end));
+        end = internal.addWeeks(end, 6 - rowCnt);
+    }
+    return { start, end };
+}
+
 exports.DayGridView = DayTableView;
 exports.DayTable = DayTable;
 exports.DayTableSlicer = DayTableSlicer;
 exports.Table = Table;
+exports.TableDateProfileGenerator = TableDateProfileGenerator;
+exports.TableRows = TableRows;
 exports.TableView = TableView;
 exports.buildDayTableModel = buildDayTableModel;
+exports.buildDayTableRenderRange = buildDayTableRenderRange;