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

package/LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Adam Shaw
+Copyright (c) 2025 Adam Shaw
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

package/README.md

@@ -18,10 +18,15 @@ Instantiate a Calendar with the necessary plugin:
 ```js
 import { Calendar } from '@fullcalendar/core'
 import multiMonthPlugin from '@fullcalendar/multimonth'
+import classicThemePlugin from '@fullcalendar/theme-classic'
+
+import '@fullcalendar/core/skeleton.css'
+import '@fullcalendar/theme-classic/theme.css'
+import '@fullcalendar/theme-classic/palette.css'
 
 const calendarEl = document.getElementById('calendar')
 const calendar = new Calendar(calendarEl, {
-  plugins: [multiMonthPlugin],
+  plugins: [multiMonthPlugin, classicThemePlugin],
   initialView: 'multiMonthYear',
   events: [
     { title: 'Meeting', start: new Date() }

package/cjs/index.cjs

@@ -0,0 +1,322 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@fullcalendar/core');
+var internal$1 = require('@fullcalendar/daygrid/internal');
+var internal = require('@fullcalendar/core/internal');
+var classNames = require('@fullcalendar/core/internal-classnames');
+var preact = require('@fullcalendar/core/preact');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(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 index = 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
+        },
+    },
+});
+
+exports["default"] = index;

package/esm/index.d.ts

@@ -0,0 +1,41 @@
+import { ClassNameGenerator, PluginDef } from '@fullcalendar/core';
+import '@fullcalendar/daygrid';
+import { MountData, RawOptionsFromRefiners, RefinedOptionsFromRefiners, createFormatter, Identity, DidMountHandler, WillUnmountHandler } from '@fullcalendar/core/internal';
+
+interface SingleMonthData {
+    colCount: number;
+}
+type SingleMonthMountData = MountData<SingleMonthData>;
+interface SingleMonthHeaderData {
+    colCount: number;
+    isSticky: boolean;
+    isNarrow: boolean;
+    hasNavLink: boolean;
+}
+
+declare const OPTION_REFINERS: {
+    multiMonthMaxColumns: NumberConstructor;
+    singleMonthMinWidth: NumberConstructor;
+    singleMonthTitleFormat: typeof createFormatter;
+    singleMonthDidMount: Identity<DidMountHandler<SingleMonthMountData>>;
+    singleMonthWillUnmount: Identity<WillUnmountHandler<SingleMonthMountData>>;
+    singleMonthClass: Identity<ClassNameGenerator<SingleMonthData>>;
+    singleMonthHeaderClass: Identity<ClassNameGenerator<SingleMonthHeaderData>>;
+    singleMonthHeaderInnerClass: Identity<ClassNameGenerator<SingleMonthHeaderData>>;
+};
+type MultiMonthOptionRefiners = typeof OPTION_REFINERS;
+type MultiMonthOptions = RawOptionsFromRefiners<MultiMonthOptionRefiners>;
+type MultiMonthOptionsRefined = RefinedOptionsFromRefiners<MultiMonthOptionRefiners>;
+
+declare module '@fullcalendar/core/internal' {
+    interface BaseOptions extends MultiMonthOptions {
+    }
+    interface BaseOptionsRefined extends MultiMonthOptionsRefined {
+    }
+}
+//# sourceMappingURL=ambient.d.ts.map
+
+declare const _default: PluginDef;
+//# sourceMappingURL=index.d.ts.map
+
+export { MultiMonthOptions, SingleMonthData, SingleMonthHeaderData, SingleMonthMountData, _default as default };