@fullcalendar/multimonth 7.0.0-beta.3 → 7.0.0-beta.5

package/esm/index.js

@@ -0,0 +1,314 @@
+import { joinClassNames, createPlugin } from '@fullcalendar/core';
+import { buildDayTableModel, createDayHeaderFormatter, buildDateRowConfig, DayTableSlicer, DayGridHeaderRow, DayGridRows, dayMicroWidth, buildDayTableRenderRange, TableDateProfileGenerator } from '@fullcalendar/daygrid/internal';
+import { DateComponent, memoize, getUniqueDomId, buildNavLinkAttrs, generateClassName, joinArrayishClassNames, fracToCssDim, watchWidth, watchHeight, getIsHeightAuto, NowTimer, ViewContainer, Scroller, formatIsoMonthStr, afterSize, createDuration, intersectRanges, createFormatter, identity } from '@fullcalendar/core/internal';
+import classNames from '@fullcalendar/core/internal-classnames';
+import { createRef, createElement } from '@fullcalendar/core/preact';
+
+class SingleMonth extends DateComponent {
+    constructor() {
+        super(...arguments);
+        // memo
+        this.buildDayTableModel = memoize(buildDayTableModel);
+        this.createDayHeaderFormatter = memoize(createDayHeaderFormatter);
+        this.buildDateRowConfig = memoize(buildDateRowConfig);
+        // ref
+        this.gridElRef = createRef();
+        this.titleElRef = createRef();
+        this.tableHeaderElRef = createRef();
+        // internal
+        this.slicer = new DayTableSlicer();
+        this.titleId = getUniqueDomId();
+        this.handleEl = (el) => {
+            var _a;
+            const { options } = this.context;
+            if (el) {
+                this.rootEl = el;
+                (_a = options.singleMonthDidMount) === null || _a === void 0 ? void 0 : _a.call(options, Object.assign({ el: this.rootEl }, this.renderProps));
+            }
+        };
+    }
+    render() {
+        const { props, state, context } = this;
+        const { dateProfile, forPrint } = props;
+        const { options, dateEnv } = context;
+        const dayTableModel = this.buildDayTableModel(dateProfile, context.dateProfileGenerator, dateEnv);
+        const slicedProps = this.slicer.sliceProps(props, dateProfile, options.nextDayThreshold, context, dayTableModel);
+        const dayHeaderFormat = this.createDayHeaderFormatter(options.dayHeaderFormat, false, // datesRepDistinctDays
+        dayTableModel.colCount);
+        const rowConfig = this.buildDateRowConfig(dayTableModel.headerDates, false, // datesRepDistinctDays
+        dateProfile, props.todayRange, dayHeaderFormat, context);
+        const isTitleAndHeaderSticky = !forPrint && props.colCount === 1;
+        const isAspectRatio = !forPrint || props.hasLateralSiblings;
+        const invAspectRatio = 1 / options.aspectRatio;
+        const cellColCnt = dayTableModel.cellRows[0].length;
+        const colWidth = state.gridWidth != null ? state.gridWidth / cellColCnt : undefined;
+        const cellIsMicro = colWidth != null && colWidth <= dayMicroWidth;
+        const cellIsNarrow = cellIsMicro || (colWidth != null && colWidth <= options.dayNarrowWidth);
+        const rowHeightGuess = state.gridWidth != null
+            ? invAspectRatio * state.gridWidth / 6
+            : undefined;
+        const headerStickyBottom = isTitleAndHeaderSticky
+            ? rowHeightGuess
+            : undefined;
+        const titleStickyBottom = isTitleAndHeaderSticky && rowHeightGuess != null && state.tableHeaderHeight != null
+            ? rowHeightGuess + state.tableHeaderHeight + 1
+            : undefined;
+        const hasNavLink = options.navLinks && props.colCount > 1;
+        const headerRenderProps = {
+            colCount: props.colCount,
+            isSticky: isTitleAndHeaderSticky,
+            isNarrow: cellIsNarrow,
+            hasNavLink,
+        };
+        const monthStartDate = props.dateProfile.currentRange.start;
+        const navLinkAttrs = hasNavLink
+            ? buildNavLinkAttrs(context, monthStartDate, 'month', props.isoDateStr)
+            : {};
+        return (createElement("div", { role: 'listitem', style: { width: props.width } },
+            createElement("div", { ref: this.gridElRef, role: 'grid', "aria-labelledby": this.titleId, "data-date": props.isoDateStr, className: joinClassNames(generateClassName(options.singleMonthClass, {
+                    colCount: props.colCount || 0,
+                }), props.borderlessX && classNames.borderlessX, props.borderlessTop && classNames.borderlessTop, props.borderlessBottom && classNames.borderlessBottom, props.colCount === 1 && classNames.noMargin, classNames.flexCol, props.hasLateralSiblings && classNames.breakInsideAvoid) },
+                createElement("div", { id: this.titleId, ref: this.titleElRef, className: joinClassNames(generateClassName(options.singleMonthHeaderClass, headerRenderProps), isTitleAndHeaderSticky && classNames.stickyT, classNames.flexCol), style: {
+                        // HACK to keep zIndex above table-header,
+                        // because in Chrome, something about position:sticky on this title div
+                        // causes its bottom border to no be considered part of its mass,
+                        // and would get overlapped and hidden by the table-header div
+                        zIndex: isTitleAndHeaderSticky ? 3 : undefined,
+                        marginBottom: titleStickyBottom,
+                    } },
+                    createElement("div", Object.assign({}, navLinkAttrs, { className: joinClassNames(generateClassName(options.singleMonthHeaderInnerClass, headerRenderProps), navLinkAttrs.className) }), dateEnv.format(monthStartDate, props.titleFormat))),
+                createElement("div", { className: joinArrayishClassNames(options.tableClass, props.borderlessX && classNames.borderlessX, isTitleAndHeaderSticky && classNames.borderlessTop, props.borderlessBottom && classNames.borderlessBottom, classNames.flexCol), style: {
+                        marginTop: titleStickyBottom != null ? -titleStickyBottom : undefined,
+                    } },
+                    createElement("div", { ref: this.tableHeaderElRef, className: joinClassNames(generateClassName(options.tableHeaderClass, {
+                            isSticky: isTitleAndHeaderSticky,
+                        }), props.borderlessX && classNames.borderlessX, classNames.flexCol, isTitleAndHeaderSticky && classNames.sticky), style: {
+                            zIndex: isTitleAndHeaderSticky ? 2 : undefined,
+                            top: isTitleAndHeaderSticky ? state.titleHeight : 0,
+                            marginBottom: headerStickyBottom,
+                        } },
+                        createElement(DayGridHeaderRow, Object.assign({}, rowConfig, { role: 'row', borderBottom: false, cellIsNarrow: cellIsNarrow, cellIsMicro: cellIsMicro, rowLevel: 0 })),
+                        createElement("div", { className: generateClassName(options.dayHeaderDividerClass, {
+                                isSticky: isTitleAndHeaderSticky,
+                                options: { allDaySlot: Boolean(options.allDaySlot) },
+                            }) })),
+                    createElement("div", { className: joinArrayishClassNames(options.tableBodyClass, classNames.flexCol, isAspectRatio && classNames.rel, props.borderlessX && classNames.borderlessX, isTitleAndHeaderSticky && classNames.borderlessTop, (isTitleAndHeaderSticky || props.noEdgeEffects) && classNames.noEdgeEffects), style: {
+                            zIndex: isTitleAndHeaderSticky ? 1 : undefined,
+                            marginTop: headerStickyBottom != null ? -headerStickyBottom : undefined,
+                            paddingBottom: isAspectRatio ? fracToCssDim(invAspectRatio) : undefined,
+                        } },
+                        createElement(DayGridRows, { dateProfile: props.dateProfile, todayRange: props.todayRange, cellRows: dayTableModel.cellRows, className: isAspectRatio ? classNames.fill : '', forPrint: forPrint && !props.hasLateralSiblings, dayMaxEventRows: (forPrint && props.hasLateralSiblings)
+                                ? 1 // for side-by-side multimonths, limit to one row
+                                : true // otherwise, always do +more link, never expand rows
+                            , 
+                            // content
+                            fgEventSegs: slicedProps.fgEventSegs, bgEventSegs: slicedProps.bgEventSegs, businessHourSegs: slicedProps.businessHourSegs, dateSelectionSegs: slicedProps.dateSelectionSegs, eventDrag: slicedProps.eventDrag, eventResize: slicedProps.eventResize, eventSelection: slicedProps.eventSelection, 
+                            // dimensions
+                            visibleWidth: state.gridWidth, cellIsNarrow: cellIsNarrow, cellIsMicro: cellIsMicro }))))));
+    }
+    componentDidMount() {
+        this.disconnectGridWidth = watchWidth(this.gridElRef.current, (width) => {
+            this.setState({ gridWidth: width });
+        });
+        this.disconnectTitleHeight = watchHeight(this.titleElRef.current, (height) => {
+            this.setState({ titleHeight: height });
+        });
+        this.disconnectTableHeaderHeight = watchHeight(this.tableHeaderElRef.current, (height) => {
+            this.setState({ tableHeaderHeight: height });
+        });
+    }
+    componentWillUnmount() {
+        var _a;
+        const { options } = this.context;
+        this.disconnectGridWidth();
+        this.disconnectTitleHeight();
+        this.disconnectTableHeaderHeight();
+        (_a = options.singleMonthWillUnmount) === null || _a === void 0 ? void 0 : _a.call(options, Object.assign({ el: this.rootEl }, this.renderProps));
+    }
+}
+
+class MultiMonthView extends DateComponent {
+    constructor() {
+        super(...arguments);
+        // memo
+        this.splitDateProfileByMonth = memoize(splitDateProfileByMonth);
+        this.buildMonthFormat = memoize(buildMonthFormat);
+        // ref
+        this.scrollerRef = createRef();
+        this.innerElRef = createRef();
+        this.scrollDate = null;
+        this.handleScrollEnd = (isUser) => {
+            if (isUser) {
+                this.scrollDate = null;
+            }
+        };
+    }
+    render() {
+        const { context, props, state } = this;
+        const { options } = context;
+        const verticalScrolling = !props.forPrint && !getIsHeightAuto(options);
+        const monthDateProfiles = this.splitDateProfileByMonth(context.dateProfileGenerator, props.dateProfile, context.dateEnv, options.fixedWeekCount, options.showNonCurrentDates);
+        const monthTitleFormat = this.buildMonthFormat(options.singleMonthTitleFormat, monthDateProfiles);
+        const { multiMonthMaxColumns, singleMonthMinWidth } = options;
+        const { innerWidth } = state;
+        let cols;
+        let cssMonthWidth;
+        let hasLateralSiblings = false;
+        if (innerWidth != null) {
+            cols = Math.max(1, Math.min(multiMonthMaxColumns, Math.floor(innerWidth / singleMonthMinWidth)));
+            if (props.forPrint) {
+                cols = Math.min(cols, 2);
+            }
+            cssMonthWidth = fracToCssDim(1 / cols);
+            hasLateralSiblings = cols > 1;
+        }
+        return (createElement(NowTimer, { unit: "day" }, (nowDate, todayRange) => (createElement(ViewContainer, { viewSpec: context.viewSpec, className: joinClassNames(
+            // HACK for Safari. Can't do break-inside:avoid with flexbox items, likely b/c it's not standard:
+            // https://stackoverflow.com/a/60256345
+            !props.forPrint && classNames.flexCol, props.className), borderlessX: props.borderlessX, borderlessTop: props.borderlessTop, borderlessBottom: props.borderlessBottom, noEdgeEffects: props.noEdgeEffects },
+            createElement(Scroller, { vertical: verticalScrolling, className: verticalScrolling ? classNames.liquid : '', ref: this.scrollerRef },
+                createElement("div", { role: 'list', "aria-labelledby": props.labelId, "aria-label": props.labelStr, className: classNames.safeTiles, ref: this.innerElRef }, monthDateProfiles.map((monthDateProfile, i) => {
+                    const monthStr = formatIsoMonthStr(monthDateProfile.currentRange.start);
+                    return (createElement(SingleMonth, Object.assign({}, props, { key: monthStr, todayRange: todayRange, isoDateStr: monthStr, titleFormat: monthTitleFormat, dateProfile: monthDateProfile, width: cssMonthWidth, colCount: cols, 
+                        // when single-col, kill X border on all items
+                        borderlessX: cols === 1, 
+                        // when single-col, kill top border on all items
+                        borderlessTop: cols === 1, 
+                        // when single-col, kill bottom border on last item
+                        borderlessBottom: cols === 1 && i === monthDateProfiles.length - 1, hasLateralSiblings: hasLateralSiblings })));
+                })))))));
+    }
+    // Lifecycle
+    // -----------------------------------------------------------------------------------------------
+    componentDidMount() {
+        this.resetScroll();
+        this.scrollerRef.current.addScrollEndListener(this.handleScrollEnd);
+        this.disconnectInnerWidth = watchWidth(this.innerElRef.current, (innerWidth) => {
+            afterSize(() => {
+                this.setState({ innerWidth });
+            });
+        });
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.dateProfile !== this.props.dateProfile && this.context.options.scrollTimeReset) {
+            this.resetScroll();
+        }
+        else {
+            // NOT optimal to update so often
+            // TODO: isolate dependencies of scroll coordinate
+            this.applyScroll();
+        }
+    }
+    componentWillUnmount() {
+        this.scrollerRef.current.removeScrollEndListener(this.handleScrollEnd);
+        this.disconnectInnerWidth();
+    }
+    // Scrolling
+    // -----------------------------------------------------------------------------------------------
+    resetScroll() {
+        this.scrollDate = this.props.dateProfile.currentDate;
+        this.applyScroll();
+    }
+    applyScroll() {
+        if (this.scrollDate != null &&
+            this.state.innerWidth != null // render completed?
+        ) {
+            const scroller = this.scrollerRef.current;
+            const innerEl = this.innerElRef.current;
+            const monthEl = innerEl.querySelector(`[data-date="${formatIsoMonthStr(this.scrollDate)}"]`);
+            const scrollTop = Math.ceil(// for fractions, err on the side of scrolling further
+            monthEl.parentNode.getBoundingClientRect().top -
+                innerEl.getBoundingClientRect().top);
+            scroller.scrollTo({ y: scrollTop });
+        }
+    }
+}
+// date profile
+// -------------------------------------------------------------------------------------------------
+const oneMonthDuration = createDuration(1, 'month');
+function splitDateProfileByMonth(dateProfileGenerator, dateProfile, dateEnv, fixedWeekCount, showNonCurrentDates) {
+    const { start, end } = dateProfile.currentRange;
+    let monthStart = start;
+    const monthDateProfiles = [];
+    while (monthStart.valueOf() < end.valueOf()) {
+        const monthEnd = dateEnv.add(monthStart, oneMonthDuration);
+        const currentRange = {
+            // yuck
+            start: dateProfileGenerator.skipHiddenDays(monthStart),
+            end: dateProfileGenerator.skipHiddenDays(monthEnd, -1, true),
+        };
+        let renderRange = buildDayTableRenderRange({
+            currentRange,
+            snapToWeek: true,
+            fixedWeekCount,
+            dateEnv,
+        });
+        renderRange = {
+            // yuck
+            start: dateProfileGenerator.skipHiddenDays(renderRange.start),
+            end: dateProfileGenerator.skipHiddenDays(renderRange.end, -1, true),
+        };
+        const activeRange = dateProfile.activeRange ?
+            intersectRanges(dateProfile.activeRange, showNonCurrentDates ? renderRange : currentRange) :
+            null;
+        monthDateProfiles.push({
+            currentDate: dateProfile.currentDate,
+            isValid: dateProfile.isValid,
+            validRange: dateProfile.validRange,
+            renderRange,
+            activeRange,
+            currentRange,
+            currentRangeUnit: 'month',
+            isRangeAllDay: true,
+            dateIncrement: dateProfile.dateIncrement,
+            slotMinTime: dateProfile.slotMaxTime,
+            slotMaxTime: dateProfile.slotMinTime,
+        });
+        monthStart = monthEnd;
+    }
+    return monthDateProfiles;
+}
+// date formatting
+// -------------------------------------------------------------------------------------------------
+const YEAR_MONTH_FORMATTER = createFormatter({ year: 'numeric', month: 'long' });
+const YEAR_FORMATTER = createFormatter({ month: 'long' });
+function buildMonthFormat(formatOverride, monthDateProfiles) {
+    return formatOverride ||
+        ((monthDateProfiles[0].currentRange.start.getUTCFullYear() !==
+            monthDateProfiles[monthDateProfiles.length - 1].currentRange.start.getUTCFullYear())
+            ? YEAR_MONTH_FORMATTER
+            : YEAR_FORMATTER);
+}
+
+const OPTION_REFINERS = {
+    multiMonthMaxColumns: Number,
+    singleMonthMinWidth: Number,
+    singleMonthTitleFormat: createFormatter,
+    singleMonthDidMount: identity,
+    singleMonthWillUnmount: identity,
+    singleMonthClass: identity,
+    singleMonthHeaderClass: identity,
+    singleMonthHeaderInnerClass: identity,
+};
+
+var index = createPlugin({
+    name: '@fullcalendar/multimonth',
+    initialView: 'multiMonthYear',
+    optionRefiners: OPTION_REFINERS,
+    views: {
+        multiMonth: {
+            component: MultiMonthView,
+            dateProfileGeneratorClass: TableDateProfileGenerator,
+            multiMonthMaxColumns: 3,
+            singleMonthMinWidth: 350,
+        },
+        multiMonthYear: {
+            type: 'multiMonth',
+            duration: { years: 1 },
+            fixedWeekCount: true,
+            showNonCurrentDates: false, // TODO: looks bad when single-col layout
+        },
+    },
+});
+
+export { index as default };

