@fullcalendar/multimonth - npm Package Compare versions

Comparing version 6.1.15 to 7.0.0-beta.0

index.global.js

 /*!
-FullCalendar Multi-Month Plugin v6.1.15
+FullCalendar Multi-Month Plugin v7.0.0-beta.0
 Docs & License: https://fullcalendar.io/docs/multimonth-grid
@@ -12,10 +12,9 @@ (c) 2024 Adam Shaw
             super(...arguments);
+            this.slicer = new internal$1.DayTableSlicer();
+            // memo
             this.buildDayTableModel = internal.memoize(internal$1.buildDayTableModel);
-            this.slicer = new internal$1.DayTableSlicer();
-            this.state = {
-                labelId: internal.getUniqueDomId(),
-            };
+            this.createDayHeaderFormatter = internal.memoize(internal$1.createDayHeaderFormatter);
         }
         render() {
-            const { props, state, context } = this;
+            const { props, context } = this;
             const { dateProfile, forPrint } = props;
@@ -26,28 +25,22 @@ const { options } = context;
             // ensure single-month has aspect ratio
-            const tableHeight = props.tableWidth != null ? props.tableWidth / options.aspectRatio : null;
-            const rowCnt = dayTableModel.cells.length;
+            const tableHeight = typeof props.width === 'number'
+                ? props.width / options.aspectRatio
+                : null;
+            const rowCnt = dayTableModel.cellRows.length;
             const rowHeight = tableHeight != null ? tableHeight / rowCnt : null;
-            return (preact.createElement("div", { ref: props.elRef, "data-date": props.isoDateStr, className: "fc-multimonth-month", style: { width: props.width }, role: "grid", "aria-labelledby": state.labelId },
+            const dayHeaderFormat = this.createDayHeaderFormatter(context.options.dayHeaderFormat, false, // datesRepDistinctDays
+            dayTableModel.colCnt);
+            // TODO: tell children if we know dimensions are unstable?
+            return (preact.createElement("div", { "data-date": props.isoDateStr, role: "grid", className: "fc-multimonth-month fc-grow", style: { width: props.width } },
                 preact.createElement("div", { className: "fc-multimonth-header", style: { marginBottom: rowHeight }, role: "presentation" },
-                    preact.createElement("div", { className: "fc-multimonth-title", id: state.labelId }, context.dateEnv.format(props.dateProfile.currentRange.start, props.titleFormat)),
-                    preact.createElement("table", { className: [
-                            'fc-multimonth-header-table',
-                            context.theme.getClass('table'),
-                        ].join(' '), role: "presentation" },
-                        preact.createElement("thead", { role: "rowgroup" },
-                            preact.createElement(internal.DayHeader, { dateProfile: props.dateProfile, dates: dayTableModel.headerDates, datesRepDistinctDays: false })))),
-                preact.createElement("div", { className: [
-                        'fc-multimonth-daygrid',
-                        'fc-daygrid',
-                        'fc-daygrid-body',
-                        !forPrint && 'fc-daygrid-body-balanced',
-                        forPrint && 'fc-daygrid-body-unbalanced',
-                        forPrint && 'fc-daygrid-body-natural',
-                    ].join(' '), style: { marginTop: -rowHeight } },
-                    preact.createElement("table", { className: [
-                            'fc-multimonth-daygrid-table',
-                            context.theme.getClass('table'),
-                        ].join(' '), style: { height: forPrint ? '' : tableHeight }, role: "presentation" },
-                        preact.createElement("tbody", { role: "rowgroup" },
-                            preact.createElement(internal$1.TableRows, Object.assign({}, slicedProps, { dateProfile: dateProfile, cells: dayTableModel.cells, eventSelection: props.eventSelection, dayMaxEvents: !forPrint, dayMaxEventRows: !forPrint, showWeekNumbers: options.weekNumbers, clientWidth: props.clientWidth, clientHeight: props.clientHeight, forPrint: forPrint })))))));
+                    preact.createElement("div", { className: "fc-multimonth-title" }, context.dateEnv.format(props.dateProfile.currentRange.start, props.titleFormat)),
+                    preact.createElement("div", { className: 'fc-multimonth-header-row fc-flex-row' }, dayTableModel.headerDates.map((headerDate) => (preact.createElement(internal$1.DayOfWeekHeaderCell, { key: headerDate.getUTCDay(), dow: headerDate.getUTCDay(), dayHeaderFormat: dayHeaderFormat, colWidth: undefined }))))),
+                preact.createElement("div", { className: 'fc-multimonth-body fc-flex-column', style: {
+                        marginTop: -rowHeight,
+                        height: forPrint ? '' : tableHeight,
+                    } },
+                    preact.createElement(internal$1.DayGridRows // .fc-grow
+                    , { dateProfile: props.dateProfile, todayRange: props.todayRange, cellRows: dayTableModel.cellRows, forPrint: props.forPrint, 
+                        // content
+                        fgEventSegs: slicedProps.fgEventSegs, bgEventSegs: slicedProps.bgEventSegs, businessHourSegs: slicedProps.businessHourSegs, dateSelectionSegs: slicedProps.dateSelectionSegs, eventDrag: slicedProps.eventDrag, eventResize: slicedProps.eventResize, eventSelection: slicedProps.eventSelection }))));
         }
@@ -59,12 +52,41 @@ }
             super(...arguments);
+            // memo
             this.splitDateProfileByMonth = internal.memoize(splitDateProfileByMonth);
             this.buildMonthFormat = internal.memoize(buildMonthFormat);
-            this.scrollElRef = preact.createRef();
-            this.firstMonthElRef = preact.createRef();
-            this.needsScrollReset = false;
-            this.handleSizing = (isForced) => {
-                if (isForced) {
-                    this.updateSize();
+            // ref
+            this.rootElRef = preact.createRef(); // also the scroll container
+            this.innerElRef = preact.createRef();
+            this.handleClientWidth = (clientWidth) => {
+                let { xGap, xPadding } = this.state;
+                // for first time, assume 2 columns and query gap/padding
+                if (xGap == null) {
+                    const innerEl = this.innerElRef.current;
+                    const children = innerEl.childNodes;
+                    if (children.length > 1) {
+                        const box0 = children[0].getBoundingClientRect();
+                        const box1 = children[1].getBoundingClientRect();
+                        let xSpan;
+                        [xGap, xSpan] = [
+                            Math.abs(box0.left - box1.right),
+                            Math.abs(box0.right - box1.left),
+                        ].sort(internal.compareNumbers);
+                        xPadding = clientWidth - xSpan;
+                    }
                 }
+                this.setState({ clientWidth, xGap, xPadding });
             };
+            this.timeScrollResponder = new internal.ScrollResponder((_time) => {
+                // HACK to scroll to day
+                if (this.state.clientWidth != null) {
+                    const { currentDate } = this.props.dateProfile;
+                    const rootEl = this.rootElRef.current;
+                    const innerEl = this.innerElRef.current;
+                    const monthEl = innerEl.querySelector(`[data-date="${internal.formatIsoMonthStr(currentDate)}"]`);
+                    rootEl.scrollTop = Math.ceil(// for fractions, err on the side of scrolling further
+                    monthEl.getBoundingClientRect().top -
+                        innerEl.getBoundingClientRect().top);
+                    return true;
+                }
+                return false;
+            });
         }
@@ -74,88 +96,49 @@ render() {
             const { options } = context;
-            const { clientWidth, clientHeight } = state;
-            const monthHPadding = state.monthHPadding || 0;
-            const colCount = Math.min(clientWidth != null ?
-                Math.floor(clientWidth / (options.multiMonthMinWidth + monthHPadding)) :
-                1, options.multiMonthMaxColumns) || 1;
-            const monthWidthPct = (100 / colCount) + '%';
-            const monthTableWidth = clientWidth == null ? null :
-                (clientWidth / colCount) - monthHPadding;
-            const isLegitSingleCol = clientWidth != null && colCount === 1;
-            const monthDateProfiles = this.splitDateProfileByMonth(context.dateProfileGenerator, props.dateProfile, context.dateEnv, isLegitSingleCol ? false : options.fixedWeekCount, options.showNonCurrentDates);
+            const colCount = state.clientWidth == null
+                ? 2
+                : Math.min(options.multiMonthMaxColumns, Math.floor((state.clientWidth - state.xPadding + state.xGap) /
+                    (options.multiMonthMinWidth + state.xGap)));
+            const monthWidth = state.clientWidth == null
+                ? '34%' // will expand. now small enough to be 1/3. for allowing gap
+                : Math.floor(// exact values can cause expansion to other rows
+                (state.clientWidth - state.xPadding - (state.xGap * (colCount - 1))) /
+                    colCount);
+            const monthDateProfiles = this.splitDateProfileByMonth(context.dateProfileGenerator, props.dateProfile, context.dateEnv, options.fixedWeekCount, options.showNonCurrentDates);
             const monthTitleFormat = this.buildMonthFormat(options.multiMonthTitleFormat, monthDateProfiles);
             const rootClassNames = [
-                'fc-multimonth',
-                isLegitSingleCol ?
+                'fc-multimonth-view',
+                (colCount === 1) ?
                     'fc-multimonth-singlecol' :
                     'fc-multimonth-multicol',
-                (monthTableWidth != null && monthTableWidth < 400) ?
-                    'fc-multimonth-compact' :
-                    '',
-                props.isHeightAuto ?
+                internal.getIsHeightAuto(options) ?
                     '' :
-                    'fc-scroller', // for AutoScroller
+                    'fc-multimonth-scroll',
+                'fc-border', // BAD to mix this with size-listening?
             ];
-            return (preact.createElement(internal.ViewContainer, { elRef: this.scrollElRef, elClasses: rootClassNames, viewSpec: context.viewSpec }, monthDateProfiles.map((monthDateProfile, i) => {
-                const monthStr = internal.formatIsoMonthStr(monthDateProfile.currentRange.start);
-                return (preact.createElement(SingleMonth, Object.assign({}, props, { key: monthStr, isoDateStr: monthStr, elRef: i === 0 ? this.firstMonthElRef : undefined, titleFormat: monthTitleFormat, dateProfile: monthDateProfile, width: monthWidthPct, tableWidth: monthTableWidth, clientWidth: clientWidth, clientHeight: clientHeight })));
-            })));
+            return (preact.createElement(internal.NowTimer, { unit: "day" }, (nowDate, todayRange) => (preact.createElement(internal.ViewContainer, { elRef: this.rootElRef, elClasses: rootClassNames, viewSpec: context.viewSpec },
+                preact.createElement("div", { ref: this.innerElRef, className: 'fc-multimonth-inner' }, 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: monthWidth })));
+                }))))));
         }
         componentDidMount() {
-            this.updateSize();
-            this.context.addResizeHandler(this.handleSizing);
-            this.requestScrollReset();
+            const { context } = this;
+            const { options } = context;
+            this.unwatchWidth = internal.watchWidth(this.rootElRef.current, this.handleClientWidth);
+            context.emitter.on('_timeScrollRequest', this.timeScrollResponder.handleScroll);
+            this.timeScrollResponder.handleScroll(options.scrollTime);
         }
         componentDidUpdate(prevProps) {
-            if (!internal.isPropsEqual(prevProps, this.props)) { // an external change?
-                this.handleSizing(false);
+            const { options } = this.context;
+            if (prevProps.dateProfile !== this.props.dateProfile && options.scrollTimeReset) {
+                this.timeScrollResponder.handleScroll(options.scrollTime);
             }
-            if (prevProps.dateProfile !== this.props.dateProfile) {
-                this.requestScrollReset();
-            }
             else {
-                this.flushScrollReset();
+                this.timeScrollResponder.drain();
             }
         }
         componentWillUnmount() {
-            this.context.removeResizeHandler(this.handleSizing);
+            this.unwatchWidth();
+            this.context.emitter.off('_timeScrollRequest', this.timeScrollResponder.handleScroll);
         }
-        updateSize() {
-            const scrollEl = this.scrollElRef.current;
-            const firstMonthEl = this.firstMonthElRef.current;
-            if (scrollEl) {
-                this.setState({
-                    clientWidth: scrollEl.clientWidth,
-                    clientHeight: scrollEl.clientHeight,
-                });
-            }
-            if (firstMonthEl && scrollEl) {
-                if (this.state.monthHPadding == null) { // always remember initial non-zero value
-                    this.setState({
-                        monthHPadding: scrollEl.clientWidth - // go within padding
-                            firstMonthEl.firstChild.offsetWidth,
-                    });
-                }
-            }
-        }
-        requestScrollReset() {
-            this.needsScrollReset = true;
-            this.flushScrollReset();
-        }
-        flushScrollReset() {
-            if (this.needsScrollReset &&
-                this.state.monthHPadding != null // indicates sizing already happened
-            ) {
-                const { currentDate } = this.props.dateProfile;
-                const scrollEl = this.scrollElRef.current;
-                const monthEl = scrollEl.querySelector(`[data-date="${internal.formatIsoMonthStr(currentDate)}"]`);
-                scrollEl.scrollTop = monthEl.getBoundingClientRect().top -
-                    this.firstMonthElRef.current.getBoundingClientRect().top;
-                this.needsScrollReset = false;
-            }
-        }
-        // workaround for when queued setState render (w/ clientWidth) gets cancelled because
-        // subsequent update and shouldComponentUpdate says not to render :(
-        shouldComponentUpdate() {
-            return true;
-        }
     }
@@ -225,3 +208,3 @@ // date profile
 
-    var css_248z = ".fc .fc-multimonth{border:1px solid var(--fc-border-color);display:flex;flex-wrap:wrap;overflow-x:hidden;overflow-y:auto}.fc .fc-multimonth-title{font-size:1.2em;font-weight:700;padding:1em 0;text-align:center}.fc .fc-multimonth-daygrid{background:var(--fc-page-bg-color)}.fc .fc-multimonth-daygrid-table,.fc .fc-multimonth-header-table{table-layout:fixed;width:100%}.fc .fc-multimonth-daygrid-table{border-top-style:hidden!important}.fc .fc-multimonth-singlecol .fc-multimonth{position:relative}.fc .fc-multimonth-singlecol .fc-multimonth-header{background:var(--fc-page-bg-color);position:relative;top:0;z-index:2}.fc .fc-multimonth-singlecol .fc-multimonth-daygrid{position:relative;z-index:1}.fc .fc-multimonth-singlecol .fc-multimonth-daygrid-table,.fc .fc-multimonth-singlecol .fc-multimonth-header-table{border-left-style:hidden;border-right-style:hidden}.fc .fc-multimonth-singlecol .fc-multimonth-month:last-child .fc-multimonth-daygrid-table{border-bottom-style:hidden}.fc .fc-multimonth-multicol{line-height:1}.fc .fc-multimonth-multicol .fc-multimonth-month{padding:0 1.2em 1.2em}.fc .fc-multimonth-multicol .fc-daygrid-more-link{border:1px solid var(--fc-event-border-color);display:block;float:none;padding:1px}.fc .fc-multimonth-compact{line-height:1}.fc .fc-multimonth-compact .fc-multimonth-daygrid-table,.fc .fc-multimonth-compact .fc-multimonth-header-table{font-size:.9em}.fc-media-screen .fc-multimonth-singlecol .fc-multimonth-header{position:sticky}.fc-media-print .fc-multimonth{overflow:visible}";
+    var css_248z = ".fc-multimonth-scroll{overflow-x:hidden;overflow-y:scroll}.fc-multimonth-inner{display:flex;flex-wrap:wrap}.fc-multimonth-multicol .fc-multimonth-month{margin:0 1.2em 1.2em}.fc-multimonth-multicol .fc-multimonth-title{padding:1em 0}.fc-multimonth-singlecol .fc-multimonth-title{padding:.5em 0}.fc-multimonth-title{font-size:1.2em;font-weight:700;text-align:center}.fc-multimonth-header-row{border-top:1px solid var(--fc-border-color)}.fc-multimonth-header-row,.fc-multimonth-month{border-bottom:1px solid var(--fc-border-color)}.fc-multimonth-singlecol .fc-multimonth-month:last-child{border-bottom:0}.fc-multimonth-multicol .fc-multimonth-body,.fc-multimonth-multicol .fc-multimonth-header-row{border-left:1px solid var(--fc-border-color);border-right:1px solid var(--fc-border-color);font-size:.9em;line-height:1}.fc-media-screen .fc-multimonth-singlecol .fc-multimonth-header{background:var(--fc-page-bg-color);position:sticky;top:0;z-index:2}.fc-media-screen .fc-multimonth-singlecol .fc-multimonth-body{position:relative;z-index:1}";
     internal.injectStyles(css_248z);
@@ -228,0 +211,0 @@

index.global.min.js

 /*!
-FullCalendar Multi-Month Plugin v6.1.15
+FullCalendar Multi-Month Plugin v7.0.0-beta.0
 Docs & License: https://fullcalendar.io/docs/multimonth-grid
 (c) 2024 Adam Shaw
 */
