@fullcalendar/multimonth 6.1.0 → 6.1.3
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 +1 -1
- package/{index.esm.js → index.cjs} +42 -38
- package/index.global.js +3 -3
- package/index.global.min.js +3 -3
- package/index.js +38 -42
- package/package.json +10 -14
package/README.md
CHANGED
@@ -1,15 +1,19 @@
|
|
1
|
-
|
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
|
-
|
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
|
-
|
242
|
+
exports["default"] = index;
|
package/index.global.js
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
/*!
|
2
|
-
FullCalendar Multi-Month Plugin v6.1.
|
3
|
-
Docs & License: https://fullcalendar.io/docs/multimonth-
|
4
|
-
(c)
|
2
|
+
FullCalendar Multi-Month Plugin v6.1.3
|
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';
|
package/index.global.min.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
/*!
|
2
|
-
FullCalendar Multi-Month Plugin v6.1.
|
3
|
-
Docs & License: https://fullcalendar.io/docs/multimonth-
|
4
|
-
(c)
|
2
|
+
FullCalendar Multi-Month Plugin v6.1.3
|
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
|
-
|
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
|
-
|
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 =
|
14
|
-
this.slicer = new
|
9
|
+
this.buildDayTableModel = memoize(buildDayTableModel);
|
10
|
+
this.slicer = new DayTableSlicer();
|
15
11
|
this.state = {
|
16
|
-
labelId:
|
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 (
|
30
|
-
|
31
|
-
|
32
|
-
|
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
|
-
|
37
|
-
|
38
|
-
|
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
|
-
|
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
|
-
|
51
|
-
|
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
|
51
|
+
class MultiMonthView extends DateComponent {
|
56
52
|
constructor() {
|
57
53
|
super(...arguments);
|
58
|
-
this.splitDateProfileByMonth =
|
59
|
-
this.buildMonthFormat =
|
60
|
-
this.scrollElRef =
|
61
|
-
this.firstMonthElRef =
|
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 (
|
93
|
-
const monthStr =
|
94
|
-
return (
|
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 (!
|
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="${
|
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 =
|
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 =
|
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
|
-
|
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 =
|
204
|
-
const YEAR_FORMATTER =
|
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:
|
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
|
-
|
216
|
+
injectStyles(css_248z);
|
221
217
|
|
222
|
-
var index =
|
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:
|
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
|
-
|
238
|
+
export { index as default };
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fullcalendar/multimonth",
|
3
|
-
"version": "6.1.
|
3
|
+
"version": "6.1.3",
|
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-
|
13
|
+
"homepage": "https://fullcalendar.io/docs/multimonth-grid",
|
14
14
|
"dependencies": {
|
15
|
-
"@fullcalendar/daygrid": "~6.1.
|
15
|
+
"@fullcalendar/daygrid": "~6.1.3"
|
16
16
|
},
|
17
17
|
"peerDependencies": {
|
18
|
-
"@fullcalendar/core": "~6.1.
|
18
|
+
"@fullcalendar/core": "~6.1.3"
|
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": "
|
33
|
+
"copyright": "2023 Adam Shaw",
|
34
34
|
"types": "./index.d.ts",
|
35
|
-
"main": "./index.
|
36
|
-
"module": "./index.
|
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.
|
44
|
-
"import": "./index.
|
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
|