package/global.js

@@ -0,0 +1,328 @@
+/*!
+FullCalendar Multi-Month Plugin v7.0.0-beta.5
+Docs & License: https://fullcalendar.io/docs/multimonth-grid
+(c) 2025 Adam Shaw
+*/
+FullCalendar.MultiMonth = (function (exports, core, internal$1, internal, classNames, preact) {
+    'use strict';
+
+    function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+    var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+    class SingleMonth extends internal.DateComponent {
+        constructor() {
+            super(...arguments);
+            // memo
+            this.buildDayTableModel = internal.memoize(internal$1.buildDayTableModel);
+            this.createDayHeaderFormatter = internal.memoize(internal$1.createDayHeaderFormatter);
+            this.buildDateRowConfig = internal.memoize(internal$1.buildDateRowConfig);
+            // ref
+            this.gridElRef = preact.createRef();
+            this.titleElRef = preact.createRef();
+            this.tableHeaderElRef = preact.createRef();
+            // internal
+            this.slicer = new internal$1.DayTableSlicer();
+            this.titleId = internal.getUniqueDomId();
+            this.handleEl = (el) => {
+                var _a;
+                const { options } = this.context;
+                if (el) {
+                    this.rootEl = el;
+                    (_a = options.singleMonthDidMount) === null || _a === void 0 ? void 0 : _a.call(options, Object.assign({ el: this.rootEl }, this.renderProps));
+                }
+            };
+        }
+        render() {
+            const { props, state, context } = this;
+            const { dateProfile, forPrint } = props;
+            const { options, dateEnv } = context;
+            const dayTableModel = this.buildDayTableModel(dateProfile, context.dateProfileGenerator, dateEnv);
+            const slicedProps = this.slicer.sliceProps(props, dateProfile, options.nextDayThreshold, context, dayTableModel);
+            const dayHeaderFormat = this.createDayHeaderFormatter(options.dayHeaderFormat, false, // datesRepDistinctDays
+            dayTableModel.colCount);
+            const rowConfig = this.buildDateRowConfig(dayTableModel.headerDates, false, // datesRepDistinctDays
+            dateProfile, props.todayRange, dayHeaderFormat, context);
+            const isTitleAndHeaderSticky = !forPrint && props.colCount === 1;
+            const isAspectRatio = !forPrint || props.hasLateralSiblings;
+            const invAspectRatio = 1 / options.aspectRatio;
+            const cellColCnt = dayTableModel.cellRows[0].length;
+            const colWidth = state.gridWidth != null ? state.gridWidth / cellColCnt : undefined;
+            const cellIsMicro = colWidth != null && colWidth <= internal$1.dayMicroWidth;
+            const cellIsNarrow = cellIsMicro || (colWidth != null && colWidth <= options.dayNarrowWidth);
+            const rowHeightGuess = state.gridWidth != null
+                ? invAspectRatio * state.gridWidth / 6
+                : undefined;
+            const headerStickyBottom = isTitleAndHeaderSticky
+                ? rowHeightGuess
+                : undefined;
+            const titleStickyBottom = isTitleAndHeaderSticky && rowHeightGuess != null && state.tableHeaderHeight != null
+                ? rowHeightGuess + state.tableHeaderHeight + 1
+                : undefined;
+            const hasNavLink = options.navLinks && props.colCount > 1;
+            const headerRenderProps = {
+                colCount: props.colCount,
+                isSticky: isTitleAndHeaderSticky,
+                isNarrow: cellIsNarrow,
+                hasNavLink,
+            };
+            const monthStartDate = props.dateProfile.currentRange.start;
+            const navLinkAttrs = hasNavLink
+                ? internal.buildNavLinkAttrs(context, monthStartDate, 'month', props.isoDateStr)
+                : {};
+            return (preact.createElement("div", { role: 'listitem', style: { width: props.width } },
+                preact.createElement("div", { ref: this.gridElRef, role: 'grid', "aria-labelledby": this.titleId, "data-date": props.isoDateStr, className: core.joinClassNames(internal.generateClassName(options.singleMonthClass, {
+                        colCount: props.colCount || 0,
+                    }), props.borderlessX && classNames__default["default"].borderlessX, props.borderlessTop && classNames__default["default"].borderlessTop, props.borderlessBottom && classNames__default["default"].borderlessBottom, props.colCount === 1 && classNames__default["default"].noMargin, classNames__default["default"].flexCol, props.hasLateralSiblings && classNames__default["default"].breakInsideAvoid) },
+                    preact.createElement("div", { id: this.titleId, ref: this.titleElRef, className: core.joinClassNames(internal.generateClassName(options.singleMonthHeaderClass, headerRenderProps), isTitleAndHeaderSticky && classNames__default["default"].stickyT, classNames__default["default"].flexCol), style: {
+                            // HACK to keep zIndex above table-header,
+                            // because in Chrome, something about position:sticky on this title div
+                            // causes its bottom border to no be considered part of its mass,
+                            // and would get overlapped and hidden by the table-header div
+                            zIndex: isTitleAndHeaderSticky ? 3 : undefined,
+                            marginBottom: titleStickyBottom,
+                        } },
+                        preact.createElement("div", Object.assign({}, navLinkAttrs, { className: core.joinClassNames(internal.generateClassName(options.singleMonthHeaderInnerClass, headerRenderProps), navLinkAttrs.className) }), dateEnv.format(monthStartDate, props.titleFormat))),
+                    preact.createElement("div", { className: internal.joinArrayishClassNames(options.tableClass, props.borderlessX && classNames__default["default"].borderlessX, isTitleAndHeaderSticky && classNames__default["default"].borderlessTop, props.borderlessBottom && classNames__default["default"].borderlessBottom, classNames__default["default"].flexCol), style: {
+                            marginTop: titleStickyBottom != null ? -titleStickyBottom : undefined,
+                        } },
+                        preact.createElement("div", { ref: this.tableHeaderElRef, className: core.joinClassNames(internal.generateClassName(options.tableHeaderClass, {
+                                isSticky: isTitleAndHeaderSticky,
+                            }), props.borderlessX && classNames__default["default"].borderlessX, classNames__default["default"].flexCol, isTitleAndHeaderSticky && classNames__default["default"].sticky), style: {
+                                zIndex: isTitleAndHeaderSticky ? 2 : undefined,
+                                top: isTitleAndHeaderSticky ? state.titleHeight : 0,
+                                marginBottom: headerStickyBottom,
+                            } },
+                            preact.createElement(internal$1.DayGridHeaderRow, Object.assign({}, rowConfig, { role: 'row', borderBottom: false, cellIsNarrow: cellIsNarrow, cellIsMicro: cellIsMicro, rowLevel: 0 })),
+                            preact.createElement("div", { className: internal.generateClassName(options.dayHeaderDividerClass, {
+                                    isSticky: isTitleAndHeaderSticky,
+                                    options: { allDaySlot: Boolean(options.allDaySlot) },
+                                }) })),
+                        preact.createElement("div", { className: internal.joinArrayishClassNames(options.tableBodyClass, classNames__default["default"].flexCol, isAspectRatio && classNames__default["default"].rel, props.borderlessX && classNames__default["default"].borderlessX, isTitleAndHeaderSticky && classNames__default["default"].borderlessTop, (isTitleAndHeaderSticky || props.noEdgeEffects) && classNames__default["default"].noEdgeEffects), style: {
+                                zIndex: isTitleAndHeaderSticky ? 1 : undefined,
+                                marginTop: headerStickyBottom != null ? -headerStickyBottom : undefined,
+                                paddingBottom: isAspectRatio ? internal.fracToCssDim(invAspectRatio) : undefined,
+                            } },
+                            preact.createElement(internal$1.DayGridRows, { dateProfile: props.dateProfile, todayRange: props.todayRange, cellRows: dayTableModel.cellRows, className: isAspectRatio ? classNames__default["default"].fill : '', forPrint: forPrint && !props.hasLateralSiblings, dayMaxEventRows: (forPrint && props.hasLateralSiblings)
+                                    ? 1 // for side-by-side multimonths, limit to one row
+                                    : true // otherwise, always do +more link, never expand rows
+                                , 
+                                // content
+                                fgEventSegs: slicedProps.fgEventSegs, bgEventSegs: slicedProps.bgEventSegs, businessHourSegs: slicedProps.businessHourSegs, dateSelectionSegs: slicedProps.dateSelectionSegs, eventDrag: slicedProps.eventDrag, eventResize: slicedProps.eventResize, eventSelection: slicedProps.eventSelection, 
+                                // dimensions
+                                visibleWidth: state.gridWidth, cellIsNarrow: cellIsNarrow, cellIsMicro: cellIsMicro }))))));
+        }
+        componentDidMount() {
+            this.disconnectGridWidth = internal.watchWidth(this.gridElRef.current, (width) => {
+                this.setState({ gridWidth: width });
+            });
+            this.disconnectTitleHeight = internal.watchHeight(this.titleElRef.current, (height) => {
+                this.setState({ titleHeight: height });
+            });
+            this.disconnectTableHeaderHeight = internal.watchHeight(this.tableHeaderElRef.current, (height) => {
+                this.setState({ tableHeaderHeight: height });
+            });
+        }
+        componentWillUnmount() {
+            var _a;
+            const { options } = this.context;
+            this.disconnectGridWidth();
+            this.disconnectTitleHeight();
+            this.disconnectTableHeaderHeight();
+            (_a = options.singleMonthWillUnmount) === null || _a === void 0 ? void 0 : _a.call(options, Object.assign({ el: this.rootEl }, this.renderProps));
+        }
+    }
+
+    class MultiMonthView extends internal.DateComponent {
+        constructor() {
+            super(...arguments);
+            // memo
+            this.splitDateProfileByMonth = internal.memoize(splitDateProfileByMonth);
+            this.buildMonthFormat = internal.memoize(buildMonthFormat);
+            // ref
+            this.scrollerRef = preact.createRef();
+            this.innerElRef = preact.createRef();
+            this.scrollDate = null;
+            this.handleScrollEnd = (isUser) => {
+                if (isUser) {
+                    this.scrollDate = null;
+                }
+            };
+        }
+        render() {
+            const { context, props, state } = this;
+            const { options } = context;
+            const verticalScrolling = !props.forPrint && !internal.getIsHeightAuto(options);
+            const monthDateProfiles = this.splitDateProfileByMonth(context.dateProfileGenerator, props.dateProfile, context.dateEnv, options.fixedWeekCount, options.showNonCurrentDates);
+            const monthTitleFormat = this.buildMonthFormat(options.singleMonthTitleFormat, monthDateProfiles);
+            const { multiMonthMaxColumns, singleMonthMinWidth } = options;
+            const { innerWidth } = state;
+            let cols;
+            let cssMonthWidth;
+            let hasLateralSiblings = false;
+            if (innerWidth != null) {
+                cols = Math.max(1, Math.min(multiMonthMaxColumns, Math.floor(innerWidth / singleMonthMinWidth)));
+                if (props.forPrint) {
+                    cols = Math.min(cols, 2);
+                }
+                cssMonthWidth = internal.fracToCssDim(1 / cols);
+                hasLateralSiblings = cols > 1;
+            }
+            return (preact.createElement(internal.NowTimer, { unit: "day" }, (nowDate, todayRange) => (preact.createElement(internal.ViewContainer, { viewSpec: context.viewSpec, className: core.joinClassNames(
+                // HACK for Safari. Can't do break-inside:avoid with flexbox items, likely b/c it's not standard:
+                // https://stackoverflow.com/a/60256345
+                !props.forPrint && classNames__default["default"].flexCol, props.className), borderlessX: props.borderlessX, borderlessTop: props.borderlessTop, borderlessBottom: props.borderlessBottom, noEdgeEffects: props.noEdgeEffects },
+                preact.createElement(internal.Scroller, { vertical: verticalScrolling, className: verticalScrolling ? classNames__default["default"].liquid : '', ref: this.scrollerRef },
+                    preact.createElement("div", { role: 'list', "aria-labelledby": props.labelId, "aria-label": props.labelStr, className: classNames__default["default"].safeTiles, ref: this.innerElRef }, monthDateProfiles.map((monthDateProfile, i) => {
+                        const monthStr = internal.formatIsoMonthStr(monthDateProfile.currentRange.start);
+                        return (preact.createElement(SingleMonth, Object.assign({}, props, { key: monthStr, todayRange: todayRange, isoDateStr: monthStr, titleFormat: monthTitleFormat, dateProfile: monthDateProfile, width: cssMonthWidth, colCount: cols, 
+                            // when single-col, kill X border on all items
+                            borderlessX: cols === 1, 
+                            // when single-col, kill top border on all items
+                            borderlessTop: cols === 1, 
+                            // when single-col, kill bottom border on last item
+                            borderlessBottom: cols === 1 && i === monthDateProfiles.length - 1, hasLateralSiblings: hasLateralSiblings })));
+                    })))))));
+        }
+        // Lifecycle
+        // -----------------------------------------------------------------------------------------------
+        componentDidMount() {
+            this.resetScroll();
+            this.scrollerRef.current.addScrollEndListener(this.handleScrollEnd);
+            this.disconnectInnerWidth = internal.watchWidth(this.innerElRef.current, (innerWidth) => {
+                internal.afterSize(() => {
+                    this.setState({ innerWidth });
+                });
+            });
+        }
+        componentDidUpdate(prevProps) {
+            if (prevProps.dateProfile !== this.props.dateProfile && this.context.options.scrollTimeReset) {
+                this.resetScroll();
+            }
+            else {
+                // NOT optimal to update so often
+                // TODO: isolate dependencies of scroll coordinate
+                this.applyScroll();
+            }
+        }
+        componentWillUnmount() {
+            this.scrollerRef.current.removeScrollEndListener(this.handleScrollEnd);
+            this.disconnectInnerWidth();
+        }
+        // Scrolling
+        // -----------------------------------------------------------------------------------------------
+        resetScroll() {
+            this.scrollDate = this.props.dateProfile.currentDate;
+            this.applyScroll();
+        }
+        applyScroll() {
+            if (this.scrollDate != null &&
+                this.state.innerWidth != null // render completed?
+            ) {
+                const scroller = this.scrollerRef.current;
+                const innerEl = this.innerElRef.current;
+                const monthEl = innerEl.querySelector(`[data-date="${internal.formatIsoMonthStr(this.scrollDate)}"]`);
+                const scrollTop = Math.ceil(// for fractions, err on the side of scrolling further
+                monthEl.parentNode.getBoundingClientRect().top -
+                    innerEl.getBoundingClientRect().top);
+                scroller.scrollTo({ y: scrollTop });
+            }
+        }
+    }
+    // date profile
+    // -------------------------------------------------------------------------------------------------
+    const oneMonthDuration = internal.createDuration(1, 'month');
+    function splitDateProfileByMonth(dateProfileGenerator, dateProfile, dateEnv, fixedWeekCount, showNonCurrentDates) {
+        const { start, end } = dateProfile.currentRange;
+        let monthStart = start;
+        const monthDateProfiles = [];
+        while (monthStart.valueOf() < end.valueOf()) {
+            const monthEnd = dateEnv.add(monthStart, oneMonthDuration);
+            const currentRange = {
+                // yuck
+                start: dateProfileGenerator.skipHiddenDays(monthStart),
+                end: dateProfileGenerator.skipHiddenDays(monthEnd, -1, true),
+            };
+            let renderRange = internal$1.buildDayTableRenderRange({
+                currentRange,
+                snapToWeek: true,
+                fixedWeekCount,
+                dateEnv,
+            });
+            renderRange = {
+                // yuck
+                start: dateProfileGenerator.skipHiddenDays(renderRange.start),
+                end: dateProfileGenerator.skipHiddenDays(renderRange.end, -1, true),
+            };
+            const activeRange = dateProfile.activeRange ?
+                internal.intersectRanges(dateProfile.activeRange, showNonCurrentDates ? renderRange : currentRange) :
+                null;
+            monthDateProfiles.push({
+                currentDate: dateProfile.currentDate,
+                isValid: dateProfile.isValid,
+                validRange: dateProfile.validRange,
+                renderRange,
+                activeRange,
+                currentRange,
+                currentRangeUnit: 'month',
+                isRangeAllDay: true,
+                dateIncrement: dateProfile.dateIncrement,
+                slotMinTime: dateProfile.slotMaxTime,
+                slotMaxTime: dateProfile.slotMinTime,
+            });
+            monthStart = monthEnd;
+        }
+        return monthDateProfiles;
+    }
+    // date formatting
+    // -------------------------------------------------------------------------------------------------
+    const YEAR_MONTH_FORMATTER = internal.createFormatter({ year: 'numeric', month: 'long' });
+    const YEAR_FORMATTER = internal.createFormatter({ month: 'long' });
+    function buildMonthFormat(formatOverride, monthDateProfiles) {
+        return formatOverride ||
+            ((monthDateProfiles[0].currentRange.start.getUTCFullYear() !==
+                monthDateProfiles[monthDateProfiles.length - 1].currentRange.start.getUTCFullYear())
+                ? YEAR_MONTH_FORMATTER
+                : YEAR_FORMATTER);
+    }
+
+    const OPTION_REFINERS = {
+        multiMonthMaxColumns: Number,
+        singleMonthMinWidth: Number,
+        singleMonthTitleFormat: internal.createFormatter,
+        singleMonthDidMount: internal.identity,
+        singleMonthWillUnmount: internal.identity,
+        singleMonthClass: internal.identity,
+        singleMonthHeaderClass: internal.identity,
+        singleMonthHeaderInnerClass: internal.identity,
+    };
+
+    var plugin = core.createPlugin({
+        name: '@fullcalendar/multimonth',
+        initialView: 'multiMonthYear',
+        optionRefiners: OPTION_REFINERS,
+        views: {
+            multiMonth: {
+                component: MultiMonthView,
+                dateProfileGeneratorClass: internal$1.TableDateProfileGenerator,
+                multiMonthMaxColumns: 3,
+                singleMonthMinWidth: 350,
+            },
+            multiMonthYear: {
+                type: 'multiMonth',
+                duration: { years: 1 },
+                fixedWeekCount: true,
+                showNonCurrentDates: false, // TODO: looks bad when single-col layout
+            },
+        },
+    });
+
+    core.globalPlugins.push(plugin);
+
+    exports["default"] = plugin;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+    return exports;
+
+})({}, FullCalendar, FullCalendar.DayGrid.Internal, FullCalendar.Internal, FullCalendar.InternalClassNames, FullCalendar.Preact);