-FullCalendar.MultiMonth=function(t,e,l,i,n){"use strict";class o extends i.DateComponent{constructor(){super(...arguments),this.buildDayTableModel=i.memoize(l.buildDayTableModel),this.slicer=new l.DayTableSlicer,this.state={labelId:i.getUniqueDomId()}}render(){const{props:t,state:e,context:o}=this,{dateProfile:a,forPrint:r}=t,{options:s}=o,c=this.buildDayTableModel(a,o.dateProfileGenerator),d=this.slicer.sliceProps(t,a,s.nextDayThreshold,o,c),m=null!=t.tableWidth?t.tableWidth/s.aspectRatio:null,h=c.cells.length,u=null!=m?m/h:null;return n.createElement("div",{ref:t.elRef,"data-date":t.isoDateStr,className:"fc-multimonth-month",style:{width:t.width},role:"grid","aria-labelledby":e.labelId},n.createElement("div",{className:"fc-multimonth-header",style:{marginBottom:u},role:"presentation"},n.createElement("div",{className:"fc-multimonth-title",id:e.labelId},o.dateEnv.format(t.dateProfile.currentRange.start,t.titleFormat)),n.createElement("table",{className:["fc-multimonth-header-table",o.theme.getClass("table")].join(" "),role:"presentation"},n.createElement("thead",{role:"rowgroup"},n.createElement(i.DayHeader,{dateProfile:t.dateProfile,dates:c.headerDates,datesRepDistinctDays:!1})))),n.createElement("div",{className:["fc-multimonth-daygrid","fc-daygrid","fc-daygrid-body",!r&&"fc-daygrid-body-balanced",r&&"fc-daygrid-body-unbalanced",r&&"fc-daygrid-body-natural"].join(" "),style:{marginTop:-u}},n.createElement("table",{className:["fc-multimonth-daygrid-table",o.theme.getClass("table")].join(" "),style:{height:r?"":m},role:"presentation"},n.createElement("tbody",{role:"rowgroup"},n.createElement(l.TableRows,Object.assign({},d,{dateProfile:a,cells:c.cells,eventSelection:t.eventSelection,dayMaxEvents:!r,dayMaxEventRows:!r,showWeekNumbers:s.weekNumbers,clientWidth:t.clientWidth,clientHeight:t.clientHeight,forPrint:r}))))))}}class a extends i.DateComponent{constructor(){super(...arguments),this.splitDateProfileByMonth=i.memoize(s),this.buildMonthFormat=i.memoize(m),this.scrollElRef=n.createRef(),this.firstMonthElRef=n.createRef(),this.needsScrollReset=!1,this.handleSizing=t=>{t&&this.updateSize()}}render(){const{context:t,props:e,state:l}=this,{options:a}=t,{clientWidth:r,clientHeight:s}=l,c=l.monthHPadding||0,d=Math.min(null!=r?Math.floor(r/(a.multiMonthMinWidth+c)):1,a.multiMonthMaxColumns)||1,m=100/d+"%",h=null==r?null:r/d-c,u=null!=r&&1===d,f=this.splitDateProfileByMonth(t.dateProfileGenerator,e.dateProfile,t.dateEnv,!u&&a.fixedWeekCount,a.showNonCurrentDates),g=this.buildMonthFormat(a.multiMonthTitleFormat,f),p=["fc-multimonth",u?"fc-multimonth-singlecol":"fc-multimonth-multicol",null!=h&&h<400?"fc-multimonth-compact":"",e.isHeightAuto?"":"fc-scroller"];return n.createElement(i.ViewContainer,{elRef:this.scrollElRef,elClasses:p,viewSpec:t.viewSpec},f.map((t,l)=>{const a=i.formatIsoMonthStr(t.currentRange.start);return n.createElement(o,Object.assign({},e,{key:a,isoDateStr:a,elRef:0===l?this.firstMonthElRef:void 0,titleFormat:g,dateProfile:t,width:m,tableWidth:h,clientWidth:r,clientHeight:s}))}))}componentDidMount(){this.updateSize(),this.context.addResizeHandler(this.handleSizing),this.requestScrollReset()}componentDidUpdate(t){i.isPropsEqual(t,this.props)||this.handleSizing(!1),t.dateProfile!==this.props.dateProfile?this.requestScrollReset():this.flushScrollReset()}componentWillUnmount(){this.context.removeResizeHandler(this.handleSizing)}updateSize(){const t=this.scrollElRef.current,e=this.firstMonthElRef.current;t&&this.setState({clientWidth:t.clientWidth,clientHeight:t.clientHeight}),e&&t&&null==this.state.monthHPadding&&this.setState({monthHPadding:t.clientWidth-e.firstChild.offsetWidth})}requestScrollReset(){this.needsScrollReset=!0,this.flushScrollReset()}flushScrollReset(){if(this.needsScrollReset&&null!=this.state.monthHPadding){const{currentDate:t}=this.props.dateProfile,e=this.scrollElRef.current,l=e.querySelector(`[data-date="${i.formatIsoMonthStr(t)}"]`);e.scrollTop=l.getBoundingClientRect().top-this.firstMonthElRef.current.getBoundingClientRect().top,this.needsScrollReset=!1}}shouldComponentUpdate(){return!0}}const r=i.createDuration(1,"month");function s(t,e,n,o,a){const{start:s,end:c}=e.currentRange;let d=s;const m=[];for(;d.valueOf()<c.valueOf();){const s=n.add(d,r),c={start:t.skipHiddenDays(d),end:t.skipHiddenDays(s,-1,!0)};let h=l.buildDayTableRenderRange({currentRange:c,snapToWeek:!0,fixedWeekCount:o,dateEnv:n});h={start:t.skipHiddenDays(h.start),end:t.skipHiddenDays(h.end,-1,!0)};const u=e.activeRange?i.intersectRanges(e.activeRange,a?h:c):null;m.push({currentDate:e.currentDate,isValid:e.isValid,validRange:e.validRange,renderRange:h,activeRange:u,currentRange:c,currentRangeUnit:"month",isRangeAllDay:!0,dateIncrement:e.dateIncrement,slotMinTime:e.slotMaxTime,slotMaxTime:e.slotMinTime}),d=s}return m}const c=i.createFormatter({year:"numeric",month:"long"}),d=i.createFormatter({month:"long"});function m(t,e){return t||(e[0].currentRange.start.getUTCFullYear()!==e[e.length-1].currentRange.start.getUTCFullYear()?c:d)}const h={multiMonthTitleFormat:i.createFormatter,multiMonthMaxColumns:Number,multiMonthMinWidth:Number};i.injectStyles(".fc .fc-multimonth{border:1px solid var(--fc-border-color);display:flex;flex-wrap:wrap;overflow-x:hidden;overflow-y:auto}.fc .fc-multimonth-title{font-size:1.2em;font-weight:700;padding:1em 0;text-align:center}.fc .fc-multimonth-daygrid{background:var(--fc-page-bg-color)}.fc .fc-multimonth-daygrid-table,.fc .fc-multimonth-header-table{table-layout:fixed;width:100%}.fc .fc-multimonth-daygrid-table{border-top-style:hidden!important}.fc .fc-multimonth-singlecol .fc-multimonth{position:relative}.fc .fc-multimonth-singlecol .fc-multimonth-header{background:var(--fc-page-bg-color);position:relative;top:0;z-index:2}.fc .fc-multimonth-singlecol .fc-multimonth-daygrid{position:relative;z-index:1}.fc .fc-multimonth-singlecol .fc-multimonth-daygrid-table,.fc .fc-multimonth-singlecol .fc-multimonth-header-table{border-left-style:hidden;border-right-style:hidden}.fc .fc-multimonth-singlecol .fc-multimonth-month:last-child .fc-multimonth-daygrid-table{border-bottom-style:hidden}.fc .fc-multimonth-multicol{line-height:1}.fc .fc-multimonth-multicol .fc-multimonth-month{padding:0 1.2em 1.2em}.fc .fc-multimonth-multicol .fc-daygrid-more-link{border:1px solid var(--fc-event-border-color);display:block;float:none;padding:1px}.fc .fc-multimonth-compact{line-height:1}.fc .fc-multimonth-compact .fc-multimonth-daygrid-table,.fc .fc-multimonth-compact .fc-multimonth-header-table{font-size:.9em}.fc-media-screen .fc-multimonth-singlecol .fc-multimonth-header{position:sticky}.fc-media-print .fc-multimonth{overflow:visible}");var u=e.createPlugin({name:"@fullcalendar/multimonth",initialView:"multiMonthYear",optionRefiners:h,views:{multiMonth:{component:a,dateProfileGeneratorClass:l.TableDateProfileGenerator,multiMonthMinWidth:350,multiMonthMaxColumns:3},multiMonthYear:{type:"multiMonth",duration:{years:1},fixedWeekCount:!0,showNonCurrentDates:!1}}});return e.globalPlugins.push(u),t.default=u,Object.defineProperty(t,"__esModule",{value:!0}),t}({},FullCalendar,FullCalendar.DayGrid.Internal,FullCalendar.Internal,FullCalendar.Preact);
+FullCalendar.MultiMonth=function(e,t,n,o,l){"use strict";class i extends o.DateComponent{constructor(){super(...arguments),this.slicer=new n.DayTableSlicer,this.buildDayTableModel=o.memoize(n.buildDayTableModel),this.createDayHeaderFormatter=o.memoize(n.createDayHeaderFormatter)}render(){const{props:e,context:t}=this,{dateProfile:o,forPrint:i}=e,{options:r}=t,a=this.buildDayTableModel(o,t.dateProfileGenerator),s=this.slicer.sliceProps(e,o,r.nextDayThreshold,t,a),c="number"==typeof e.width?e.width/r.aspectRatio:null,m=a.cellRows.length,d=null!=c?c/m:null,h=this.createDayHeaderFormatter(t.options.dayHeaderFormat,!1,a.colCnt);return l.createElement("div",{"data-date":e.isoDateStr,role:"grid",className:"fc-multimonth-month fc-grow",style:{width:e.width}},l.createElement("div",{className:"fc-multimonth-header",style:{marginBottom:d},role:"presentation"},l.createElement("div",{className:"fc-multimonth-title"},t.dateEnv.format(e.dateProfile.currentRange.start,e.titleFormat)),l.createElement("div",{className:"fc-multimonth-header-row fc-flex-row"},a.headerDates.map(e=>l.createElement(n.DayOfWeekHeaderCell,{key:e.getUTCDay(),dow:e.getUTCDay(),dayHeaderFormat:h,colWidth:void 0})))),l.createElement("div",{className:"fc-multimonth-body fc-flex-column",style:{marginTop:-d,height:i?"":c}},l.createElement(n.DayGridRows,{dateProfile:e.dateProfile,todayRange:e.todayRange,cellRows:a.cellRows,forPrint:e.forPrint,fgEventSegs:s.fgEventSegs,bgEventSegs:s.bgEventSegs,businessHourSegs:s.businessHourSegs,dateSelectionSegs:s.dateSelectionSegs,eventDrag:s.eventDrag,eventResize:s.eventResize,eventSelection:s.eventSelection})))}}class r extends o.DateComponent{constructor(){super(...arguments),this.splitDateProfileByMonth=o.memoize(s),this.buildMonthFormat=o.memoize(d),this.rootElRef=l.createRef(),this.innerElRef=l.createRef(),this.handleClientWidth=e=>{let{xGap:t,xPadding:n}=this.state;if(null==t){const l=this.innerElRef.current.childNodes;if(l.length>1){const i=l[0].getBoundingClientRect(),r=l[1].getBoundingClientRect();let a;[t,a]=[Math.abs(i.left-r.right),Math.abs(i.right-r.left)].sort(o.compareNumbers),n=e-a}}this.setState({clientWidth:e,xGap:t,xPadding:n})},this.timeScrollResponder=new o.ScrollResponder(e=>{if(null!=this.state.clientWidth){const{currentDate:e}=this.props.dateProfile,t=this.rootElRef.current,n=this.innerElRef.current,l=n.querySelector(`[data-date="${o.formatIsoMonthStr(e)}"]`);return t.scrollTop=Math.ceil(l.getBoundingClientRect().top-n.getBoundingClientRect().top),!0}return!1})}render(){const{context:e,props:t,state:n}=this,{options:r}=e,a=null==n.clientWidth?2:Math.min(r.multiMonthMaxColumns,Math.floor((n.clientWidth-n.xPadding+n.xGap)/(r.multiMonthMinWidth+n.xGap))),s=null==n.clientWidth?"34%":Math.floor((n.clientWidth-n.xPadding-n.xGap*(a-1))/a),c=this.splitDateProfileByMonth(e.dateProfileGenerator,t.dateProfile,e.dateEnv,r.fixedWeekCount,r.showNonCurrentDates),m=this.buildMonthFormat(r.multiMonthTitleFormat,c),d=["fc-multimonth-view",1===a?"fc-multimonth-singlecol":"fc-multimonth-multicol",o.getIsHeightAuto(r)?"":"fc-multimonth-scroll","fc-border"];return l.createElement(o.NowTimer,{unit:"day"},(n,r)=>l.createElement(o.ViewContainer,{elRef:this.rootElRef,elClasses:d,viewSpec:e.viewSpec},l.createElement("div",{ref:this.innerElRef,className:"fc-multimonth-inner"},c.map((e,n)=>{const a=o.formatIsoMonthStr(e.currentRange.start);return l.createElement(i,Object.assign({},t,{key:a,todayRange:r,isoDateStr:a,titleFormat:m,dateProfile:e,width:s}))}))))}componentDidMount(){const{context:e}=this,{options:t}=e;this.unwatchWidth=o.watchWidth(this.rootElRef.current,this.handleClientWidth),e.emitter.on("_timeScrollRequest",this.timeScrollResponder.handleScroll),this.timeScrollResponder.handleScroll(t.scrollTime)}componentDidUpdate(e){const{options:t}=this.context;e.dateProfile!==this.props.dateProfile&&t.scrollTimeReset?this.timeScrollResponder.handleScroll(t.scrollTime):this.timeScrollResponder.drain()}componentWillUnmount(){this.unwatchWidth(),this.context.emitter.off("_timeScrollRequest",this.timeScrollResponder.handleScroll)}}const a=o.createDuration(1,"month");function s(e,t,l,i,r){const{start:s,end:c}=t.currentRange;let m=s;const d=[];for(;m.valueOf()<c.valueOf();){const s=l.add(m,a),c={start:e.skipHiddenDays(m),end:e.skipHiddenDays(s,-1,!0)};let h=n.buildDayTableRenderRange({currentRange:c,snapToWeek:!0,fixedWeekCount:i,dateEnv:l});h={start:e.skipHiddenDays(h.start),end:e.skipHiddenDays(h.end,-1,!0)};const u=t.activeRange?o.intersectRanges(t.activeRange,r?h:c):null;d.push({currentDate:t.currentDate,isValid:t.isValid,validRange:t.validRange,renderRange:h,activeRange:u,currentRange:c,currentRangeUnit:"month",isRangeAllDay:!0,dateIncrement:t.dateIncrement,slotMinTime:t.slotMaxTime,slotMaxTime:t.slotMinTime}),m=s}return d}const c=o.createFormatter({year:"numeric",month:"long"}),m=o.createFormatter({month:"long"});function d(e,t){return e||(t[0].currentRange.start.getUTCFullYear()!==t[t.length-1].currentRange.start.getUTCFullYear()?c:m)}const h={multiMonthTitleFormat:o.createFormatter,multiMonthMaxColumns:Number,multiMonthMinWidth:Number};o.injectStyles(".fc-multimonth-scroll{overflow-x:hidden;overflow-y:scroll}.fc-multimonth-inner{display:flex;flex-wrap:wrap}.fc-multimonth-multicol .fc-multimonth-month{margin:0 1.2em 1.2em}.fc-multimonth-multicol .fc-multimonth-title{padding:1em 0}.fc-multimonth-singlecol .fc-multimonth-title{padding:.5em 0}.fc-multimonth-title{font-size:1.2em;font-weight:700;text-align:center}.fc-multimonth-header-row{border-top:1px solid var(--fc-border-color)}.fc-multimonth-header-row,.fc-multimonth-month{border-bottom:1px solid var(--fc-border-color)}.fc-multimonth-singlecol .fc-multimonth-month:last-child{border-bottom:0}.fc-multimonth-multicol .fc-multimonth-body,.fc-multimonth-multicol .fc-multimonth-header-row{border-left:1px solid var(--fc-border-color);border-right:1px solid var(--fc-border-color);font-size:.9em;line-height:1}.fc-media-screen .fc-multimonth-singlecol .fc-multimonth-header{background:var(--fc-page-bg-color);position:sticky;top:0;z-index:2}.fc-media-screen .fc-multimonth-singlecol .fc-multimonth-body{position:relative;z-index:1}");var u=t.createPlugin({name:"@fullcalendar/multimonth",initialView:"multiMonthYear",optionRefiners:h,views:{multiMonth:{component:r,dateProfileGeneratorClass:n.TableDateProfileGenerator,multiMonthMinWidth:350,multiMonthMaxColumns:3},multiMonthYear:{type:"multiMonth",duration:{years:1},fixedWeekCount:!0,showNonCurrentDates:!1}}});return t.globalPlugins.push(u),e.default=u,Object.defineProperty(e,"__esModule",{value:!0}),e}({},FullCalendar,FullCalendar.DayGrid.Internal,FullCalendar.Internal,FullCalendar.Preact);

