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

package/cjs/internal.cjs

@@ -0,0 +1,1339 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var internal = require('@fullcalendar/core/internal');
+var preact = require('@fullcalendar/core/preact');
+var core = require('@fullcalendar/core');
+var classNames = require('@fullcalendar/core/internal-classnames');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+
+class DayTableSlicer extends internal.Slicer {
+    constructor() {
+        super(...arguments);
+        this.forceDayIfListItem = true;
+    }
+    sliceRange(dateRange, dayTableModel) {
+        return dayTableModel.sliceRange(dateRange);
+    }
+}
+
+// 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
+// -------------------------------------------------------------------------------------------------
+const firstSunday = new Date(259200000);
+function buildDateRowConfigs(dates, datesRepDistinctDays, dateProfile, todayRange, dayHeaderFormat, // TODO: rename to dateHeaderFormat?
+context) {
+    const rowConfig = buildDateRowConfig(dates, datesRepDistinctDays, dateProfile, todayRange, dayHeaderFormat, context);
+    const majorUnit = internal.computeMajorUnit(dateProfile, context.dateEnv);
+    // HACK mutate isMajor
+    if (datesRepDistinctDays) {
+        for (const dataConfig of rowConfig.dataConfigs) {
+            if (internal.isMajorUnit(dataConfig.dateMarker, majorUnit, context.dateEnv)) {
+                dataConfig.renderProps.isMajor = true;
+            }
+        }
+    }
+    return [rowConfig];
+}
+/*
+Should this receive resource data attributes?
+Or ResourceApi object itself?
+*/
+function buildDateRowConfig(dateMarkers, datesRepDistinctDays, dateProfile, todayRange, dayHeaderFormat, // TODO: rename to dateHeaderFormat?
+context, colSpan, isMajorMod) {
+    return {
+        isDateRow: true,
+        renderConfig: buildDateRenderConfig(context),
+        dataConfigs: buildDateDataConfigs(dateMarkers, datesRepDistinctDays, dateProfile, todayRange, dayHeaderFormat, context, colSpan, undefined, undefined, undefined, undefined, isMajorMod)
+    };
+}
+/*
+For header cells: how to connect w/ custom rendering
+Applies to all cells in a row
+*/
+function buildDateRenderConfig(context) {
+    const { options } = context;
+    return {
+        generatorName: 'dayHeaderContent',
+        customGenerator: options.dayHeaderContent,
+        classNameGenerator: options.dayHeaderClass,
+        innerClassNameGenerator: options.dayHeaderInnerClass,
+        didMount: options.dayHeaderDidMount,
+        willUnmount: options.dayHeaderWillUnmount,
+        align: options.dayHeaderAlign,
+        sticky: options.dayHeaderSticky,
+    };
+}
+const dowDates = [];
+for (let dow = 0; dow < 7; dow++) {
+    dowDates.push(internal.addDays(new Date(259200000), dow)); // start with Sun, 04 Jan 1970 00:00:00 GMT)
+}
+/*
+For header cells: data
+*/
+function buildDateDataConfigs(dateMarkers, datesRepDistinctDays, dateProfile, todayRange, dayHeaderFormat, // TODO: rename to dateHeaderFormat?
+context, colSpan = 1, keyPrefix = '', extraRenderProps = {}, // TODO
+extraAttrs = {}, // TODO
+className = '', isMajorMod) {
+    const { dateEnv, viewApi, options } = context;
+    return datesRepDistinctDays
+        ? dateMarkers.map((dateMarker, i) => {
+            const dateMeta = internal.getDateMeta(dateMarker, dateEnv, dateProfile, todayRange);
+            const isMajor = isMajorMod != null && !(i % isMajorMod);
+            const [text, textParts] = dateEnv.format(dateMarker, dayHeaderFormat);
+            const hasNavLink = options.navLinks && !dateMeta.isDisabled &&
+                dateMarkers.length > 1; // don't show navlink to day if only one day
+            const renderProps = Object.assign(Object.assign(Object.assign({}, dateMeta), extraRenderProps), { text,
+                textParts,
+                get weekdayText() { return internal.findWeekdayText(textParts); },
+                get dayNumberText() { return datesRepDistinctDays ? internal.findDayNumberText(textParts) : ''; },
+                isMajor, isNarrow: false, isSticky: false, inPopover: false, level: 0, // HACK. gets overridden
+                hasNavLink, view: viewApi });
+            const fullDateStr = internal.buildDateStr(context, dateMarker);
+            // for DayGridHeaderCell
+            return {
+                key: keyPrefix + dateMarker.toUTCString(),
+                dateMarker,
+                renderProps,
+                attrs: Object.assign(Object.assign(Object.assign({ 'aria-label': fullDateStr }, (dateMeta.isToday ? { 'aria-current': 'date' } : {})), { 'data-date': internal.formatDayString(dateMarker) }), extraAttrs),
+                // for navlink
+                innerAttrs: hasNavLink
+                    ? internal.buildNavLinkAttrs(context, dateMarker, undefined, fullDateStr)
+                    : { 'aria-hidden': true },
+                colSpan,
+                hasNavLink,
+                className,
+            };
+        })
+        : dateMarkers.map((dateMarker, i) => {
+            const dow = dateMarker.getUTCDay();
+            const normDate = internal.addDays(firstSunday, dow);
+            const dateMeta = {
+                date: dateEnv.toDate(dateMarker),
+                dow,
+                isDisabled: false,
+                isFuture: false,
+                isPast: false,
+                isToday: false,
+                isOther: false,
+            };
+            const isMajor = isMajorMod != null && !(i % isMajorMod);
+            const [text, textParts] = dateEnv.format(normDate, dayHeaderFormat);
+            const renderProps = Object.assign(Object.assign(Object.assign({}, dateMeta), { date: dowDates[dow], isMajor, isNarrow: false, isSticky: false, inPopover: false, hasNavLink: false, level: 0, view: viewApi, text,
+                textParts,
+                get weekdayText() { return internal.findWeekdayText(textParts); },
+                get dayNumberText() { return datesRepDistinctDays ? internal.findDayNumberText(textParts) : ''; } }), extraRenderProps);
+            const fullWeekDayStr = dateEnv.format(normDate, internal.WEEKDAY_ONLY_FORMAT)[0];
+            // for DayGridHeaderCell
+            return {
+                key: keyPrefix + String(dow),
+                dateMarker,
+                renderProps,
+                attrs: Object.assign({ 'aria-label': fullWeekDayStr }, extraAttrs),
+                // NOT a navlink
+                innerAttrs: {
+                    'aria-hidden': true, // label already on cell
+                },
+                colSpan,
+                className,
+            };
+        });
+}
+
+/*
+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 internal.getEventKey(seg) + ':' + seg.start +
+        (seg.standinFor ? ':standin' : seg.isSlice ? ':slice' : '');
+}
+// DayGridRange utils (TODO: move)
+// -------------------------------------------------------------------------------------------------
+function splitSegsByRow(segs, rowCount) {
+    const byRow = [];
+    for (let row = 0; row < rowCount; row++) {
+        byRow[row] = [];
+    }
+    for (const seg of segs) {
+        byRow[seg.row].push(seg);
+    }
+    return byRow;
+}
+function splitInteractionByRow(ui, rowCount) {
+    const byRow = [];
+    if (!ui) {
+        for (let row = 0; row < rowCount; row++) {
+            byRow[row] = null;
+        }
+    }
+    else {
+        for (let row = 0; row < rowCount; row++) {
+            byRow[row] = {
+                affectedInstances: ui.affectedInstances,
+                isEvent: ui.isEvent,
+                segs: [],
+            };
+        }
+        for (const seg of ui.segs) {
+            byRow[seg.row].segs.push(seg);
+        }
+    }
+    return byRow;
+}
+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 = internal.createFormatter({
+    hour: 'numeric',
+    minute: '2-digit',
+    omitZeroMinute: true,
+    meridiem: 'narrow',
+});
+function hasListItemDisplay(seg) {
+    let { display } = seg.eventRange.ui;
+    return display === 'list-item' || (display === 'auto' &&
+        !seg.eventRange.def.allDay &&
+        (seg.end - seg.start) === 1 && // single-day
+        seg.isStart && // "
+        seg.isEnd // "
+    );
+}
+
+class DayGridMoreLink extends internal.BaseComponent {
+    render() {
+        let { props } = this;
+        return (preact.createElement(internal.MoreLinkContainer, { display: 'row', className: props.className, isNarrow: props.isNarrow, isMicro: props.isMicro, dateProfile: props.dateProfile, todayRange: props.todayRange, allDayDate: props.allDayDate, segs: props.segs, hiddenSegs: props.hiddenSegs, alignElRef: props.alignElRef, alignParentTop: props.alignParentTop, dateSpanProps: props.dateSpanProps, popoverContent: () => (preact.createElement(preact.Fragment, null, props.segs.map((seg) => {
+                let { eventRange } = seg;
+                let { instanceId } = eventRange.instance;
+                let isDragging = Boolean(props.eventDrag && props.eventDrag.affectedInstances[instanceId]);
+                let isResizing = Boolean(props.eventResize && props.eventResize.affectedInstances[instanceId]);
+                let isInvisible = isDragging || isResizing;
+                return (preact.createElement("div", { key: instanceId, style: {
+                        visibility: isInvisible ? 'hidden' : undefined,
+                    } },
+                    preact.createElement(internal.StandardEvent, Object.assign({ display: hasListItemDisplay(seg) ? 'list-item' : 'row', eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: isDragging, isResizing: isResizing, isMirror: false, isSelected: instanceId === props.eventSelection, defaultTimeFormat: DEFAULT_TABLE_EVENT_TIME_FORMAT, defaultDisplayEventEnd: false }, internal.getEventRangeMeta(eventRange, props.todayRange)))));
+            }))) }));
+    }
+}
+
+class DayGridCell extends internal.DateComponent {
+    constructor() {
+        super(...arguments);
+        // memo
+        this.getDateMeta = internal.memoize(internal.getDateMeta);
+        this.refineRenderProps = internal.memoizeObjArg(refineRenderProps);
+        // ref
+        this.rootElRef = preact.createRef();
+        this.handleBodyEl = (bodyEl) => {
+            if (this.disconnectBodyHeight) {
+                this.disconnectBodyHeight();
+                this.disconnectBodyHeight = undefined;
+                internal.setRef(this.props.headerHeightRef, null);
+                internal.setRef(this.props.mainHeightRef, null);
+            }
+            if (bodyEl) {
+                // we want to fire on ANY size change, because we do more advanced stuff
+                this.disconnectBodyHeight = internal.watchSize(bodyEl, (_bodyWidth, bodyHeight) => {
+                    const { props } = this;
+                    const mainRect = bodyEl.getBoundingClientRect();
+                    const rootRect = this.rootElRef.current.getBoundingClientRect();
+                    const headerHeight = mainRect.top - rootRect.top;
+                    if (!internal.isDimsEqual(this.headerHeight, headerHeight)) {
+                        this.headerHeight = headerHeight;
+                        internal.setRef(props.headerHeightRef, headerHeight);
+                    }
+                    if (props.fgLiquidHeight) {
+                        internal.setRef(props.mainHeightRef, bodyHeight);
+                    }
+                });
+            }
+        };
+    }
+    render() {
+        let { props, context } = this;
+        let { options, dateEnv } = context;
+        // TODO: memoize this
+        const isMonthStart = props.showDayNumber &&
+            shouldDisplayMonthStart(props.date, props.dateProfile.currentRange, dateEnv);
+        const dateMeta = this.getDateMeta(props.date, dateEnv, props.dateProfile, props.todayRange);
+        const baseClassName = core.joinClassNames(props.borderStart ? classNames__default["default"].borderOnlyS : classNames__default["default"].borderNone, props.width != null ? '' : classNames__default["default"].liquid, classNames__default["default"].flexCol);
+        const hasNavLink = options.navLinks;
+        const renderProps = this.refineRenderProps({
+            date: props.date,
+            isMajor: props.isMajor,
+            isNarrow: props.isNarrow,
+            dateMeta: dateMeta,
+            hasLabel: props.showDayNumber,
+            hasMonthLabel: isMonthStart,
+            hasNavLink,
+            renderProps: props.renderProps,
+            viewApi: context.viewApi,
+            dateEnv: context.dateEnv,
+            monthStartFormat: options.monthStartFormat,
+            dayCellFormat: options.dayCellFormat,
+            businessHours: Boolean(options.businessHours),
+        });
+        if (dateMeta.isDisabled) {
+            return (preact.createElement("div", { role: 'gridcell', "aria-disabled": true, className: internal.joinArrayishClassNames(internal.generateClassName(options.dayCellClass, renderProps), props.className, baseClassName), style: {
+                    width: props.width
+                } }));
+        }
+        const fullDateStr = internal.buildDateStr(context, props.date);
+        return (preact.createElement(internal.ContentContainer, { tag: "div", elRef: this.rootElRef, className: core.joinClassNames(props.className, baseClassName), attrs: Object.assign(Object.assign(Object.assign(Object.assign({}, props.attrs), { role: 'gridcell', 'aria-label': fullDateStr }), (renderProps.isToday ? { 'aria-current': 'date' } : {})), { 'data-date': internal.formatDayString(props.date) }), style: {
+                width: props.width,
+            }, renderProps: renderProps, generatorName: "dayCellTopContent" // !!! for top
+            , customGenerator: options.dayCellTopContent /* !!! for top */, defaultGenerator: renderTopInner, classNameGenerator: options.dayCellClass, didMount: options.dayCellDidMount, willUnmount: options.dayCellWillUnmount }, (InnerContent) => (preact.createElement(preact.Fragment, null,
+            preact.createElement("div", { className: core.joinClassNames(classNames__default["default"].rel, // puts it above bg-fills, which are positioned on TOP of this component :|
+                internal.generateClassName(options.dayCellTopClass, renderProps)) }, props.showDayNumber && (preact.createElement(InnerContent // the dayCellTopContent
+            , { tag: 'div', attrs: hasNavLink
+                    ? internal.buildNavLinkAttrs(context, props.date, undefined, fullDateStr)
+                    : { 'aria-hidden': true } // label already on cell
+                , className: internal.generateClassName(options.dayCellTopInnerClass, renderProps) }))),
+            preact.createElement("div", { className: core.joinClassNames(classNames__default["default"].flexCol, props.fgLiquidHeight ? classNames__default["default"].liquid : classNames__default["default"].grow), ref: this.handleBodyEl },
+                preact.createElement("div", { className: internal.generateClassName(options.dayCellInnerClass, renderProps), style: { minHeight: props.fgHeight } }, props.fg),
+                preact.createElement(DayGridMoreLink, { className: classNames__default["default"].rel, allDayDate: props.date, segs: props.segs, hiddenSegs: props.hiddenSegs, alignElRef: this.rootElRef, alignParentTop: props.showDayNumber
+                        ? '[role=row]'
+                        : `.${classNames__default["default"].internalView}`, dateSpanProps: props.dateSpanProps, dateProfile: props.dateProfile, eventSelection: props.eventSelection, eventDrag: props.eventDrag, eventResize: props.eventResize, todayRange: props.todayRange, isNarrow: props.isNarrow, isMicro: props.isMicro })),
+            preact.createElement("div", { className: core.joinClassNames(classNames__default["default"].rel, // puts it above bg-fills
+                internal.generateClassName(options.dayCellBottomClass, renderProps)) })))));
+    }
+}
+// Utils
+// -------------------------------------------------------------------------------------------------
+function renderTopInner(props) {
+    return props.text || preact.createElement(preact.Fragment, null, "\u00A0"); // TODO: DRY?
+}
+function shouldDisplayMonthStart(date, currentRange, dateEnv) {
+    const { start: currentStart, end: currentEnd } = currentRange;
+    const currentEndIncl = internal.addMs(currentEnd, -1);
+    const currentFirstYear = dateEnv.getYear(currentStart);
+    const currentFirstMonth = dateEnv.getMonth(currentStart);
+    const currentLastYear = dateEnv.getYear(currentEndIncl);
+    const currentLastMonth = dateEnv.getMonth(currentEndIncl);
+    // spans more than one month?
+    return !(currentFirstYear === currentLastYear && currentFirstMonth === currentLastMonth) &&
+        Boolean(
+        // first date in current view?
+        date.valueOf() === currentStart.valueOf() ||
+            // a month-start that's within the current range?
+            (dateEnv.getDay(date) === 1 && date.valueOf() < currentEnd.valueOf()));
+}
+function refineRenderProps(raw) {
+    let { date, dateEnv, hasLabel, hasMonthLabel, hasNavLink, businessHours } = raw;
+    let [text, textParts] = hasLabel
+        ? dateEnv.format(date, hasMonthLabel ? raw.monthStartFormat : raw.dayCellFormat)
+        : ['', []];
+    return Object.assign(Object.assign(Object.assign({}, raw.dateMeta), raw.renderProps), { text,
+        textParts, isMajor: raw.isMajor, isNarrow: raw.isNarrow, inPopover: false, hasNavLink,
+        get dayNumberText() { return internal.findDayNumberText(textParts); },
+        get monthText() { return internal.findMonthText(textParts); }, options: { businessHours }, view: raw.viewApi });
+}
+
+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 internal.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 internal.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);
+}
+/*
+Ensures relative order of DayRowEventRange stays consistent with segs
+*/
+function compileSegMap(segs, segMap) {
+    const res = [];
+    for (const seg of segs) {
+        res.push(...(segMap.get(seg.eventRange) || []));
+    }
+    return res;
+}
+
+function buildDayTableModel(dateProfile, dateProfileGenerator, dateEnv) {
+    const daySeries = new internal.DaySeriesModel(dateProfile.renderRange, dateProfileGenerator);
+    const breakOnWeeks = /year|month|week/.test(dateProfile.currentRangeUnit);
+    const majorUnit = !breakOnWeeks && internal.computeMajorUnit(dateProfile, dateEnv);
+    return new internal.DayTableModel(daySeries, breakOnWeeks, dateEnv, majorUnit);
+}
+function computeColWidth(colCount, colMinWidth, viewportWidth) {
+    if (viewportWidth == null) {
+        return [undefined, undefined];
+    }
+    const colTempWidth = viewportWidth / colCount;
+    if (colTempWidth < colMinWidth) {
+        return [colMinWidth * colCount, colMinWidth];
+    }
+    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, colCount) {
+    let fromStart;
+    let fromEnd;
+    if (colWidth != null) {
+        fromStart = seg.start * colWidth;
+        fromEnd = (colCount - seg.end) * colWidth;
+    }
+    else {
+        const colWidthFrac = 1 / colCount;
+        fromStart = internal.fracToCssDim(seg.start * colWidthFrac);
+        fromEnd = internal.fracToCssDim(1 - seg.end * colWidthFrac);
+    }
+    return { insetInlineStart: fromStart, insetInlineEnd: fromEnd };
+}
+function computeColFromPosition(positionLeft, elWidth, colWidth, colCount, isRtl) {
+    const realColWidth = colWidth != null ? colWidth : elWidth / colCount;
+    const colFromLeft = Math.floor(positionLeft / realColWidth);
+    const col = isRtl ? (colCount - colFromLeft - 1) : colFromLeft;
+    const left = colFromLeft * realColWidth;
+    const right = left + realColWidth;
+    return { col, left, right };
+}
+function computeRowFromPosition(positionTop, cellRows, rowHeightMap) {
+    let row = 0;
+    let top = 0;
+    let bottom = 0;
+    for (const cells of cellRows) {
+        const key = cells[0].key;
+        top = bottom;
+        bottom = top + rowHeightMap.get(key);
+        if (positionTop < bottom) {
+            break;
+        }
+        row++;
+    }
+    return { row, top, bottom };
+}
+// Hit Element
+// -------------------------------------------------------------------------------------------------
+function getRowEl(rootEl, row) {
+    return rootEl.querySelectorAll('[role=row]')[row];
+}
+function getCellEl(rowEl, col) {
+    return rowEl.querySelectorAll('[role=gridcell]')[col];
+}
+// Header Formatting
+// -------------------------------------------------------------------------------------------------
+const dayMicroWidth = 50;
+const dayHeaderMicroFormat = internal.createFormatter({
+    weekday: 'narrow'
+});
+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) {
+        return internal.createFormatter({ weekday: 'short' }); // "Sat"
+    }
+    if (dayCnt > 1) {
+        return internal.createFormatter({
+            weekday: 'short',
+            weekdayJustify: 'start',
+            day: 'numeric',
+            omitCommas: true,
+        });
+    }
+    return internal.createFormatter({
+        weekday: 'long',
+        weekdayJustify: 'start',
+        day: 'numeric',
+        omitCommas: true,
+    });
+}
+
+class DayGridEventHarness extends preact.Component {
+    constructor() {
+        super(...arguments);
+        // ref
+        this.rootElRef = preact.createRef();
+    }
+    render() {
+        const { props } = this;
+        return (preact.createElement("div", { className: core.joinClassNames(props.className, classNames__default["default"].abs), style: props.style, ref: this.rootElRef }, props.children));
+    }
+    componentDidMount() {
+        const rootEl = this.rootElRef.current; // TODO: make dynamic with useEffect
+        this.disconnectHeight = internal.watchHeight(rootEl, (height) => {
+            internal.setRef(this.props.heightRef, height);
+        });
+    }
+    componentWillUnmount() {
+        this.disconnectHeight();
+        internal.setRef(this.props.heightRef, null);
+    }
+}
+
+const DEFAULT_WEEK_NUM_FORMAT = internal.createFormatter({ week: 'narrow' });
+class DayGridRow extends internal.BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.headerHeightRefMap = new internal.RefMap(() => {
+            internal.afterSize(this.handleSegPositioning);
+        });
+        this.mainHeightRefMap = new internal.RefMap(() => {
+            const fgLiquidHeight = this.props.dayMaxEvents === true || this.props.dayMaxEventRows === true;
+            if (fgLiquidHeight) {
+                internal.afterSize(this.handleSegPositioning);
+            }
+        });
+        this.segHeightRefMap = new internal.RefMap(() => {
+            internal.afterSize(this.handleSegPositioning);
+        });
+        // memo
+        this.buildWeekNumberRenderProps = internal.memoize(buildWeekNumberRenderProps);
+        this.handleRootEl = (rootEl) => {
+            this.rootEl = rootEl;
+            internal.setRef(this.props.rootElRef, rootEl);
+        };
+        this.handleSegPositioning = () => {
+            this.forceUpdate();
+        };
+    }
+    render() {
+        const { props, context, headerHeightRefMap, mainHeightRefMap } = this;
+        const { cells } = props;
+        const { options } = context;
+        const weekDateMarker = props.cells[0].date;
+        const fgLiquidHeight = props.dayMaxEvents === true || props.dayMaxEventRows === true;
+        // TODO: memoize? sort all types of segs?
+        const fgEventSegs = internal.sortEventSegs(props.fgEventSegs, options.eventOrder);
+        // TODO: memoize?
+        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 hasNavLink = options.navLinks;
+        const fullWeekStr = internal.buildDateStr(context, weekDateMarker, 'week');
+        const weekNumberRenderProps = this.buildWeekNumberRenderProps(weekDateMarker, context, props.cellIsNarrow, hasNavLink);
+        return (preact.createElement("div", { role: props.role /* !!! */, "aria-label": props.role === 'row' // HACK
+                ? fullWeekStr
+                : undefined // can't have label on non-role div
+            , className: internal.joinArrayishClassNames(options.dayRowClass, props.className, classNames__default["default"].flexRow, classNames__default["default"].rel, // origin for inlineWeekNumber?
+            classNames__default["default"].isolate, (props.forPrint && props.basis !== undefined) && // basis implies siblings (must share height)
+                classNames__default["default"].printSiblingRow), style: {
+                'flex-basis': props.basis,
+            }, ref: this.handleRootEl },
+            (props.showWeekNumbers && !props.cellIsMicro) && (preact.createElement(internal.ContentContainer, { tag: 'div', attrs: Object.assign(Object.assign({}, (hasNavLink
+                    ? internal.buildNavLinkAttrs(context, weekDateMarker, 'week', fullWeekStr, /* isTabbable = */ false)
+                    : {})), { 'role': undefined, 'aria-hidden': true }), 
+                // put above all cells (TODO: put explicit z0 on each cell?)
+                className: classNames__default["default"].z1, renderProps: weekNumberRenderProps, generatorName: "inlineWeekNumberContent", customGenerator: options.inlineWeekNumberContent, defaultGenerator: internal.renderText, classNameGenerator: options.inlineWeekNumberClass, didMount: options.inlineWeekNumberDidMount, willUnmount: options.inlineWeekNumberWillUnmount })),
+            this.renderFillSegs(props.businessHourSegs, 'non-business'),
+            this.renderFillSegs(props.bgEventSegs, 'bg-event'),
+            this.renderFillSegs(highlightSegs, 'highlight'),
+            props.cells.map((cell, col) => {
+                const normalFgNodes = this.renderFgSegs(maxMainTop, renderableSegsByCol[col], segTops, props.todayRange, 
+                /* isMirror = */ false);
+                return (preact.createElement(DayGridCell, { key: cell.key, dateProfile: props.dateProfile, todayRange: props.todayRange, date: cell.date, isMajor: cell.isMajor, showDayNumber: props.showDayNumbers, isNarrow: props.cellIsNarrow, isMicro: props.cellIsMicro, borderStart: Boolean(col), 
+                    // content
+                    segs: segsByCol[col], hiddenSegs: hiddenSegsByCol[col], fgLiquidHeight: fgLiquidHeight, fg: (preact.createElement(preact.Fragment, null, normalFgNodes)), eventDrag: props.eventDrag, eventResize: props.eventResize, eventSelection: props.eventSelection, 
+                    // render hooks
+                    renderProps: cell.renderProps, dateSpanProps: cell.dateSpanProps, attrs: cell.attrs, className: cell.className, 
+                    // dimensions
+                    fgHeight: heightsByCol[col], width: props.colWidth, 
+                    // refs
+                    headerHeightRef: headerHeightRefMap.createRef(cell.key), mainHeightRef: mainHeightRefMap.createRef(cell.key) }));
+            }),
+            this.renderFgSegs(maxMainTop, mirrorSegs, segTops, props.todayRange, 
+            /* isMirror = */ true)));
+    }
+    renderFgSegs(headerHeight, segs, segTops, todayRange, isMirror) {
+        var _a;
+        const { props, segHeightRefMap } = this;
+        const { colWidth, eventSelection, cellIsMicro } = props;
+        const colCount = props.cells.length;
+        const defaultDisplayEventEnd = props.cells.length === 1;
+        const nodes = [];
+        for (const seg of segs) {
+            const key = getEventPartKey(seg);
+            const { standinFor, eventRange } = seg;
+            const { instanceId } = eventRange.instance;
+            if (standinFor) {
+                continue;
+            }
+            const { insetInlineStart, insetInlineEnd } = computeHorizontalsFromSeg(seg, colWidth, colCount);
+            const localTop = (_a = segTops.get(standinFor ? getEventPartKey(standinFor) : key)) !== null && _a !== void 0 ? _a : (isMirror ? 0 : undefined);
+            const top = headerHeight != null && localTop != null
+                ? headerHeight + localTop
+                : undefined;
+            const isDragging = Boolean(props.eventDrag && props.eventDrag.affectedInstances[instanceId]);
+            const isResizing = Boolean(props.eventResize && props.eventResize.affectedInstances[instanceId]);
+            const isInvisible = !isMirror && (isDragging || isResizing || standinFor || top == null);
+            const isListItem = hasListItemDisplay(seg);
+            nodes.push(preact.createElement(DayGridEventHarness, { key: key, className: seg.start ? classNames__default["default"].fakeBorderS : '', style: {
+                    visibility: isInvisible ? 'hidden' : undefined,
+                    top,
+                    insetInlineStart,
+                    insetInlineEnd,
+                    zIndex: 0, // container inner z-indexes
+                }, heightRef: (!standinFor && !isMirror)
+                    ? segHeightRefMap.createRef(key)
+                    : null },
+                preact.createElement(internal.StandardEvent, Object.assign({ display: isListItem ? 'list-item' : 'row', eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: isDragging, isResizing: isResizing, isMirror: isMirror, isSelected: instanceId === eventSelection, isNarrow: props.cellIsNarrow, defaultTimeFormat: DEFAULT_TABLE_EVENT_TIME_FORMAT, defaultDisplayEventEnd: defaultDisplayEventEnd, disableResizing: isListItem, forcedTimeText: cellIsMicro ? '' : undefined }, internal.getEventRangeMeta(eventRange, todayRange)))));
+        }
+        return nodes;
+    }
+    renderFillSegs(segs, fillType) {
+        const { props, context } = this;
+        const { todayRange, colWidth } = props;
+        const colCount = props.cells.length;
+        const nodes = [];
+        for (const seg of segs) {
+            const key = internal.buildEventRangeKey(seg.eventRange); // TODO: use different type of key than fg!?
+            const { insetInlineStart, insetInlineEnd } = computeHorizontalsFromSeg(seg, colWidth, colCount);
+            const isVisible = !seg.standinFor;
+            nodes.push(preact.createElement("div", { key: key, className: classNames__default["default"].fillY, style: {
+                    visibility: isVisible ? '' : 'hidden',
+                    insetInlineStart,
+                    insetInlineEnd,
+                } }, fillType === 'bg-event' ?
+                preact.createElement(internal.BgEvent, Object.assign({ eventRange: seg.eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isNarrow: props.cellIsNarrow, isVertical: false }, internal.getEventRangeMeta(seg.eventRange, todayRange))) : (internal.renderFill(fillType, context.options))));
+        }
+        return preact.createElement(preact.Fragment, {}, ...nodes); // TODO: shouldn't this be an array, so keyed?
+    }
+    // Sizing
+    // -----------------------------------------------------------------------------------------------
+    componentDidMount() {
+        const { rootEl } = this; // TODO: make dynamic with useEffect
+        this.disconnectHeight = internal.watchHeight(rootEl, (contentHeight) => {
+            internal.setRef(this.props.heightRef, contentHeight);
+        });
+    }
+    componentWillUnmount() {
+        this.disconnectHeight();
+        internal.setRef(this.props.heightRef, null);
+    }
+    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;
+        if (props.eventResize && props.eventResize.segs.length) { // messy check
+            return props.eventResize.segs;
+        }
+        return [];
+    }
+    getHighlightSegs() {
+        let { props } = this;
+        if (props.eventDrag && props.eventDrag.segs.length) { // messy check
+            return props.eventDrag.segs;
+        }
+        if (props.eventResize && props.eventResize.segs.length) { // messy check
+            return props.eventResize.segs;
+        }
+        return props.dateSelectionSegs;
+    }
+}
+// Utils
+// -------------------------------------------------------------------------------------------------
+function buildWeekNumberRenderProps(weekDateMarker, context, isNarrow, hasNavLink) {
+    const { dateEnv, options } = context;
+    const weekNum = dateEnv.computeWeekNumber(weekDateMarker);
+    const [weekNumText, weekNumTextParts] = dateEnv.format(weekDateMarker, options.weekNumberFormat || DEFAULT_WEEK_NUM_FORMAT);
+    const weekDateZoned = dateEnv.toDate(weekDateMarker);
+    return {
+        num: weekNum,
+        text: weekNumText,
+        textParts: weekNumTextParts,
+        date: weekDateZoned,
+        isNarrow,
+        hasNavLink,
+    };
+}
+
+class DayGridRows extends internal.DateComponent {
+    constructor() {
+        super(...arguments);
+        // memo
+        this.splitBusinessHourSegs = internal.memoize(splitSegsByRow);
+        this.splitBgEventSegs = internal.memoize(splitSegsByRow);
+        this.splitFgEventSegs = internal.memoize(splitSegsByRow);
+        this.splitDateSelectionSegs = internal.memoize(splitSegsByRow);
+        this.splitEventDrag = internal.memoize(splitInteractionByRow);
+        this.splitEventResize = internal.memoize(splitInteractionByRow);
+        // internal
+        this.rowHeightRefMap = new internal.RefMap((height, key) => {
+            // HACKy way of syncing RefMap results with prop
+            const { rowHeightRefMap } = this.props;
+            if (rowHeightRefMap) {
+                rowHeightRefMap.handleValue(height, key);
+            }
+        });
+        this.handleRootEl = (rootEl) => {
+            this.rootEl = rootEl;
+            if (rootEl) {
+                this.context.registerInteractiveComponent(this, {
+                    el: rootEl,
+                    isHitComboAllowed: this.props.isHitComboAllowed,
+                });
+            }
+            else {
+                this.context.unregisterInteractiveComponent(this);
+            }
+        };
+    }
+    render() {
+        let { props, context, rowHeightRefMap } = this;
+        let { options } = context;
+        let rowCount = props.cellRows.length;
+        let fgEventSegsByRow = this.splitFgEventSegs(props.fgEventSegs, rowCount);
+        let bgEventSegsByRow = this.splitBgEventSegs(props.bgEventSegs, rowCount);
+        let businessHourSegsByRow = this.splitBusinessHourSegs(props.businessHourSegs, rowCount);
+        let dateSelectionSegsByRow = this.splitDateSelectionSegs(props.dateSelectionSegs, rowCount);
+        let eventDragByRow = this.splitEventDrag(props.eventDrag, rowCount);
+        let eventResizeByRow = this.splitEventResize(props.eventResize, rowCount);
+        let isHeightAuto = internal.getIsHeightAuto(options);
+        let rowHeightsRedistribute = !props.forPrint && !isHeightAuto;
+        let rowBasis = computeRowBasis(props.visibleWidth, rowCount, isHeightAuto, options);
+        return (preact.createElement("div", { role: 'rowgroup', className: core.joinClassNames(props.className, 
+            // HACK for Safari. Can't do break-inside:avoid with flexbox items, likely b/c it's not standard:
+            // https://stackoverflow.com/a/60256345
+            !props.forPrint && classNames__default["default"].flexCol), style: { width: props.width }, ref: this.handleRootEl }, props.cellRows.map((cells, row) => (preact.createElement(DayGridRow, { key: cells[0].key, role: 'row', dateProfile: props.dateProfile, todayRange: props.todayRange, cells: cells, cellIsNarrow: props.cellIsNarrow, cellIsMicro: props.cellIsMicro, showDayNumbers: rowCount > 1, showWeekNumbers: rowCount > 1 && options.weekNumbers, forPrint: props.forPrint, 
+            // if not auto-height, distribute height of container somewhat evently to rows
+            className: core.joinClassNames(rowHeightsRedistribute && classNames__default["default"].grow, rowCount > 1 && classNames__default["default"].breakInsideAvoid, // don't avoid breaks for single tall row
+            row < rowCount - 1 ? classNames__default["default"].borderOnlyB : classNames__default["default"].borderNone), 
+            // content
+            fgEventSegs: fgEventSegsByRow[row], bgEventSegs: bgEventSegsByRow[row].filter(isSegAllDay) /* HACK */, businessHourSegs: businessHourSegsByRow[row], dateSelectionSegs: dateSelectionSegsByRow[row], eventSelection: props.eventSelection, eventDrag: eventDragByRow[row], eventResize: eventResizeByRow[row], dayMaxEvents: props.dayMaxEvents, dayMaxEventRows: props.dayMaxEventRows, 
+            // dimensions
+            colWidth: props.colWidth, basis: rowBasis, 
+            // refs
+            heightRef: rowHeightRefMap.createRef(cells[0].key) })))));
+    }
+    // Hit System
+    // -----------------------------------------------------------------------------------------------
+    queryHit(isRtl, positionLeft, positionTop, elWidth) {
+        const { props } = this;
+        const colCount = props.cellRows[0].length;
+        const { col, left, right } = computeColFromPosition(positionLeft, elWidth, props.colWidth, colCount, isRtl);
+        const { row, top, bottom } = computeRowFromPosition(positionTop, props.cellRows, this.rowHeightRefMap.current);
+        const cell = props.cellRows[row][col];
+        const cellStartDate = cell.date;
+        const cellEndDate = internal.addDays(cellStartDate, 1);
+        return {
+            dateProfile: props.dateProfile,
+            dateSpan: Object.assign({ range: {
+                    start: cellStartDate,
+                    end: cellEndDate,
+                }, allDay: true }, cell.dateSpanProps),
+            getDayEl: () => getCellEl(getRowEl(this.rootEl, row), col),
+            rect: {
+                left,
+                right,
+                top,
+                bottom,
+            },
+            layer: 0,
+        };
+    }
+}
+// Utils
+// -------------------------------------------------------------------------------------------------
+function isSegAllDay(seg) {
+    return seg.eventRange.def.allDay;
+}
+/*
+Amount of height a row should consume prior to expanding
+We don't want to use min-height with flexbox because we leverage min-height:auto,
+which yields value based on natural height of events
+*/
+function computeRowBasis(visibleWidth, // should INCLUDE any scrollbar width to avoid oscillation
+rowCount, isHeightAuto, options) {
+    if (visibleWidth != null) {
+        // ensure a consistent row min-height modelled after a month with 6 rows respecting aspectRatio
+        // will result in same minHeight regardless of weekends, dayMinWidth, height:auto
+        const rowBasis = visibleWidth / options.aspectRatio / 6;
+        // don't give minHeight when single-month non-auto-height
+        // TODO: better way to detect this with DateProfile?
+        return (rowCount > 6 || isHeightAuto) ? rowBasis : 0;
+    }
+    return 0;
+}
+
+class DayGridHeaderCell extends internal.BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.handleInnerEl = (innerEl) => {
+            if (this.disconnectSize) {
+                this.disconnectSize();
+                this.disconnectSize = undefined;
+            }
+            if (innerEl) {
+                this.disconnectSize = internal.watchSize(innerEl, (width, height) => {
+                    internal.setRef(this.props.innerHeightRef, height);
+                    /*
+                    TODO: DRY with TimelineHeaderCell
+                    */
+                    if (this.align === 'center' && this.isSticky) {
+                        this.setState({ innerWidth: width });
+                    }
+                });
+            }
+            else {
+                internal.setRef(this.props.innerHeightRef, null);
+            }
+        };
+    }
+    render() {
+        const { props, state, context } = this;
+        const { renderConfig, dataConfig } = props;
+        // HACK
+        const isDisabled = dataConfig.renderProps.isDisabled;
+        const finalRenderProps = Object.assign(Object.assign({}, dataConfig.renderProps), { isNarrow: props.cellIsNarrow, level: props.rowLevel });
+        if (props.cellIsMicro) {
+            // TODO: only if not distinct dates
+            const [microText, microTextParts] = context.dateEnv.format(dataConfig.dateMarker, dayHeaderMicroFormat);
+            finalRenderProps.text = finalRenderProps.weekdayText = microText;
+            finalRenderProps.textParts = microTextParts;
+        }
+        /*
+        TODO: DRY with TimelineHeaderCell
+        */
+        const alignInput = renderConfig.align;
+        const align = this.align =
+            typeof alignInput === 'function'
+                ? alignInput({ level: props.rowLevel, inPopover: dataConfig.renderProps.inPopover, isNarrow: props.cellIsNarrow })
+                : alignInput;
+        const stickyInput = renderConfig.sticky;
+        const isSticky = this.isSticky =
+            props.rowLevel && stickyInput !== false;
+        let edgeCoord;
+        if (isSticky) {
+            if (align === 'center') {
+                if (state.innerWidth != null) {
+                    edgeCoord = `calc(50% - ${state.innerWidth / 2}px)`;
+                }
+            }
+            else {
+                edgeCoord = (typeof stickyInput === 'number' ||
+                    typeof stickyInput === 'string') ? stickyInput : 0;
+            }
+        }
+        return (preact.createElement(internal.ContentContainer, { tag: 'div', attrs: Object.assign({ role: 'columnheader', 'aria-colspan': dataConfig.colSpan }, dataConfig.attrs), className: core.joinClassNames(dataConfig.className, classNames__default["default"].tight, classNames__default["default"].flexCol, props.borderStart ? classNames__default["default"].borderOnlyS : classNames__default["default"].borderNone, align === 'center' ? classNames__default["default"].alignCenter :
+                align === 'end' ? classNames__default["default"].alignEnd :
+                    classNames__default["default"].alignStart, props.colWidth == null && classNames__default["default"].liquid, !isSticky && classNames__default["default"].crop), style: {
+                width: props.colWidth != null
+                    ? props.colWidth * (dataConfig.colSpan || 1)
+                    : undefined,
+            }, renderProps: finalRenderProps, generatorName: renderConfig.generatorName, customGenerator: renderConfig.customGenerator, defaultGenerator: internal.renderText, classNameGenerator: 
+            // don't use custom classNames if disabled
+            // TODO: make DRY with DayCellContainer
+            isDisabled ? undefined : renderConfig.classNameGenerator, didMount: renderConfig.didMount, willUnmount: renderConfig.willUnmount }, (InnerContainer) => (preact.createElement("div", { ref: this.handleInnerEl, className: core.joinClassNames(classNames__default["default"].flexCol, classNames__default["default"].rigid, isSticky && classNames__default["default"].sticky), style: {
+                left: edgeCoord,
+                right: edgeCoord,
+            } },
+            preact.createElement(InnerContainer, { tag: 'div', attrs: dataConfig.innerAttrs, className: internal.generateClassName(renderConfig.innerClassNameGenerator, finalRenderProps) })))));
+    }
+}
+
+class DayGridHeaderRow extends internal.BaseComponent {
+    constructor() {
+        super(...arguments);
+        // ref
+        this.innerHeightRefMap = new internal.RefMap(() => {
+            internal.afterSize(this.handleInnerHeights);
+        });
+        this.handleInnerHeights = () => {
+            const innerHeightMap = this.innerHeightRefMap.current;
+            let max = 0;
+            for (const innerHeight of innerHeightMap.values()) {
+                max = Math.max(max, innerHeight);
+            }
+            if (this.currentInnerHeight !== max) {
+                this.currentInnerHeight = max;
+                internal.setRef(this.props.innerHeightRef, max);
+            }
+        };
+    }
+    render() {
+        const { props, context } = this;
+        const { options } = context;
+        return (preact.createElement("div", { role: props.role /* !!! */, "aria-rowindex": props.rowIndex != null ? 1 + props.rowIndex : undefined, className: internal.joinArrayishClassNames(options.dayHeaderRowClass, props.className, classNames__default["default"].flexRow, classNames__default["default"].contentBox, props.borderBottom ? classNames__default["default"].borderOnlyB : classNames__default["default"].borderNone), style: {
+                height: props.height,
+            } }, props.dataConfigs.map((dataConfig, cellI) => (preact.createElement(DayGridHeaderCell, { key: dataConfig.key, renderConfig: props.renderConfig, dataConfig: dataConfig, borderStart: Boolean(cellI), colWidth: props.colWidth, innerHeightRef: this.innerHeightRefMap.createRef(dataConfig.key), cellIsNarrow: props.cellIsNarrow, cellIsMicro: props.cellIsMicro, rowLevel: props.rowLevel })))));
+    }
+    componentWillUnmount() {
+        internal.setRef(this.props.innerHeightRef, null);
+    }
+}
+
+/*
+TODO: kill this class in favor of DayGridHeaderRows?
+*/
+class DayGridHeader extends internal.BaseComponent {
+    render() {
+        const { props } = this;
+        const { headerTiers } = props;
+        return (preact.createElement("div", { role: 'rowgroup', className: core.joinClassNames(props.className, classNames__default["default"].flexCol, props.width == null && classNames__default["default"].liquid), style: {
+                width: props.width,
+            } }, headerTiers.map((rowConfig, i) => (preact.createElement(DayGridHeaderRow, Object.assign({}, rowConfig, { key: i, role: 'row', borderBottom: i < headerTiers.length - 1, colWidth: props.colWidth, cellIsNarrow: props.cellIsNarrow, cellIsMicro: props.cellIsMicro, rowLevel: headerTiers.length - i - 1 }))))));
+    }
+}
+
+class DayGridLayoutNormal extends internal.BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.handleScroller = (scroller) => {
+            internal.setRef(this.props.scrollerRef, scroller);
+        };
+        this.handleTotalWidth = (totalWidth) => {
+            this.setState({ totalWidth });
+        };
+        this.handleClientWidth = (clientWidth) => {
+            this.setState({ clientWidth });
+        };
+    }
+    render() {
+        const { props, state, context } = this;
+        const { options } = context;
+        const { totalWidth, clientWidth } = state;
+        let endScrollbarWidth = (totalWidth != null && clientWidth != null)
+            ? totalWidth - clientWidth
+            : undefined;
+        // HACK when clientWidth does NOT include body-border, compared to totalWidth
+        if (endScrollbarWidth < 3) {
+            endScrollbarWidth = 0;
+        }
+        const verticalScrollbars = !props.forPrint && !internal.getIsHeightAuto(options);
+        const stickyHeaderDates = !props.forPrint && internal.getStickyHeaderDates(options);
+        const colCount = props.cellRows[0].length;
+        const cellWidth = clientWidth != null ? clientWidth / colCount : undefined;
+        const cellIsMicro = cellWidth != null && cellWidth <= dayMicroWidth;
+        const cellIsNarrow = cellIsMicro || (cellWidth != null && cellWidth <= options.dayNarrowWidth);
+        return (preact.createElement(preact.Fragment, null,
+            options.dayHeaders && (preact.createElement("div", { className: core.joinClassNames(internal.generateClassName(options.tableHeaderClass, {
+                    isSticky: stickyHeaderDates,
+                }), props.borderlessX && classNames__default["default"].borderlessX, classNames__default["default"].printHeader, // either flexCol or table-header-group
+                stickyHeaderDates && classNames__default["default"].tableHeaderSticky) },
+                preact.createElement("div", { className: classNames__default["default"].flexRow },
+                    preact.createElement(DayGridHeader, { headerTiers: props.headerTiers, cellIsNarrow: cellIsNarrow, cellIsMicro: cellIsMicro }),
+                    Boolean(endScrollbarWidth) && (preact.createElement("div", { className: internal.joinArrayishClassNames(internal.generateClassName(options.fillerClass, { isHeader: true }), classNames__default["default"].borderOnlyS), style: { minWidth: endScrollbarWidth } }))),
+                preact.createElement("div", { className: internal.generateClassName(options.dayHeaderDividerClass, {
+                        isSticky: stickyHeaderDates,
+                        options: { allDaySlot: Boolean(options.allDaySlot) },
+                    }) }))),
+            preact.createElement(internal.Scroller, { vertical: verticalScrollbars, className: internal.joinArrayishClassNames(options.tableBodyClass, props.borderlessX && classNames__default["default"].borderlessX, stickyHeaderDates && classNames__default["default"].borderlessTop, (stickyHeaderDates || props.noEdgeEffects) && classNames__default["default"].noEdgeEffects, 
+                // HACK for Safari. Can't do break-inside:avoid with flexbox items, likely b/c it's not standard:
+                // https://stackoverflow.com/a/60256345
+                !props.forPrint && classNames__default["default"].flexCol, verticalScrollbars && classNames__default["default"].liquid), ref: this.handleScroller, clientWidthRef: this.handleClientWidth },
+                preact.createElement(DayGridRows, { dateProfile: props.dateProfile, todayRange: props.todayRange, cellRows: props.cellRows, forPrint: props.forPrint, isHitComboAllowed: props.isHitComboAllowed, className: classNames__default["default"].grow, dayMaxEvents: props.forPrint ? undefined : options.dayMaxEvents, dayMaxEventRows: options.dayMaxEventRows, 
+                    // content
+                    fgEventSegs: props.fgEventSegs, bgEventSegs: props.bgEventSegs, businessHourSegs: props.businessHourSegs, dateSelectionSegs: props.dateSelectionSegs, eventDrag: props.eventDrag, eventResize: props.eventResize, eventSelection: props.eventSelection, 
+                    // dimensions
+                    visibleWidth: totalWidth, cellIsNarrow: cellIsNarrow, cellIsMicro: cellIsMicro, 
+                    // refs
+                    rowHeightRefMap: props.rowHeightRefMap })),
+            preact.createElement(internal.Ruler, { widthRef: this.handleTotalWidth })));
+    }
+}
+
+class DayGridLayoutPannable extends internal.BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.headerScrollerRef = preact.createRef();
+        this.bodyScrollerRef = preact.createRef();
+        this.footerScrollerRef = preact.createRef();
+        // Sizing
+        // -----------------------------------------------------------------------------------------------
+        this.handleTotalWidth = (totalWidth) => {
+            this.setState({ totalWidth });
+        };
+        this.handleClientWidth = (clientWidth) => {
+            this.setState({ clientWidth });
+        };
+    }
+    render() {
+        const { props, state, context } = this;
+        const { options } = context;
+        const { totalWidth, clientWidth } = state;
+        const endScrollbarWidth = (totalWidth != null && clientWidth != null)
+            ? totalWidth - clientWidth
+            : undefined;
+        const verticalScrollbars = !props.forPrint && !internal.getIsHeightAuto(options);
+        const stickyHeaderDates = !props.forPrint && internal.getStickyHeaderDates(options);
+        const stickyFooterScrollbar = !props.forPrint && internal.getStickyFooterScrollbar(options);
+        const colCount = props.cellRows[0].length;
+        const [canvasWidth, colWidth] = computeColWidth(colCount, props.dayMinWidth, clientWidth);
+        const cellIsMicro = colWidth != null && colWidth <= dayMicroWidth;
+        const cellIsNarrow = cellIsMicro || (colWidth != null && colWidth <= options.dayNarrowWidth);
+        return (preact.createElement(preact.Fragment, null,
+            options.dayHeaders && (preact.createElement("div", { className: core.joinClassNames(internal.generateClassName(options.tableHeaderClass, {
+                    isSticky: stickyHeaderDates,
+                }), props.borderlessX && classNames__default["default"].borderlessX, classNames__default["default"].printHeader, // either flexCol or table-header-group
+                stickyHeaderDates && classNames__default["default"].tableHeaderSticky) },
+                preact.createElement(internal.Scroller, { horizontal: true, hideScrollbars: true, className: classNames__default["default"].flexRow, ref: this.headerScrollerRef },
+                    preact.createElement(DayGridHeader, { headerTiers: props.headerTiers, colWidth: colWidth, width: canvasWidth, cellIsNarrow: cellIsNarrow, cellIsMicro: cellIsMicro }),
+                    Boolean(endScrollbarWidth) && (preact.createElement("div", { className: internal.joinArrayishClassNames(internal.generateClassName(options.fillerClass, { isHeader: true }), classNames__default["default"].borderOnlyS), style: { minWidth: endScrollbarWidth } }))),
+                preact.createElement("div", { className: internal.generateClassName(options.dayHeaderDividerClass, {
+                        isSticky: stickyHeaderDates,
+                        options: { allDaySlot: Boolean(options.allDaySlot) },
+                    }) }))),
+            preact.createElement(internal.Scroller, { vertical: verticalScrollbars, horizontal: true, hideScrollbars: stickyFooterScrollbar ||
+                    props.forPrint // prevents blank space in print-view on Safari
+                , className: internal.joinArrayishClassNames(options.tableBodyClass, props.borderlessX && classNames__default["default"].borderlessX, stickyHeaderDates && classNames__default["default"].borderlessTop, (stickyHeaderDates || props.noEdgeEffects) && classNames__default["default"].noEdgeEffects, 
+                // HACK for Safari. Can't do break-inside:avoid with flexbox items, likely b/c it's not standard:
+                // https://stackoverflow.com/a/60256345
+                !props.forPrint && classNames__default["default"].flexCol, verticalScrollbars && classNames__default["default"].liquid), ref: this.bodyScrollerRef, clientWidthRef: this.handleClientWidth },
+                preact.createElement(DayGridRows, { dateProfile: props.dateProfile, todayRange: props.todayRange, cellRows: props.cellRows, forPrint: props.forPrint, isHitComboAllowed: props.isHitComboAllowed, className: classNames__default["default"].grow, dayMaxEvents: props.forPrint ? undefined : options.dayMaxEvents, dayMaxEventRows: options.dayMaxEventRows, 
+                    // content
+                    fgEventSegs: props.fgEventSegs, bgEventSegs: props.bgEventSegs, businessHourSegs: props.businessHourSegs, dateSelectionSegs: props.dateSelectionSegs, eventDrag: props.eventDrag, eventResize: props.eventResize, eventSelection: props.eventSelection, 
+                    // dimensions
+                    colWidth: colWidth, width: canvasWidth, visibleWidth: totalWidth, cellIsNarrow: cellIsNarrow, cellIsMicro: cellIsMicro, 
+                    // refs
+                    rowHeightRefMap: props.rowHeightRefMap })),
+            Boolean(stickyFooterScrollbar) && (preact.createElement(internal.FooterScrollbar, { isSticky: true, canvasWidth: canvasWidth, scrollerRef: this.footerScrollerRef })),
+            preact.createElement(internal.Ruler, { widthRef: this.handleTotalWidth })));
+    }
+    // Lifecycle
+    // -----------------------------------------------------------------------------------------------
+    componentDidMount() {
+        // scroller
+        const ScrollerSyncer = internal.getScrollerSyncerClass(this.context.pluginHooks);
+        this.syncedScroller = new ScrollerSyncer(true); // horizontal=true
+        internal.setRef(this.props.scrollerRef, this.syncedScroller);
+        this.updateSyncedScroller();
+    }
+    componentDidUpdate() {
+        // scroller
+        this.updateSyncedScroller();
+    }
+    componentWillUnmount() {
+        // scroller
+        this.syncedScroller.destroy();
+    }
+    // Scrolling
+    // -----------------------------------------------------------------------------------------------
+    updateSyncedScroller() {
+        this.syncedScroller.handleChildren([
+            this.headerScrollerRef.current,
+            this.bodyScrollerRef.current,
+            this.footerScrollerRef.current,
+        ]);
+    }
+}
+
+class DayGridLayout extends internal.BaseComponent {
+    constructor() {
+        super(...arguments);
+        // ref
+        this.scrollerRef = preact.createRef();
+        this.rowHeightRefMap = new internal.RefMap(() => {
+            internal.afterSize(this.updateScrollY);
+        });
+        // internal
+        this.scrollDate = null;
+        this.updateScrollY = () => {
+            const rowHeightMap = this.rowHeightRefMap.current;
+            const scroller = this.scrollerRef.current;
+            // Since updateScrollY is called by rowHeightRefMap, could be called with null during cleanup,
+            // and the scroller might not exist
+            if (scroller && this.scrollDate) {
+                let scrollTop = computeTopFromDate(this.scrollDate, this.props.cellRows, rowHeightMap, 1);
+                if (scrollTop != null) {
+                    if (scrollTop) {
+                        scrollTop++; // clear top border
+                    }
+                    scroller.scrollTo({ y: scrollTop });
+                }
+            }
+        };
+        this.handleScrollEnd = (isUser) => {
+            if (isUser) {
+                this.scrollDate = null;
+            }
+        };
+    }
+    render() {
+        const { props, context } = this;
+        const { options } = context;
+        const commonLayoutProps = Object.assign(Object.assign({}, props), { scrollerRef: this.scrollerRef, rowHeightRefMap: this.rowHeightRefMap });
+        return (preact.createElement(internal.ViewContainer, { viewSpec: context.viewSpec, attrs: {
+                role: 'grid',
+                'aria-rowcount': props.headerTiers.length + props.cellRows.length,
+                'aria-colcount': props.cellRows[0].length,
+                'aria-labelledby': props.labelId,
+                'aria-label': props.labelStr,
+            }, className: internal.joinArrayishClassNames(props.className, classNames__default["default"].printRoot, // either flexCol or table
+            options.tableClass), borderlessX: props.borderlessX, borderlessTop: props.borderlessTop, borderlessBottom: props.borderlessBottom, noEdgeEffects: props.noEdgeEffects }, options.dayMinWidth ? (preact.createElement(DayGridLayoutPannable, Object.assign({}, commonLayoutProps, { dayMinWidth: options.dayMinWidth }))) : (preact.createElement(DayGridLayoutNormal, Object.assign({}, commonLayoutProps)))));
+    }
+    // Lifecycle
+    // -----------------------------------------------------------------------------------------------
+    componentDidMount() {
+        this.resetScroll();
+        this.scrollerRef.current.addScrollEndListener(this.handleScrollEnd);
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.dateProfile !== this.props.dateProfile && this.context.options.scrollTimeReset) {
+            this.resetScroll();
+        }
+    }
+    componentWillUnmount() {
+        this.scrollerRef.current.removeScrollEndListener(this.handleScrollEnd);
+    }
+    // Scrolling
+    // -----------------------------------------------------------------------------------------------
+    resetScroll() {
+        this.scrollDate = this.props.dateProfile.currentDate;
+        this.updateScrollY();
+        const scroller = this.scrollerRef.current;
+        scroller.scrollTo({ x: 0 });
+    }
+}
+
+class DayGridView extends internal.BaseComponent {
+    constructor() {
+        super(...arguments);
+        // memo
+        this.buildDayTableModel = internal.memoize(buildDayTableModel);
+        this.buildDateRowConfigs = internal.memoize(buildDateRowConfigs);
+        this.createDayHeaderFormatter = internal.memoize(createDayHeaderFormatter);
+        // internal
+        this.slicer = new DayTableSlicer();
+    }
+    render() {
+        const { props, context } = this;
+        const { dateProfile } = props;
+        const { options, dateEnv } = context;
+        const dayTableModel = this.buildDayTableModel(dateProfile, context.dateProfileGenerator, dateEnv);
+        const datesRepDistinctDays = dayTableModel.rowCount === 1;
+        const dayHeaderFormat = this.createDayHeaderFormatter(context.options.dayHeaderFormat, datesRepDistinctDays, dayTableModel.colCount);
+        const slicedProps = this.slicer.sliceProps(props, dateProfile, options.nextDayThreshold, context, dayTableModel);
+        return (preact.createElement(internal.NowTimer, { unit: "day" }, (nowDate, todayRange) => {
+            const headerTiers = this.buildDateRowConfigs(dayTableModel.headerDates, datesRepDistinctDays, dateProfile, todayRange, dayHeaderFormat, context);
+            return (preact.createElement(DayGridLayout, { labelId: props.labelId, labelStr: props.labelStr, dateProfile: dateProfile, todayRange: todayRange, cellRows: dayTableModel.cellRows, forPrint: props.forPrint, className: props.className, 
+                // header content
+                headerTiers: headerTiers, 
+                // body content
+                fgEventSegs: slicedProps.fgEventSegs, bgEventSegs: slicedProps.bgEventSegs, businessHourSegs: slicedProps.businessHourSegs, dateSelectionSegs: slicedProps.dateSelectionSegs, eventDrag: slicedProps.eventDrag, eventResize: slicedProps.eventResize, eventSelection: slicedProps.eventSelection, borderlessX: props.borderlessX, borderlessTop: props.borderlessTop, borderlessBottom: props.borderlessBottom, noEdgeEffects: props.noEdgeEffects }));
+        }));
+    }
+}
+
+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 rowCount = Math.ceil(// could be partial weeks due to hiddenDays
+        internal.diffWeeks(lastMonthRenderStart, end));
+        end = internal.addWeeks(end, 6 - rowCount);
+    }
+    return { start, end };
+}
+
+exports.DayGridHeaderRow = DayGridHeaderRow;
+exports.DayGridLayout = DayGridLayout;
+exports.DayGridRow = DayGridRow;
+exports.DayGridRows = DayGridRows;
+exports.DayGridView = DayGridView;
+exports.DayTableSlicer = DayTableSlicer;
+exports.TableDateProfileGenerator = TableDateProfileGenerator;
+exports.buildDateDataConfigs = buildDateDataConfigs;
+exports.buildDateRenderConfig = buildDateRenderConfig;
+exports.buildDateRowConfig = buildDateRowConfig;
+exports.buildDateRowConfigs = buildDateRowConfigs;
+exports.buildDayTableModel = buildDayTableModel;
+exports.buildDayTableRenderRange = buildDayTableRenderRange;
+exports.computeColFromPosition = computeColFromPosition;
+exports.computeColWidth = computeColWidth;
+exports.computeRowBasis = computeRowBasis;
+exports.createDayHeaderFormatter = createDayHeaderFormatter;
+exports.dayHeaderMicroFormat = dayHeaderMicroFormat;
+exports.dayMicroWidth = dayMicroWidth;
+exports.getCellEl = getCellEl;
+exports.getRowEl = getRowEl;