@fullcalendar/multimonth 6.1.0 → 6.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  # FullCalendar Multi-Month Plugin
3
3
 
4
- Display a sequence or grid of multiple months
4
+ Display multiple months, in a grid or vertical stack
5
5
 
6
6
  ## Installation
7
7
 
@@ -1,15 +1,19 @@
1
- import { createPlugin } from '@fullcalendar/core';
2
- import { buildDayTableModel, DayTableSlicer, TableRows, buildDayTableRenderRange, TableDateProfileGenerator } from '@fullcalendar/daygrid/internal';
3
- import { DateComponent, memoize, getUniqueDomId, DayHeader, ViewContainer, formatIsoMonthStr, isPropsEqual, createDuration, intersectRanges, createFormatter, injectStyles } from '@fullcalendar/core/internal';
4
- import { createElement, createRef } from '@fullcalendar/core/preact';
1
+ 'use strict';
5
2
 
6
- class SingleMonth extends DateComponent {
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var index_cjs = require('@fullcalendar/core/index.cjs');
6
+ var internal_cjs$1 = require('@fullcalendar/daygrid/internal.cjs');
7
+ var internal_cjs = require('@fullcalendar/core/internal.cjs');
8
+ var preact_cjs = require('@fullcalendar/core/preact.cjs');
9
+
10
+ class SingleMonth extends internal_cjs.DateComponent {
7
11
  constructor() {
8
12
  super(...arguments);
9
- this.buildDayTableModel = memoize(buildDayTableModel);
10
- this.slicer = new DayTableSlicer();
13
+ this.buildDayTableModel = internal_cjs.memoize(internal_cjs$1.buildDayTableModel);
14
+ this.slicer = new internal_cjs$1.DayTableSlicer();
11
15
  this.state = {
12
- labelId: getUniqueDomId(),
16
+ labelId: internal_cjs.getUniqueDomId(),
13
17
  };
14
18
  }
15
19
  render() {
@@ -22,16 +26,16 @@ class SingleMonth extends DateComponent {
22
26
  const tableHeight = props.tableWidth != null ? props.tableWidth / options.aspectRatio : null;
23
27
  const rowCnt = dayTableModel.cells.length;
24
28
  const rowHeight = tableHeight != null ? tableHeight / rowCnt : null;
25
- return (createElement("div", { ref: props.elRef, "data-date": props.isoDateStr, className: "fc-multimonth-month", style: { width: props.width }, role: "grid", "aria-labelledby": state.labelId },
26
- createElement("div", { className: "fc-multimonth-header", style: { marginBottom: rowHeight }, role: "presentation" },
27
- createElement("div", { className: "fc-multimonth-title", id: state.labelId }, context.dateEnv.format(props.dateProfile.currentRange.start, props.titleFormat)),
28
- createElement("table", { className: [
29
+ return (preact_cjs.createElement("div", { ref: props.elRef, "data-date": props.isoDateStr, className: "fc-multimonth-month", style: { width: props.width }, role: "grid", "aria-labelledby": state.labelId },
30
+ preact_cjs.createElement("div", { className: "fc-multimonth-header", style: { marginBottom: rowHeight }, role: "presentation" },
31
+ preact_cjs.createElement("div", { className: "fc-multimonth-title", id: state.labelId }, context.dateEnv.format(props.dateProfile.currentRange.start, props.titleFormat)),
32
+ preact_cjs.createElement("table", { className: [
29
33
  'fc-multimonth-header-table',
30
34
  context.theme.getClass('table'),
31
35
  ].join(' '), role: "presentation" },
32
- createElement("thead", { role: "rowgroup" },
33
- createElement(DayHeader, { dateProfile: props.dateProfile, dates: dayTableModel.headerDates, datesRepDistinctDays: false })))),
34
- createElement("div", { className: [
36
+ preact_cjs.createElement("thead", { role: "rowgroup" },
37
+ preact_cjs.createElement(internal_cjs.DayHeader, { dateProfile: props.dateProfile, dates: dayTableModel.headerDates, datesRepDistinctDays: false })))),
38
+ preact_cjs.createElement("div", { className: [
35
39
  'fc-multimonth-daygrid',
36
40
  'fc-daygrid',
37
41
  'fc-daygrid-body',
@@ -39,22 +43,22 @@ class SingleMonth extends DateComponent {
39
43
  forPrint && 'fc-daygrid-body-unbalanced',
40
44
  forPrint && 'fc-daygrid-body-natural',
41
45
  ].join(' '), style: { marginTop: -rowHeight } },
42
- createElement("table", { className: [
46
+ preact_cjs.createElement("table", { className: [
43
47
  'fc-multimonth-daygrid-table',
44
48
  context.theme.getClass('table'),
45
49
  ].join(' '), style: { height: forPrint ? '' : tableHeight }, role: "presentation" },
46
- createElement("tbody", { role: "rowgroup" },
47
- 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 })))))));
50
+ preact_cjs.createElement("tbody", { role: "rowgroup" },
51
+ preact_cjs.createElement(internal_cjs$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 })))))));
48
52
  }
49
53
  }
50
54
 
51
- class MultiMonthView extends DateComponent {
55
+ class MultiMonthView extends internal_cjs.DateComponent {
52
56
  constructor() {
53
57
  super(...arguments);
54
- this.splitDateProfileByMonth = memoize(splitDateProfileByMonth);
55
- this.buildMonthFormat = memoize(buildMonthFormat);
56
- this.scrollElRef = createRef();
57
- this.firstMonthElRef = createRef();
58
+ this.splitDateProfileByMonth = internal_cjs.memoize(splitDateProfileByMonth);
59
+ this.buildMonthFormat = internal_cjs.memoize(buildMonthFormat);
60
+ this.scrollElRef = preact_cjs.createRef();
61
+ this.firstMonthElRef = preact_cjs.createRef();
58
62
  this.needsScrollReset = false;
59
63
  this.handleSizing = (isForced) => {
60
64
  if (isForced) {
@@ -85,9 +89,9 @@ class MultiMonthView extends DateComponent {
85
89
  'fc-multimonth-compact' :
86
90
  '',
87
91
  ];
88
- return (createElement(ViewContainer, { elRef: this.scrollElRef, elClasses: rootClassNames, viewSpec: context.viewSpec }, monthDateProfiles.map((monthDateProfile, i) => {
89
- const monthStr = formatIsoMonthStr(monthDateProfile.currentRange.start);
90
- 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 })));
92
+ return (preact_cjs.createElement(internal_cjs.ViewContainer, { elRef: this.scrollElRef, elClasses: rootClassNames, viewSpec: context.viewSpec }, monthDateProfiles.map((monthDateProfile, i) => {
93
+ const monthStr = internal_cjs.formatIsoMonthStr(monthDateProfile.currentRange.start);
94
+ return (preact_cjs.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 })));
91
95
  })));
92
96
  }
93
97
  componentDidMount() {
@@ -96,7 +100,7 @@ class MultiMonthView extends DateComponent {
96
100
  this.requestScrollReset();
97
101
  }
98
102
  componentDidUpdate(prevProps) {
99
- if (!isPropsEqual(prevProps, this.props)) { // an external change?
103
+ if (!internal_cjs.isPropsEqual(prevProps, this.props)) { // an external change?
100
104
  this.handleSizing(false);
101
105
  }
102
106
  if (prevProps.dateProfile !== this.props.dateProfile) {
@@ -137,7 +141,7 @@ class MultiMonthView extends DateComponent {
137
141
  ) {
138
142
  const { currentDate } = this.props.dateProfile;
139
143
  const scrollEl = this.scrollElRef.current;
140
- const monthEl = scrollEl.querySelector(`[data-date="${formatIsoMonthStr(currentDate)}"]`);
144
+ const monthEl = scrollEl.querySelector(`[data-date="${internal_cjs.formatIsoMonthStr(currentDate)}"]`);
141
145
  scrollEl.scrollTop = monthEl.getBoundingClientRect().top -
142
146
  this.firstMonthElRef.current.getBoundingClientRect().top;
143
147
  this.needsScrollReset = false;
@@ -151,7 +155,7 @@ class MultiMonthView extends DateComponent {
151
155
  }
152
156
  // date profile
153
157
  // -------------------------------------------------------------------------------------------------
154
- const oneMonthDuration = createDuration(1, 'month');
158
+ const oneMonthDuration = internal_cjs.createDuration(1, 'month');
155
159
  function splitDateProfileByMonth(dateProfileGenerator, dateProfile, dateEnv, fixedWeekCount, showNonCurrentDates) {
156
160
  const { start, end } = dateProfile.currentRange;
157
161
  let monthStart = start;
@@ -163,7 +167,7 @@ function splitDateProfileByMonth(dateProfileGenerator, dateProfile, dateEnv, fix
163
167
  start: dateProfileGenerator.skipHiddenDays(monthStart),
164
168
  end: dateProfileGenerator.skipHiddenDays(monthEnd, -1, true),
165
169
  };
166
- let renderRange = buildDayTableRenderRange({
170
+ let renderRange = internal_cjs$1.buildDayTableRenderRange({
167
171
  currentRange,
168
172
  snapToWeek: true,
169
173
  fixedWeekCount,
@@ -175,7 +179,7 @@ function splitDateProfileByMonth(dateProfileGenerator, dateProfile, dateEnv, fix
175
179
  end: dateProfileGenerator.skipHiddenDays(renderRange.end, -1, true),
176
180
  };
177
181
  const activeRange = dateProfile.activeRange ?
178
- intersectRanges(dateProfile.activeRange, showNonCurrentDates ? renderRange : currentRange) :
182
+ internal_cjs.intersectRanges(dateProfile.activeRange, showNonCurrentDates ? renderRange : currentRange) :
179
183
  null;
180
184
  monthDateProfiles.push({
181
185
  currentDate: dateProfile.currentDate,
@@ -196,8 +200,8 @@ function splitDateProfileByMonth(dateProfileGenerator, dateProfile, dateEnv, fix
196
200
  }
197
201
  // date formatting
198
202
  // -------------------------------------------------------------------------------------------------
199
- const YEAR_MONTH_FORMATTER = createFormatter({ year: 'numeric', month: 'long' });
200
- const YEAR_FORMATTER = createFormatter({ month: 'long' });
203
+ const YEAR_MONTH_FORMATTER = internal_cjs.createFormatter({ year: 'numeric', month: 'long' });
204
+ const YEAR_FORMATTER = internal_cjs.createFormatter({ month: 'long' });
201
205
  function buildMonthFormat(formatOverride, monthDateProfiles) {
202
206
  return formatOverride ||
203
207
  ((monthDateProfiles[0].currentRange.start.getUTCFullYear() !==
@@ -207,22 +211,22 @@ function buildMonthFormat(formatOverride, monthDateProfiles) {
207
211
  }
208
212
 
209
213
  const OPTION_REFINERS = {
210
- multiMonthTitleFormat: createFormatter,
214
+ multiMonthTitleFormat: internal_cjs.createFormatter,
211
215
  multiMonthMaxColumns: Number,
212
216
  multiMonthMinWidth: Number,
213
217
  };
214
218
 
215
219
  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}";
216
- injectStyles(css_248z);
220
+ internal_cjs.injectStyles(css_248z);
217
221
 
218
- var index = createPlugin({
222
+ var index = index_cjs.createPlugin({
219
223
  name: '@fullcalendar/multimonth',
220
224
  initialView: 'multiMonthYear',
221
225
  optionRefiners: OPTION_REFINERS,
222
226
  views: {
223
227
  multiMonth: {
224
228
  component: MultiMonthView,
225
- dateProfileGeneratorClass: TableDateProfileGenerator,
229
+ dateProfileGeneratorClass: internal_cjs$1.TableDateProfileGenerator,
226
230
  multiMonthMinWidth: 350,
227
231
  multiMonthMaxColumns: 3,
228
232
  },
@@ -235,4 +239,4 @@ var index = createPlugin({
235
239
  },
236
240
  });
237
241
 
238
- export { index as default };
242
+ exports["default"] = index;
package/index.global.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /*!
2
- FullCalendar Multi-Month Plugin v6.1.0
3
- Docs & License: https://fullcalendar.io/docs/multimonth-view
4
- (c) 2022 Adam Shaw
2
+ FullCalendar Multi-Month Plugin v6.1.1
3
+ Docs & License: https://fullcalendar.io/docs/multimonth-grid
4
+ (c) 2023 Adam Shaw
5
5
  */
6
6
  FullCalendar.MultiMonth = (function (exports, core, internal$1, internal, preact) {
7
7
  'use strict';
@@ -1,6 +1,6 @@
1
1
  /*!
2
- FullCalendar Multi-Month Plugin v6.1.0
3
- Docs & License: https://fullcalendar.io/docs/multimonth-view
4
- (c) 2022 Adam Shaw
2
+ FullCalendar Multi-Month Plugin v6.1.1
3
+ Docs & License: https://fullcalendar.io/docs/multimonth-grid
4
+ (c) 2023 Adam Shaw
5
5
  */
6
6
  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":""];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);
package/index.js CHANGED
@@ -1,19 +1,15 @@
1
- 'use strict';
1
+ import { createPlugin } from '@fullcalendar/core';
2
+ import { buildDayTableModel, DayTableSlicer, TableRows, buildDayTableRenderRange, TableDateProfileGenerator } from '@fullcalendar/daygrid/internal';
3
+ import { DateComponent, memoize, getUniqueDomId, DayHeader, ViewContainer, formatIsoMonthStr, isPropsEqual, createDuration, intersectRanges, createFormatter, injectStyles } from '@fullcalendar/core/internal';
4
+ import { createElement, createRef } from '@fullcalendar/core/preact';
2
5
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var core = require('@fullcalendar/core');
6
- var internal$1 = require('@fullcalendar/daygrid/internal');
7
- var internal = require('@fullcalendar/core/internal');
8
- var preact = require('@fullcalendar/core/preact');
9
-
10
- class SingleMonth extends internal.DateComponent {
6
+ class SingleMonth extends DateComponent {
11
7
  constructor() {
12
8
  super(...arguments);
13
- this.buildDayTableModel = internal.memoize(internal$1.buildDayTableModel);
14
- this.slicer = new internal$1.DayTableSlicer();
9
+ this.buildDayTableModel = memoize(buildDayTableModel);
10
+ this.slicer = new DayTableSlicer();
15
11
  this.state = {
16
- labelId: internal.getUniqueDomId(),
12
+ labelId: getUniqueDomId(),
17
13
  };
18
14
  }
19
15
  render() {
@@ -26,16 +22,16 @@ class SingleMonth extends internal.DateComponent {
26
22
  const tableHeight = props.tableWidth != null ? props.tableWidth / options.aspectRatio : null;
27
23
  const rowCnt = dayTableModel.cells.length;
28
24
  const rowHeight = tableHeight != null ? tableHeight / rowCnt : null;
29
- 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 },
30
- preact.createElement("div", { className: "fc-multimonth-header", style: { marginBottom: rowHeight }, role: "presentation" },
31
- preact.createElement("div", { className: "fc-multimonth-title", id: state.labelId }, context.dateEnv.format(props.dateProfile.currentRange.start, props.titleFormat)),
32
- preact.createElement("table", { className: [
25
+ return (createElement("div", { ref: props.elRef, "data-date": props.isoDateStr, className: "fc-multimonth-month", style: { width: props.width }, role: "grid", "aria-labelledby": state.labelId },
26
+ createElement("div", { className: "fc-multimonth-header", style: { marginBottom: rowHeight }, role: "presentation" },
27
+ createElement("div", { className: "fc-multimonth-title", id: state.labelId }, context.dateEnv.format(props.dateProfile.currentRange.start, props.titleFormat)),
28
+ createElement("table", { className: [
33
29
  'fc-multimonth-header-table',
34
30
  context.theme.getClass('table'),
35
31
  ].join(' '), role: "presentation" },
36
- preact.createElement("thead", { role: "rowgroup" },
37
- preact.createElement(internal.DayHeader, { dateProfile: props.dateProfile, dates: dayTableModel.headerDates, datesRepDistinctDays: false })))),
38
- preact.createElement("div", { className: [
32
+ createElement("thead", { role: "rowgroup" },
33
+ createElement(DayHeader, { dateProfile: props.dateProfile, dates: dayTableModel.headerDates, datesRepDistinctDays: false })))),
34
+ createElement("div", { className: [
39
35
  'fc-multimonth-daygrid',
40
36
  'fc-daygrid',
41
37
  'fc-daygrid-body',
@@ -43,22 +39,22 @@ class SingleMonth extends internal.DateComponent {
43
39
  forPrint && 'fc-daygrid-body-unbalanced',
44
40
  forPrint && 'fc-daygrid-body-natural',
45
41
  ].join(' '), style: { marginTop: -rowHeight } },
46
- preact.createElement("table", { className: [
42
+ createElement("table", { className: [
47
43
  'fc-multimonth-daygrid-table',
48
44
  context.theme.getClass('table'),
49
45
  ].join(' '), style: { height: forPrint ? '' : tableHeight }, role: "presentation" },
50
- preact.createElement("tbody", { role: "rowgroup" },
51
- 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 })))))));
46
+ createElement("tbody", { role: "rowgroup" },
47
+ 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 })))))));
52
48
  }
53
49
  }
54
50
 
55
- class MultiMonthView extends internal.DateComponent {
51
+ class MultiMonthView extends DateComponent {
56
52
  constructor() {
57
53
  super(...arguments);
58
- this.splitDateProfileByMonth = internal.memoize(splitDateProfileByMonth);
59
- this.buildMonthFormat = internal.memoize(buildMonthFormat);
60
- this.scrollElRef = preact.createRef();
61
- this.firstMonthElRef = preact.createRef();
54
+ this.splitDateProfileByMonth = memoize(splitDateProfileByMonth);
55
+ this.buildMonthFormat = memoize(buildMonthFormat);
56
+ this.scrollElRef = createRef();
57
+ this.firstMonthElRef = createRef();
62
58
  this.needsScrollReset = false;
63
59
  this.handleSizing = (isForced) => {
64
60
  if (isForced) {
@@ -89,9 +85,9 @@ class MultiMonthView extends internal.DateComponent {
89
85
  'fc-multimonth-compact' :
90
86
  '',
91
87
  ];
92
- return (preact.createElement(internal.ViewContainer, { elRef: this.scrollElRef, elClasses: rootClassNames, viewSpec: context.viewSpec }, monthDateProfiles.map((monthDateProfile, i) => {
93
- const monthStr = internal.formatIsoMonthStr(monthDateProfile.currentRange.start);
94
- 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 })));
88
+ return (createElement(ViewContainer, { elRef: this.scrollElRef, elClasses: rootClassNames, viewSpec: context.viewSpec }, monthDateProfiles.map((monthDateProfile, i) => {
89
+ const monthStr = formatIsoMonthStr(monthDateProfile.currentRange.start);
90
+ 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 })));
95
91
  })));
96
92
  }
97
93
  componentDidMount() {
@@ -100,7 +96,7 @@ class MultiMonthView extends internal.DateComponent {
100
96
  this.requestScrollReset();
101
97
  }
102
98
  componentDidUpdate(prevProps) {
103
- if (!internal.isPropsEqual(prevProps, this.props)) { // an external change?
99
+ if (!isPropsEqual(prevProps, this.props)) { // an external change?
104
100
  this.handleSizing(false);
105
101
  }
106
102
  if (prevProps.dateProfile !== this.props.dateProfile) {
@@ -141,7 +137,7 @@ class MultiMonthView extends internal.DateComponent {
141
137
  ) {
142
138
  const { currentDate } = this.props.dateProfile;
143
139
  const scrollEl = this.scrollElRef.current;
144
- const monthEl = scrollEl.querySelector(`[data-date="${internal.formatIsoMonthStr(currentDate)}"]`);
140
+ const monthEl = scrollEl.querySelector(`[data-date="${formatIsoMonthStr(currentDate)}"]`);
145
141
  scrollEl.scrollTop = monthEl.getBoundingClientRect().top -
146
142
  this.firstMonthElRef.current.getBoundingClientRect().top;
147
143
  this.needsScrollReset = false;
@@ -155,7 +151,7 @@ class MultiMonthView extends internal.DateComponent {
155
151
  }
156
152
  // date profile
157
153
  // -------------------------------------------------------------------------------------------------
158
- const oneMonthDuration = internal.createDuration(1, 'month');
154
+ const oneMonthDuration = createDuration(1, 'month');
159
155
  function splitDateProfileByMonth(dateProfileGenerator, dateProfile, dateEnv, fixedWeekCount, showNonCurrentDates) {
160
156
  const { start, end } = dateProfile.currentRange;
161
157
  let monthStart = start;
@@ -167,7 +163,7 @@ function splitDateProfileByMonth(dateProfileGenerator, dateProfile, dateEnv, fix
167
163
  start: dateProfileGenerator.skipHiddenDays(monthStart),
168
164
  end: dateProfileGenerator.skipHiddenDays(monthEnd, -1, true),
169
165
  };
170
- let renderRange = internal$1.buildDayTableRenderRange({
166
+ let renderRange = buildDayTableRenderRange({
171
167
  currentRange,
172
168
  snapToWeek: true,
173
169
  fixedWeekCount,
@@ -179,7 +175,7 @@ function splitDateProfileByMonth(dateProfileGenerator, dateProfile, dateEnv, fix
179
175
  end: dateProfileGenerator.skipHiddenDays(renderRange.end, -1, true),
180
176
  };
181
177
  const activeRange = dateProfile.activeRange ?
182
- internal.intersectRanges(dateProfile.activeRange, showNonCurrentDates ? renderRange : currentRange) :
178
+ intersectRanges(dateProfile.activeRange, showNonCurrentDates ? renderRange : currentRange) :
183
179
  null;
184
180
  monthDateProfiles.push({
185
181
  currentDate: dateProfile.currentDate,
@@ -200,8 +196,8 @@ function splitDateProfileByMonth(dateProfileGenerator, dateProfile, dateEnv, fix
200
196
  }
201
197
  // date formatting
202
198
  // -------------------------------------------------------------------------------------------------
203
- const YEAR_MONTH_FORMATTER = internal.createFormatter({ year: 'numeric', month: 'long' });
204
- const YEAR_FORMATTER = internal.createFormatter({ month: 'long' });
199
+ const YEAR_MONTH_FORMATTER = createFormatter({ year: 'numeric', month: 'long' });
200
+ const YEAR_FORMATTER = createFormatter({ month: 'long' });
205
201
  function buildMonthFormat(formatOverride, monthDateProfiles) {
206
202
  return formatOverride ||
207
203
  ((monthDateProfiles[0].currentRange.start.getUTCFullYear() !==
@@ -211,22 +207,22 @@ function buildMonthFormat(formatOverride, monthDateProfiles) {
211
207
  }
212
208
 
213
209
  const OPTION_REFINERS = {
214
- multiMonthTitleFormat: internal.createFormatter,
210
+ multiMonthTitleFormat: createFormatter,
215
211
  multiMonthMaxColumns: Number,
216
212
  multiMonthMinWidth: Number,
217
213
  };
218
214
 
219
215
  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}";
220
- internal.injectStyles(css_248z);
216
+ injectStyles(css_248z);
221
217
 
222
- var index = core.createPlugin({
218
+ var index = createPlugin({
223
219
  name: '@fullcalendar/multimonth',
224
220
  initialView: 'multiMonthYear',
225
221
  optionRefiners: OPTION_REFINERS,
226
222
  views: {
227
223
  multiMonth: {
228
224
  component: MultiMonthView,
229
- dateProfileGeneratorClass: internal$1.TableDateProfileGenerator,
225
+ dateProfileGeneratorClass: TableDateProfileGenerator,
230
226
  multiMonthMinWidth: 350,
231
227
  multiMonthMaxColumns: 3,
232
228
  },
@@ -239,4 +235,4 @@ var index = core.createPlugin({
239
235
  },
240
236
  });
241
237
 
242
- exports["default"] = index;
238
+ export { index as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fullcalendar/multimonth",
3
- "version": "6.1.0",
3
+ "version": "6.1.1",
4
4
  "title": "FullCalendar Multi-Month Plugin",
5
5
  "description": "Display a sequence or grid of multiple months",
6
6
  "keywords": [
@@ -10,12 +10,12 @@
10
10
  "fullcalendar",
11
11
  "month"
12
12
  ],
13
- "homepage": "https://fullcalendar.io/docs/multimonth-view",
13
+ "homepage": "https://fullcalendar.io/docs/multimonth-grid",
14
14
  "dependencies": {
15
- "@fullcalendar/daygrid": "~6.1.0"
15
+ "@fullcalendar/daygrid": "~6.1.1"
16
16
  },
17
17
  "peerDependencies": {
18
- "@fullcalendar/core": "~6.1.0"
18
+ "@fullcalendar/core": "~6.1.1"
19
19
  },
20
20
  "type": "module",
21
21
  "bugs": "https://fullcalendar.io/reporting-bugs",
@@ -30,23 +30,19 @@
30
30
  "email": "arshaw@arshaw.com",
31
31
  "url": "http://arshaw.com/"
32
32
  },
33
- "copyright": "2022 Adam Shaw",
33
+ "copyright": "2023 Adam Shaw",
34
34
  "types": "./index.d.ts",
35
- "main": "./index.js",
36
- "module": "./index.esm.js",
35
+ "main": "./index.cjs",
36
+ "module": "./index.js",
37
37
  "unpkg": "./index.global.min.js",
38
38
  "jsdelivr": "./index.global.min.js",
39
39
  "exports": {
40
40
  "./package.json": "./package.json",
41
+ "./index.cjs": "./index.cjs",
41
42
  ".": {
42
43
  "types": "./index.d.ts",
43
- "require": "./index.js",
44
- "import": "./index.esm.js"
45
- },
46
- "./internal": {
47
- "types": "./internal.d.ts",
48
- "require": "./internal.js",
49
- "import": "./internal.esm.js"
44
+ "require": "./index.cjs",
45
+ "import": "./index.js"
50
46
  }
51
47
  },
52
48
  "sideEffects": false