index.js

 import { createPlugin } from '@fullcalendar/core/index.js';
-import { buildDayTableModel, DayTableSlicer, TableRows, buildDayTableRenderRange, TableDateProfileGenerator } from '@fullcalendar/daygrid/internal.js';
-import { DateComponent, memoize, getUniqueDomId, DayHeader, ViewContainer, formatIsoMonthStr, isPropsEqual, createDuration, intersectRanges, createFormatter, injectStyles } from '@fullcalendar/core/internal.js';
+import { DayTableSlicer, buildDayTableModel, createDayHeaderFormatter, DayOfWeekHeaderCell, DayGridRows, buildDayTableRenderRange, TableDateProfileGenerator } from '@fullcalendar/daygrid/internal.js';
+import { DateComponent, memoize, compareNumbers, ScrollResponder, formatIsoMonthStr, getIsHeightAuto, NowTimer, ViewContainer, watchWidth, createDuration, intersectRanges, createFormatter, injectStyles } from '@fullcalendar/core/internal.js';
 import { createElement, createRef } from '@fullcalendar/core/preact.js';
@@ -9,10 +9,9 @@
         super(...arguments);
+        this.slicer = new DayTableSlicer();
+        // memo
         this.buildDayTableModel = memoize(buildDayTableModel);
-        this.slicer = new DayTableSlicer();
-        this.state = {
-            labelId: getUniqueDomId(),
-        };
+        this.createDayHeaderFormatter = memoize(createDayHeaderFormatter);
     }
     render() {
-        const { props, state, context } = this;
+        const { props, context } = this;
         const { dateProfile, forPrint } = props;
@@ -23,28 +22,22 @@ const { options } = context;
         // ensure single-month has aspect ratio
-        const tableHeight = props.tableWidth != null ? props.tableWidth / options.aspectRatio : null;
-        const rowCnt = dayTableModel.cells.length;
+        const tableHeight = typeof props.width === 'number'
+            ? props.width / options.aspectRatio
+            : null;
+        const rowCnt = dayTableModel.cellRows.length;
         const rowHeight = tableHeight != null ? tableHeight / rowCnt : null;
-        return (createElement("div", { ref: props.elRef, "data-date": props.isoDateStr, className: "fc-multimonth-month", style: { width: props.width }, role: "grid", "aria-labelledby": state.labelId },
+        const dayHeaderFormat = this.createDayHeaderFormatter(context.options.dayHeaderFormat, false, // datesRepDistinctDays
+        dayTableModel.colCnt);
+        // TODO: tell children if we know dimensions are unstable?
+        return (createElement("div", { "data-date": props.isoDateStr, role: "grid", className: "fc-multimonth-month fc-grow", style: { width: props.width } },
             createElement("div", { className: "fc-multimonth-header", style: { marginBottom: rowHeight }, role: "presentation" },
-                createElement("div", { className: "fc-multimonth-title", id: state.labelId }, context.dateEnv.format(props.dateProfile.currentRange.start, props.titleFormat)),
-                createElement("table", { className: [
-                        'fc-multimonth-header-table',
-                        context.theme.getClass('table'),
-                    ].join(' '), role: "presentation" },
-                    createElement("thead", { role: "rowgroup" },
-                        createElement(DayHeader, { dateProfile: props.dateProfile, dates: dayTableModel.headerDates, datesRepDistinctDays: false })))),
-            createElement("div", { className: [
-                    'fc-multimonth-daygrid',
-                    'fc-daygrid',
-                    'fc-daygrid-body',
-                    !forPrint && 'fc-daygrid-body-balanced',
-                    forPrint && 'fc-daygrid-body-unbalanced',
-                    forPrint && 'fc-daygrid-body-natural',
-                ].join(' '), style: { marginTop: -rowHeight } },
-                createElement("table", { className: [
-                        'fc-multimonth-daygrid-table',
-                        context.theme.getClass('table'),
-                    ].join(' '), style: { height: forPrint ? '' : tableHeight }, role: "presentation" },
-                    createElement("tbody", { role: "rowgroup" },
-                        createElement(TableRows, Object.assign({}, slicedProps, { dateProfile: dateProfile, cells: dayTableModel.cells, eventSelection: props.eventSelection, dayMaxEvents: !forPrint, dayMaxEventRows: !forPrint, showWeekNumbers: options.weekNumbers, clientWidth: props.clientWidth, clientHeight: props.clientHeight, forPrint: forPrint })))))));
+                createElement("div", { className: "fc-multimonth-title" }, context.dateEnv.format(props.dateProfile.currentRange.start, props.titleFormat)),
+                createElement("div", { className: 'fc-multimonth-header-row fc-flex-row' }, dayTableModel.headerDates.map((headerDate) => (createElement(DayOfWeekHeaderCell, { key: headerDate.getUTCDay(), dow: headerDate.getUTCDay(), dayHeaderFormat: dayHeaderFormat, colWidth: undefined }))))),
+            createElement("div", { className: 'fc-multimonth-body fc-flex-column', style: {
+                    marginTop: -rowHeight,
+                    height: forPrint ? '' : tableHeight,
+                } },
+                createElement(DayGridRows // .fc-grow
+                , { dateProfile: props.dateProfile, todayRange: props.todayRange, cellRows: dayTableModel.cellRows, forPrint: props.forPrint, 
+                    // content
+                    fgEventSegs: slicedProps.fgEventSegs, bgEventSegs: slicedProps.bgEventSegs, businessHourSegs: slicedProps.businessHourSegs, dateSelectionSegs: slicedProps.dateSelectionSegs, eventDrag: slicedProps.eventDrag, eventResize: slicedProps.eventResize, eventSelection: slicedProps.eventSelection }))));
     }
@@ -56,12 +49,41 @@ }
         super(...arguments);
+        // memo
         this.splitDateProfileByMonth = memoize(splitDateProfileByMonth);
         this.buildMonthFormat = memoize(buildMonthFormat);
-        this.scrollElRef = createRef();
-        this.firstMonthElRef = createRef();
-        this.needsScrollReset = false;
-        this.handleSizing = (isForced) => {
-            if (isForced) {
-                this.updateSize();
+        // ref
+        this.rootElRef = createRef(); // also the scroll container
+        this.innerElRef = createRef();
+        this.handleClientWidth = (clientWidth) => {
+            let { xGap, xPadding } = this.state;
+            // for first time, assume 2 columns and query gap/padding
+            if (xGap == null) {
+                const innerEl = this.innerElRef.current;
+                const children = innerEl.childNodes;
+                if (children.length > 1) {
+                    const box0 = children[0].getBoundingClientRect();
+                    const box1 = children[1].getBoundingClientRect();
+                    let xSpan;
+                    [xGap, xSpan] = [
+                        Math.abs(box0.left - box1.right),
+                        Math.abs(box0.right - box1.left),
+                    ].sort(compareNumbers);
+                    xPadding = clientWidth - xSpan;
+                }
             }
+            this.setState({ clientWidth, xGap, xPadding });
         };
+        this.timeScrollResponder = new ScrollResponder((_time) => {
+            // HACK to scroll to day
+            if (this.state.clientWidth != null) {
+                const { currentDate } = this.props.dateProfile;
+                const rootEl = this.rootElRef.current;
+                const innerEl = this.innerElRef.current;
+                const monthEl = innerEl.querySelector(`[data-date="${formatIsoMonthStr(currentDate)}"]`);
+                rootEl.scrollTop = Math.ceil(// for fractions, err on the side of scrolling further
+                monthEl.getBoundingClientRect().top -
+                    innerEl.getBoundingClientRect().top);
+                return true;
+            }
+            return false;
+        });
     }
@@ -71,88 +93,49 @@ render() {
         const { options } = context;
-        const { clientWidth, clientHeight } = state;
-        const monthHPadding = state.monthHPadding || 0;
-        const colCount = Math.min(clientWidth != null ?
-            Math.floor(clientWidth / (options.multiMonthMinWidth + monthHPadding)) :
-            1, options.multiMonthMaxColumns) || 1;
-        const monthWidthPct = (100 / colCount) + '%';
-        const monthTableWidth = clientWidth == null ? null :
-            (clientWidth / colCount) - monthHPadding;
-        const isLegitSingleCol = clientWidth != null && colCount === 1;
-        const monthDateProfiles = this.splitDateProfileByMonth(context.dateProfileGenerator, props.dateProfile, context.dateEnv, isLegitSingleCol ? false : options.fixedWeekCount, options.showNonCurrentDates);
+        const colCount = state.clientWidth == null
+            ? 2
+            : Math.min(options.multiMonthMaxColumns, Math.floor((state.clientWidth - state.xPadding + state.xGap) /
+                (options.multiMonthMinWidth + state.xGap)));
+        const monthWidth = state.clientWidth == null
+            ? '34%' // will expand. now small enough to be 1/3. for allowing gap
+            : Math.floor(// exact values can cause expansion to other rows
+            (state.clientWidth - state.xPadding - (state.xGap * (colCount - 1))) /
+                colCount);
+        const monthDateProfiles = this.splitDateProfileByMonth(context.dateProfileGenerator, props.dateProfile, context.dateEnv, options.fixedWeekCount, options.showNonCurrentDates);
         const monthTitleFormat = this.buildMonthFormat(options.multiMonthTitleFormat, monthDateProfiles);
         const rootClassNames = [
-            'fc-multimonth',
-            isLegitSingleCol ?
+            'fc-multimonth-view',
+            (colCount === 1) ?
                 'fc-multimonth-singlecol' :
                 'fc-multimonth-multicol',
-            (monthTableWidth != null && monthTableWidth < 400) ?
-                'fc-multimonth-compact' :
-                '',
-            props.isHeightAuto ?
+            getIsHeightAuto(options) ?
                 '' :
-                'fc-scroller', // for AutoScroller
+                'fc-multimonth-scroll',
+            'fc-border', // BAD to mix this with size-listening?
         ];
-        return (createElement(ViewContainer, { elRef: this.scrollElRef, elClasses: rootClassNames, viewSpec: context.viewSpec }, monthDateProfiles.map((monthDateProfile, i) => {
-            const monthStr = formatIsoMonthStr(monthDateProfile.currentRange.start);
-            return (createElement(SingleMonth, Object.assign({}, props, { key: monthStr, isoDateStr: monthStr, elRef: i === 0 ? this.firstMonthElRef : undefined, titleFormat: monthTitleFormat, dateProfile: monthDateProfile, width: monthWidthPct, tableWidth: monthTableWidth, clientWidth: clientWidth, clientHeight: clientHeight })));
-        })));
+        return (createElement(NowTimer, { unit: "day" }, (nowDate, todayRange) => (createElement(ViewContainer, { elRef: this.rootElRef, elClasses: rootClassNames, viewSpec: context.viewSpec },
+            createElement("div", { ref: this.innerElRef, className: 'fc-multimonth-inner' }, 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: monthWidth })));
+            }))))));
     }
     componentDidMount() {
-        this.updateSize();
-        this.context.addResizeHandler(this.handleSizing);
-        this.requestScrollReset();
+        const { context } = this;
+        const { options } = context;
+        this.unwatchWidth = watchWidth(this.rootElRef.current, this.handleClientWidth);
+        context.emitter.on('_timeScrollRequest', this.timeScrollResponder.handleScroll);
+        this.timeScrollResponder.handleScroll(options.scrollTime);
     }
     componentDidUpdate(prevProps) {
-        if (!isPropsEqual(prevProps, this.props)) { // an external change?
-            this.handleSizing(false);
+        const { options } = this.context;
+        if (prevProps.dateProfile !== this.props.dateProfile && options.scrollTimeReset) {
+            this.timeScrollResponder.handleScroll(options.scrollTime);
         }
-        if (prevProps.dateProfile !== this.props.dateProfile) {
-            this.requestScrollReset();
-        }
         else {
-            this.flushScrollReset();
+            this.timeScrollResponder.drain();
         }
     }
     componentWillUnmount() {
-        this.context.removeResizeHandler(this.handleSizing);
+        this.unwatchWidth();
+        this.context.emitter.off('_timeScrollRequest', this.timeScrollResponder.handleScroll);
     }
-    updateSize() {
-        const scrollEl = this.scrollElRef.current;
-        const firstMonthEl = this.firstMonthElRef.current;
-        if (scrollEl) {
-            this.setState({
-                clientWidth: scrollEl.clientWidth,
-                clientHeight: scrollEl.clientHeight,
-            });
-        }
-        if (firstMonthEl && scrollEl) {
-            if (this.state.monthHPadding == null) { // always remember initial non-zero value
-                this.setState({
-                    monthHPadding: scrollEl.clientWidth - // go within padding
-                        firstMonthEl.firstChild.offsetWidth,
-                });
-            }
-        }
-    }
-    requestScrollReset() {
-        this.needsScrollReset = true;
-        this.flushScrollReset();
-    }
-    flushScrollReset() {
-        if (this.needsScrollReset &&
-            this.state.monthHPadding != null // indicates sizing already happened
-        ) {
-            const { currentDate } = this.props.dateProfile;
-            const scrollEl = this.scrollElRef.current;
-            const monthEl = scrollEl.querySelector(`[data-date="${formatIsoMonthStr(currentDate)}"]`);
-            scrollEl.scrollTop = monthEl.getBoundingClientRect().top -
-                this.firstMonthElRef.current.getBoundingClientRect().top;
-            this.needsScrollReset = false;
-        }
-    }
-    // workaround for when queued setState render (w/ clientWidth) gets cancelled because
-    // subsequent update and shouldComponentUpdate says not to render :(
-    shouldComponentUpdate() {
-        return true;
-    }
 }
@@ -222,3 +205,3 @@ // date profile
 
-var css_248z = ".fc .fc-multimonth{border:1px solid var(--fc-border-color);display:flex;flex-wrap:wrap;overflow-x:hidden;overflow-y:auto}.fc .fc-multimonth-title{font-size:1.2em;font-weight:700;padding:1em 0;text-align:center}.fc .fc-multimonth-daygrid{background:var(--fc-page-bg-color)}.fc .fc-multimonth-daygrid-table,.fc .fc-multimonth-header-table{table-layout:fixed;width:100%}.fc .fc-multimonth-daygrid-table{border-top-style:hidden!important}.fc .fc-multimonth-singlecol .fc-multimonth{position:relative}.fc .fc-multimonth-singlecol .fc-multimonth-header{background:var(--fc-page-bg-color);position:relative;top:0;z-index:2}.fc .fc-multimonth-singlecol .fc-multimonth-daygrid{position:relative;z-index:1}.fc .fc-multimonth-singlecol .fc-multimonth-daygrid-table,.fc .fc-multimonth-singlecol .fc-multimonth-header-table{border-left-style:hidden;border-right-style:hidden}.fc .fc-multimonth-singlecol .fc-multimonth-month:last-child .fc-multimonth-daygrid-table{border-bottom-style:hidden}.fc .fc-multimonth-multicol{line-height:1}.fc .fc-multimonth-multicol .fc-multimonth-month{padding:0 1.2em 1.2em}.fc .fc-multimonth-multicol .fc-daygrid-more-link{border:1px solid var(--fc-event-border-color);display:block;float:none;padding:1px}.fc .fc-multimonth-compact{line-height:1}.fc .fc-multimonth-compact .fc-multimonth-daygrid-table,.fc .fc-multimonth-compact .fc-multimonth-header-table{font-size:.9em}.fc-media-screen .fc-multimonth-singlecol .fc-multimonth-header{position:sticky}.fc-media-print .fc-multimonth{overflow:visible}";
+var css_248z = ".fc-multimonth-scroll{overflow-x:hidden;overflow-y:scroll}.fc-multimonth-inner{display:flex;flex-wrap:wrap}.fc-multimonth-multicol .fc-multimonth-month{margin:0 1.2em 1.2em}.fc-multimonth-multicol .fc-multimonth-title{padding:1em 0}.fc-multimonth-singlecol .fc-multimonth-title{padding:.5em 0}.fc-multimonth-title{font-size:1.2em;font-weight:700;text-align:center}.fc-multimonth-header-row{border-top:1px solid var(--fc-border-color)}.fc-multimonth-header-row,.fc-multimonth-month{border-bottom:1px solid var(--fc-border-color)}.fc-multimonth-singlecol .fc-multimonth-month:last-child{border-bottom:0}.fc-multimonth-multicol .fc-multimonth-body,.fc-multimonth-multicol .fc-multimonth-header-row{border-left:1px solid var(--fc-border-color);border-right:1px solid var(--fc-border-color);font-size:.9em;line-height:1}.fc-media-screen .fc-multimonth-singlecol .fc-multimonth-header{background:var(--fc-page-bg-color);position:sticky;top:0;z-index:2}.fc-media-screen .fc-multimonth-singlecol .fc-multimonth-body{position:relative;z-index:1}";
 injectStyles(css_248z);
@@ -225,0 +208,0 @@

package.json

 {
   "name": "@fullcalendar/multimonth",
-  "version": "6.1.15",
+  "version": "7.0.0-beta.0",
   "title": "FullCalendar Multi-Month Plugin",
@@ -15,6 +15,6 @@ "description": "Display a sequence or grid of multiple months",
   "dependencies": {
-    "@fullcalendar/daygrid": "~6.1.15"
+    "@fullcalendar/daygrid": "7.0.0-beta.0"
   },
   "peerDependencies": {
-    "@fullcalendar/core": "~6.1.15"
+    "@fullcalendar/core": "7.0.0-beta.0"
   },
@@ -21,0 +21,0 @@ "type": "module",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

48666

decreased by-4.34%

Lines of code

702

decreased by-7.14%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@fullcalendar/core@7.0.0-beta.0(transitive)

• + Added@fullcalendar/daygrid@7.0.0-beta.0(transitive)

• + Addedpreact@10.23.2(transitive)

• - Removed@fullcalendar/core@6.1.15(transitive)

• - Removed@fullcalendar/daygrid@6.1.15(transitive)

• - Removedpreact@10.12.1(transitive)

• Updated@fullcalendar/daygrid@7.0.0-beta.0