@fullcalendar/multimonth 7.0.0-beta.4 → 7.0.0-beta.5
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/LICENSE.md +1 -1
- package/README.md +6 -1
- package/cjs/index.cjs +322 -0
- package/esm/index.d.ts +41 -0
- package/esm/index.js +314 -0
- package/global.js +328 -0
- package/global.min.js +6 -0
- package/package.json +18 -15
- package/index.cjs +0 -234
- package/index.d.ts +0 -20
- package/index.global.js +0 -241
- package/index.global.min.js +0 -6
- package/index.js +0 -230
package/global.min.js
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
FullCalendar Multi-Month Plugin v7.0.0-beta.5
|
|
3
|
+
Docs & License: https://fullcalendar.io/docs/multimonth-grid
|
|
4
|
+
(c) 2025 Adam Shaw
|
|
5
|
+
*/
|
|
6
|
+
FullCalendar.MultiMonth=function(e,t,l,a,s,r){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}var n=i(s);class o extends a.DateComponent{constructor(){super(...arguments),this.buildDayTableModel=a.memoize(l.buildDayTableModel),this.createDayHeaderFormatter=a.memoize(l.createDayHeaderFormatter),this.buildDateRowConfig=a.memoize(l.buildDateRowConfig),this.gridElRef=r.createRef(),this.titleElRef=r.createRef(),this.tableHeaderElRef=r.createRef(),this.slicer=new l.DayTableSlicer,this.titleId=a.getUniqueDomId(),this.handleEl=e=>{var t;const{options:l}=this.context;e&&(this.rootEl=e,null===(t=l.singleMonthDidMount)||void 0===t||t.call(l,Object.assign({el:this.rootEl},this.renderProps)))}}render(){const{props:e,state:s,context:i}=this,{dateProfile:o,forPrint:d}=e,{options:c,dateEnv:h}=i,u=this.buildDayTableModel(o,i.dateProfileGenerator,h),m=this.slicer.sliceProps(e,o,c.nextDayThreshold,i,u),f=this.createDayHeaderFormatter(c.dayHeaderFormat,!1,u.colCount),g=this.buildDateRowConfig(u.headerDates,!1,o,e.todayRange,f,i),b=!d&&1===e.colCount,C=!d||e.hasLateralSiblings,p=1/c.aspectRatio,y=u.cellRows[0].length,R=null!=s.gridWidth?s.gridWidth/y:void 0,v=null!=R&&R<=l.dayMicroWidth,M=v||null!=R&&R<=c.dayNarrowWidth,D=null!=s.gridWidth?p*s.gridWidth/6:void 0,E=b?D:void 0,S=b&&null!=D&&null!=s.tableHeaderHeight?D+s.tableHeaderHeight+1:void 0,N=c.navLinks&&e.colCount>1,H={colCount:e.colCount,isSticky:b,isNarrow:M,hasNavLink:N},T=e.dateProfile.currentRange.start,w=N?a.buildNavLinkAttrs(i,T,"month",e.isoDateStr):{};return r.createElement("div",{role:"listitem",style:{width:e.width}},r.createElement("div",{ref:this.gridElRef,role:"grid","aria-labelledby":this.titleId,"data-date":e.isoDateStr,className:t.joinClassNames(a.generateClassName(c.singleMonthClass,{colCount:e.colCount||0}),e.borderlessX&&n.default.borderlessX,e.borderlessTop&&n.default.borderlessTop,e.borderlessBottom&&n.default.borderlessBottom,1===e.colCount&&n.default.noMargin,n.default.flexCol,e.hasLateralSiblings&&n.default.breakInsideAvoid)},r.createElement("div",{id:this.titleId,ref:this.titleElRef,className:t.joinClassNames(a.generateClassName(c.singleMonthHeaderClass,H),b&&n.default.stickyT,n.default.flexCol),style:{zIndex:b?3:void 0,marginBottom:S}},r.createElement("div",Object.assign({},w,{className:t.joinClassNames(a.generateClassName(c.singleMonthHeaderInnerClass,H),w.className)}),h.format(T,e.titleFormat))),r.createElement("div",{className:a.joinArrayishClassNames(c.tableClass,e.borderlessX&&n.default.borderlessX,b&&n.default.borderlessTop,e.borderlessBottom&&n.default.borderlessBottom,n.default.flexCol),style:{marginTop:null!=S?-S:void 0}},r.createElement("div",{ref:this.tableHeaderElRef,className:t.joinClassNames(a.generateClassName(c.tableHeaderClass,{isSticky:b}),e.borderlessX&&n.default.borderlessX,n.default.flexCol,b&&n.default.sticky),style:{zIndex:b?2:void 0,top:b?s.titleHeight:0,marginBottom:E}},r.createElement(l.DayGridHeaderRow,Object.assign({},g,{role:"row",borderBottom:!1,cellIsNarrow:M,cellIsMicro:v,rowLevel:0})),r.createElement("div",{className:a.generateClassName(c.dayHeaderDividerClass,{isSticky:b,options:{allDaySlot:Boolean(c.allDaySlot)}})})),r.createElement("div",{className:a.joinArrayishClassNames(c.tableBodyClass,n.default.flexCol,C&&n.default.rel,e.borderlessX&&n.default.borderlessX,b&&n.default.borderlessTop,(b||e.noEdgeEffects)&&n.default.noEdgeEffects),style:{zIndex:b?1:void 0,marginTop:null!=E?-E:void 0,paddingBottom:C?a.fracToCssDim(p):void 0}},r.createElement(l.DayGridRows,{dateProfile:e.dateProfile,todayRange:e.todayRange,cellRows:u.cellRows,className:C?n.default.fill:"",forPrint:d&&!e.hasLateralSiblings,dayMaxEventRows:!d||!e.hasLateralSiblings||1,fgEventSegs:m.fgEventSegs,bgEventSegs:m.bgEventSegs,businessHourSegs:m.businessHourSegs,dateSelectionSegs:m.dateSelectionSegs,eventDrag:m.eventDrag,eventResize:m.eventResize,eventSelection:m.eventSelection,visibleWidth:s.gridWidth,cellIsNarrow:M,cellIsMicro:v})))))}componentDidMount(){this.disconnectGridWidth=a.watchWidth(this.gridElRef.current,e=>{this.setState({gridWidth:e})}),this.disconnectTitleHeight=a.watchHeight(this.titleElRef.current,e=>{this.setState({titleHeight:e})}),this.disconnectTableHeaderHeight=a.watchHeight(this.tableHeaderElRef.current,e=>{this.setState({tableHeaderHeight:e})})}componentWillUnmount(){var e;const{options:t}=this.context;this.disconnectGridWidth(),this.disconnectTitleHeight(),this.disconnectTableHeaderHeight(),null===(e=t.singleMonthWillUnmount)||void 0===e||e.call(t,Object.assign({el:this.rootEl},this.renderProps))}}class d extends a.DateComponent{constructor(){super(...arguments),this.splitDateProfileByMonth=a.memoize(h),this.buildMonthFormat=a.memoize(f),this.scrollerRef=r.createRef(),this.innerElRef=r.createRef(),this.scrollDate=null,this.handleScrollEnd=e=>{e&&(this.scrollDate=null)}}render(){const{context:e,props:l,state:s}=this,{options:i}=e,d=!l.forPrint&&!a.getIsHeightAuto(i),c=this.splitDateProfileByMonth(e.dateProfileGenerator,l.dateProfile,e.dateEnv,i.fixedWeekCount,i.showNonCurrentDates),h=this.buildMonthFormat(i.singleMonthTitleFormat,c),{multiMonthMaxColumns:u,singleMonthMinWidth:m}=i,{innerWidth:f}=s;let g,b,C=!1;return null!=f&&(g=Math.max(1,Math.min(u,Math.floor(f/m))),l.forPrint&&(g=Math.min(g,2)),b=a.fracToCssDim(1/g),C=g>1),r.createElement(a.NowTimer,{unit:"day"},(s,i)=>r.createElement(a.ViewContainer,{viewSpec:e.viewSpec,className:t.joinClassNames(!l.forPrint&&n.default.flexCol,l.className),borderlessX:l.borderlessX,borderlessTop:l.borderlessTop,borderlessBottom:l.borderlessBottom,noEdgeEffects:l.noEdgeEffects},r.createElement(a.Scroller,{vertical:d,className:d?n.default.liquid:"",ref:this.scrollerRef},r.createElement("div",{role:"list","aria-labelledby":l.labelId,"aria-label":l.labelStr,className:n.default.safeTiles,ref:this.innerElRef},c.map((e,t)=>{const s=a.formatIsoMonthStr(e.currentRange.start);return r.createElement(o,Object.assign({},l,{key:s,todayRange:i,isoDateStr:s,titleFormat:h,dateProfile:e,width:b,colCount:g,borderlessX:1===g,borderlessTop:1===g,borderlessBottom:1===g&&t===c.length-1,hasLateralSiblings:C}))})))))}componentDidMount(){this.resetScroll(),this.scrollerRef.current.addScrollEndListener(this.handleScrollEnd),this.disconnectInnerWidth=a.watchWidth(this.innerElRef.current,e=>{a.afterSize(()=>{this.setState({innerWidth:e})})})}componentDidUpdate(e){e.dateProfile!==this.props.dateProfile&&this.context.options.scrollTimeReset?this.resetScroll():this.applyScroll()}componentWillUnmount(){this.scrollerRef.current.removeScrollEndListener(this.handleScrollEnd),this.disconnectInnerWidth()}resetScroll(){this.scrollDate=this.props.dateProfile.currentDate,this.applyScroll()}applyScroll(){if(null!=this.scrollDate&&null!=this.state.innerWidth){const e=this.scrollerRef.current,t=this.innerElRef.current,l=t.querySelector(`[data-date="${a.formatIsoMonthStr(this.scrollDate)}"]`),s=Math.ceil(l.parentNode.getBoundingClientRect().top-t.getBoundingClientRect().top);e.scrollTo({y:s})}}}const c=a.createDuration(1,"month");function h(e,t,s,r,i){const{start:n,end:o}=t.currentRange;let d=n;const h=[];for(;d.valueOf()<o.valueOf();){const n=s.add(d,c),o={start:e.skipHiddenDays(d),end:e.skipHiddenDays(n,-1,!0)};let u=l.buildDayTableRenderRange({currentRange:o,snapToWeek:!0,fixedWeekCount:r,dateEnv:s});u={start:e.skipHiddenDays(u.start),end:e.skipHiddenDays(u.end,-1,!0)};const m=t.activeRange?a.intersectRanges(t.activeRange,i?u:o):null;h.push({currentDate:t.currentDate,isValid:t.isValid,validRange:t.validRange,renderRange:u,activeRange:m,currentRange:o,currentRangeUnit:"month",isRangeAllDay:!0,dateIncrement:t.dateIncrement,slotMinTime:t.slotMaxTime,slotMaxTime:t.slotMinTime}),d=n}return h}const u=a.createFormatter({year:"numeric",month:"long"}),m=a.createFormatter({month:"long"});function f(e,t){return e||(t[0].currentRange.start.getUTCFullYear()!==t[t.length-1].currentRange.start.getUTCFullYear()?u:m)}const g={multiMonthMaxColumns:Number,singleMonthMinWidth:Number,singleMonthTitleFormat:a.createFormatter,singleMonthDidMount:a.identity,singleMonthWillUnmount:a.identity,singleMonthClass:a.identity,singleMonthHeaderClass:a.identity,singleMonthHeaderInnerClass:a.identity};var b=t.createPlugin({name:"@fullcalendar/multimonth",initialView:"multiMonthYear",optionRefiners:g,views:{multiMonth:{component:d,dateProfileGeneratorClass:l.TableDateProfileGenerator,multiMonthMaxColumns:3,singleMonthMinWidth:350},multiMonthYear:{type:"multiMonth",duration:{years:1},fixedWeekCount:!0,showNonCurrentDates:!1}}});return t.globalPlugins.push(b),e.default=b,Object.defineProperty(e,"__esModule",{value:!0}),e}({},FullCalendar,FullCalendar.DayGrid.Internal,FullCalendar.Internal,FullCalendar.InternalClassNames,FullCalendar.Preact);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fullcalendar/multimonth",
|
|
3
|
-
"version": "7.0.0-beta.
|
|
3
|
+
"version": "7.0.0-beta.5",
|
|
4
4
|
"title": "FullCalendar Multi-Month Plugin",
|
|
5
5
|
"description": "Display a sequence or grid of multiple months",
|
|
6
6
|
"keywords": [
|
|
@@ -12,10 +12,10 @@
|
|
|
12
12
|
],
|
|
13
13
|
"homepage": "https://fullcalendar.io/docs/multimonth-grid",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fullcalendar/daygrid": "7.0.0-beta.
|
|
15
|
+
"@fullcalendar/daygrid": "7.0.0-beta.5"
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
|
18
|
-
"@fullcalendar/core": "7.0.0-beta.
|
|
18
|
+
"@fullcalendar/core": "7.0.0-beta.5"
|
|
19
19
|
},
|
|
20
20
|
"type": "module",
|
|
21
21
|
"bugs": "https://fullcalendar.io/reporting-bugs",
|
|
@@ -30,21 +30,24 @@
|
|
|
30
30
|
"email": "arshaw@arshaw.com",
|
|
31
31
|
"url": "http://arshaw.com/"
|
|
32
32
|
},
|
|
33
|
-
"copyright": "
|
|
34
|
-
"types": "./index.d.ts",
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"unpkg": "./
|
|
38
|
-
"jsdelivr": "./
|
|
33
|
+
"copyright": "2025 Adam Shaw",
|
|
34
|
+
"types": "./esm/index.d.ts",
|
|
35
|
+
"module": "./esm/index.js",
|
|
36
|
+
"main": "./cjs/index.cjs",
|
|
37
|
+
"unpkg": "./global.min.js",
|
|
38
|
+
"jsdelivr": "./global.min.js",
|
|
39
39
|
"exports": {
|
|
40
40
|
"./package.json": "./package.json",
|
|
41
|
-
"./index.cjs": "./index.cjs",
|
|
42
|
-
"./index.js": "./index.js",
|
|
43
41
|
".": {
|
|
44
|
-
"
|
|
45
|
-
|
|
46
|
-
|
|
42
|
+
"import": {
|
|
43
|
+
"types": "./esm/index.d.ts",
|
|
44
|
+
"default": "./esm/index.js"
|
|
45
|
+
},
|
|
46
|
+
"require": "./cjs/index.cjs"
|
|
47
47
|
}
|
|
48
48
|
},
|
|
49
|
-
"sideEffects":
|
|
49
|
+
"sideEffects": [
|
|
50
|
+
"./global.js",
|
|
51
|
+
"./global.min.js"
|
|
52
|
+
]
|
|
50
53
|
}
|
package/index.cjs
DELETED
|
@@ -1,234 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
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 {
|
|
11
|
-
constructor() {
|
|
12
|
-
super(...arguments);
|
|
13
|
-
// memo
|
|
14
|
-
this.buildDayTableModel = internal_cjs.memoize(internal_cjs$1.buildDayTableModel);
|
|
15
|
-
this.createDayHeaderFormatter = internal_cjs.memoize(internal_cjs$1.createDayHeaderFormatter);
|
|
16
|
-
this.buildDateRowConfig = internal_cjs.memoize(internal_cjs$1.buildDateRowConfig);
|
|
17
|
-
// internal
|
|
18
|
-
this.slicer = new internal_cjs$1.DayTableSlicer();
|
|
19
|
-
this.titleId = internal_cjs.getUniqueDomId();
|
|
20
|
-
}
|
|
21
|
-
render() {
|
|
22
|
-
const { props, context } = this;
|
|
23
|
-
const { dateProfile, forPrint } = props;
|
|
24
|
-
const { options } = context;
|
|
25
|
-
const dayTableModel = this.buildDayTableModel(dateProfile, context.dateProfileGenerator);
|
|
26
|
-
const slicedProps = this.slicer.sliceProps(props, dateProfile, options.nextDayThreshold, context, dayTableModel);
|
|
27
|
-
const dayHeaderFormat = this.createDayHeaderFormatter(options.dayHeaderFormat, false, // datesRepDistinctDays
|
|
28
|
-
dayTableModel.colCnt);
|
|
29
|
-
const rowConfig = this.buildDateRowConfig(dayTableModel.headerDates, false, // datesRepDistinctDays
|
|
30
|
-
dateProfile, props.todayRange, dayHeaderFormat, context);
|
|
31
|
-
const invAspectRatio = 1 / options.aspectRatio;
|
|
32
|
-
const invRowAspectRatio = invAspectRatio / dayTableModel.rowCnt;
|
|
33
|
-
const isHeaderSticky = !forPrint;
|
|
34
|
-
const isAspectRatio = !forPrint || props.hasLateralSiblings;
|
|
35
|
-
return (preact_cjs.createElement("div", { role: 'listitem', className: 'fc-multimonth-month-outer', style: { width: props.width } },
|
|
36
|
-
preact_cjs.createElement("div", { role: 'grid', "aria-labelledby": this.titleId, "data-date": props.isoDateStr, className: internal_cjs.joinClassNames('fc-multimonth-month', props.hasLateralSiblings && 'fc-break-inside-avoid') },
|
|
37
|
-
preact_cjs.createElement("div", { className: "fc-multimonth-header", style: {
|
|
38
|
-
marginBottom: isHeaderSticky ? internal_cjs.fracToCssDim(invRowAspectRatio) : undefined,
|
|
39
|
-
} },
|
|
40
|
-
preact_cjs.createElement("div", { id: this.titleId, className: 'fc-multimonth-title' }, context.dateEnv.format(props.dateProfile.currentRange.start, props.titleFormat)),
|
|
41
|
-
preact_cjs.createElement(internal_cjs$1.DayGridHeaderRow, Object.assign({}, rowConfig, { role: 'row', className: 'fc-multimonth-header-row' }))),
|
|
42
|
-
preact_cjs.createElement("div", { className: internal_cjs.joinClassNames('fc-multimonth-body', isAspectRatio && 'fc-rel'), style: {
|
|
43
|
-
marginTop: isHeaderSticky ? internal_cjs.fracToCssDim(-invRowAspectRatio) : undefined,
|
|
44
|
-
paddingBottom: isAspectRatio ? internal_cjs.fracToCssDim(invAspectRatio) : undefined,
|
|
45
|
-
} },
|
|
46
|
-
preact_cjs.createElement(internal_cjs$1.DayGridRows, { dateProfile: props.dateProfile, todayRange: props.todayRange, cellRows: dayTableModel.cellRows, className: isAspectRatio ? 'fc-fill' : '', forPrint: forPrint && !props.hasLateralSiblings, dayMaxEvents: forPrint ? undefined : options.dayMaxEvents, dayMaxEventRows: (forPrint && props.hasLateralSiblings) ? 1 : options.dayMaxEventRows,
|
|
47
|
-
// content
|
|
48
|
-
fgEventSegs: slicedProps.fgEventSegs, bgEventSegs: slicedProps.bgEventSegs, businessHourSegs: slicedProps.businessHourSegs, dateSelectionSegs: slicedProps.dateSelectionSegs, eventDrag: slicedProps.eventDrag, eventResize: slicedProps.eventResize, eventSelection: slicedProps.eventSelection,
|
|
49
|
-
// dimensions
|
|
50
|
-
visibleWidth: props.visibleWidth })))));
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
class MultiMonthView extends internal_cjs.DateComponent {
|
|
55
|
-
constructor() {
|
|
56
|
-
super(...arguments);
|
|
57
|
-
// memo
|
|
58
|
-
this.splitDateProfileByMonth = internal_cjs.memoize(splitDateProfileByMonth);
|
|
59
|
-
this.buildMonthFormat = internal_cjs.memoize(buildMonthFormat);
|
|
60
|
-
// ref
|
|
61
|
-
this.scrollerRef = preact_cjs.createRef();
|
|
62
|
-
this.innerElRef = preact_cjs.createRef(); // .fc-multimonth-inner
|
|
63
|
-
this.scrollDate = null;
|
|
64
|
-
this.handleScrollEnd = ({ isUser }) => {
|
|
65
|
-
if (isUser) {
|
|
66
|
-
this.scrollDate = null;
|
|
67
|
-
}
|
|
68
|
-
};
|
|
69
|
-
}
|
|
70
|
-
render() {
|
|
71
|
-
const { context, props, state } = this;
|
|
72
|
-
const { options } = context;
|
|
73
|
-
const verticalScrolling = !props.forPrint && !internal_cjs.getIsHeightAuto(options);
|
|
74
|
-
const monthDateProfiles = this.splitDateProfileByMonth(context.dateProfileGenerator, props.dateProfile, context.dateEnv, options.fixedWeekCount, options.showNonCurrentDates);
|
|
75
|
-
const monthTitleFormat = this.buildMonthFormat(options.multiMonthTitleFormat, monthDateProfiles);
|
|
76
|
-
const { multiMonthMinWidth, multiMonthMaxColumns } = options;
|
|
77
|
-
const { innerWidth } = state;
|
|
78
|
-
let cols;
|
|
79
|
-
let computedMonthWidth;
|
|
80
|
-
let cssMonthWidth;
|
|
81
|
-
let hasLateralSiblings = false;
|
|
82
|
-
if (innerWidth != null) {
|
|
83
|
-
cols = Math.max(1, Math.min(multiMonthMaxColumns, Math.floor(innerWidth / multiMonthMinWidth)));
|
|
84
|
-
if (props.forPrint) {
|
|
85
|
-
cols = Math.min(cols, 2);
|
|
86
|
-
}
|
|
87
|
-
computedMonthWidth = innerWidth / cols;
|
|
88
|
-
cssMonthWidth = internal_cjs.fracToCssDim(1 / cols);
|
|
89
|
-
hasLateralSiblings = cols > 1;
|
|
90
|
-
}
|
|
91
|
-
return (preact_cjs.createElement(internal_cjs.NowTimer, { unit: "day" }, (nowDate, todayRange) => (preact_cjs.createElement(internal_cjs.ViewContainer, { viewSpec: context.viewSpec, className: internal_cjs.joinClassNames('fc-multimonth fc-border', (cols === 1) ?
|
|
92
|
-
'fc-multimonth-singlecol' :
|
|
93
|
-
'fc-multimonth-multicol',
|
|
94
|
-
// HACK for Safari. Can't do break-inside:avoid with flexbox items, likely b/c it's not standard:
|
|
95
|
-
// https://stackoverflow.com/a/60256345
|
|
96
|
-
!props.forPrint && 'fc-flex-col') },
|
|
97
|
-
preact_cjs.createElement(internal_cjs.Scroller, { vertical: verticalScrolling, className: verticalScrolling ? 'fc-liquid' : '', ref: this.scrollerRef },
|
|
98
|
-
preact_cjs.createElement("div", { role: 'list', "aria-labelledby": props.labelId, "aria-label": props.labelStr, className: 'fc-multimonth-inner', ref: this.innerElRef }, monthDateProfiles.map((monthDateProfile) => {
|
|
99
|
-
const monthStr = internal_cjs.formatIsoMonthStr(monthDateProfile.currentRange.start);
|
|
100
|
-
return (preact_cjs.createElement(SingleMonth, Object.assign({}, props, { key: monthStr, todayRange: todayRange, isoDateStr: monthStr, titleFormat: monthTitleFormat, dateProfile: monthDateProfile, width: cssMonthWidth, visibleWidth: computedMonthWidth, hasLateralSiblings: hasLateralSiblings })));
|
|
101
|
-
})))))));
|
|
102
|
-
}
|
|
103
|
-
// Lifecycle
|
|
104
|
-
// -----------------------------------------------------------------------------------------------
|
|
105
|
-
componentDidMount() {
|
|
106
|
-
this.resetScroll();
|
|
107
|
-
this.scrollerRef.current.addScrollEndListener(this.handleScrollEnd);
|
|
108
|
-
this.disconnectInnerWidth = internal_cjs.watchWidth(this.innerElRef.current, (innerWidth) => {
|
|
109
|
-
internal_cjs.afterSize(() => {
|
|
110
|
-
this.setState({ innerWidth });
|
|
111
|
-
});
|
|
112
|
-
});
|
|
113
|
-
}
|
|
114
|
-
componentDidUpdate(prevProps) {
|
|
115
|
-
if (prevProps.dateProfile !== this.props.dateProfile && this.context.options.scrollTimeReset) {
|
|
116
|
-
this.resetScroll();
|
|
117
|
-
}
|
|
118
|
-
else {
|
|
119
|
-
// NOT optimal to update so often
|
|
120
|
-
// TODO: isolate dependencies of scroll coordinate
|
|
121
|
-
this.applyScroll();
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
componentWillUnmount() {
|
|
125
|
-
this.scrollerRef.current.removeScrollEndListener(this.handleScrollEnd);
|
|
126
|
-
this.disconnectInnerWidth();
|
|
127
|
-
}
|
|
128
|
-
// Scrolling
|
|
129
|
-
// -----------------------------------------------------------------------------------------------
|
|
130
|
-
resetScroll() {
|
|
131
|
-
this.scrollDate = this.props.dateProfile.currentDate;
|
|
132
|
-
this.applyScroll();
|
|
133
|
-
}
|
|
134
|
-
applyScroll() {
|
|
135
|
-
if (this.scrollDate != null &&
|
|
136
|
-
this.state.innerWidth != null // render completed?
|
|
137
|
-
) {
|
|
138
|
-
const scroller = this.scrollerRef.current;
|
|
139
|
-
const innerEl = this.innerElRef.current;
|
|
140
|
-
const monthEl = innerEl.querySelector(`[data-date="${internal_cjs.formatIsoMonthStr(this.scrollDate)}"]`);
|
|
141
|
-
const scrollTop = Math.ceil(// for fractions, err on the side of scrolling further
|
|
142
|
-
monthEl.getBoundingClientRect().top -
|
|
143
|
-
innerEl.getBoundingClientRect().top);
|
|
144
|
-
scroller.scrollTo({ y: scrollTop });
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
// date profile
|
|
149
|
-
// -------------------------------------------------------------------------------------------------
|
|
150
|
-
const oneMonthDuration = internal_cjs.createDuration(1, 'month');
|
|
151
|
-
function splitDateProfileByMonth(dateProfileGenerator, dateProfile, dateEnv, fixedWeekCount, showNonCurrentDates) {
|
|
152
|
-
const { start, end } = dateProfile.currentRange;
|
|
153
|
-
let monthStart = start;
|
|
154
|
-
const monthDateProfiles = [];
|
|
155
|
-
while (monthStart.valueOf() < end.valueOf()) {
|
|
156
|
-
const monthEnd = dateEnv.add(monthStart, oneMonthDuration);
|
|
157
|
-
const currentRange = {
|
|
158
|
-
// yuck
|
|
159
|
-
start: dateProfileGenerator.skipHiddenDays(monthStart),
|
|
160
|
-
end: dateProfileGenerator.skipHiddenDays(monthEnd, -1, true),
|
|
161
|
-
};
|
|
162
|
-
let renderRange = internal_cjs$1.buildDayTableRenderRange({
|
|
163
|
-
currentRange,
|
|
164
|
-
snapToWeek: true,
|
|
165
|
-
fixedWeekCount,
|
|
166
|
-
dateEnv,
|
|
167
|
-
});
|
|
168
|
-
renderRange = {
|
|
169
|
-
// yuck
|
|
170
|
-
start: dateProfileGenerator.skipHiddenDays(renderRange.start),
|
|
171
|
-
end: dateProfileGenerator.skipHiddenDays(renderRange.end, -1, true),
|
|
172
|
-
};
|
|
173
|
-
const activeRange = dateProfile.activeRange ?
|
|
174
|
-
internal_cjs.intersectRanges(dateProfile.activeRange, showNonCurrentDates ? renderRange : currentRange) :
|
|
175
|
-
null;
|
|
176
|
-
monthDateProfiles.push({
|
|
177
|
-
currentDate: dateProfile.currentDate,
|
|
178
|
-
isValid: dateProfile.isValid,
|
|
179
|
-
validRange: dateProfile.validRange,
|
|
180
|
-
renderRange,
|
|
181
|
-
activeRange,
|
|
182
|
-
currentRange,
|
|
183
|
-
currentRangeUnit: 'month',
|
|
184
|
-
isRangeAllDay: true,
|
|
185
|
-
dateIncrement: dateProfile.dateIncrement,
|
|
186
|
-
slotMinTime: dateProfile.slotMaxTime,
|
|
187
|
-
slotMaxTime: dateProfile.slotMinTime,
|
|
188
|
-
});
|
|
189
|
-
monthStart = monthEnd;
|
|
190
|
-
}
|
|
191
|
-
return monthDateProfiles;
|
|
192
|
-
}
|
|
193
|
-
// date formatting
|
|
194
|
-
// -------------------------------------------------------------------------------------------------
|
|
195
|
-
const YEAR_MONTH_FORMATTER = internal_cjs.createFormatter({ year: 'numeric', month: 'long' });
|
|
196
|
-
const YEAR_FORMATTER = internal_cjs.createFormatter({ month: 'long' });
|
|
197
|
-
function buildMonthFormat(formatOverride, monthDateProfiles) {
|
|
198
|
-
return formatOverride ||
|
|
199
|
-
((monthDateProfiles[0].currentRange.start.getUTCFullYear() !==
|
|
200
|
-
monthDateProfiles[monthDateProfiles.length - 1].currentRange.start.getUTCFullYear())
|
|
201
|
-
? YEAR_MONTH_FORMATTER
|
|
202
|
-
: YEAR_FORMATTER);
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
const OPTION_REFINERS = {
|
|
206
|
-
multiMonthTitleFormat: internal_cjs.createFormatter,
|
|
207
|
-
multiMonthMaxColumns: Number,
|
|
208
|
-
multiMonthMinWidth: Number,
|
|
209
|
-
};
|
|
210
|
-
|
|
211
|
-
var css_248z = ".fc-media-screen .fc-multimonth-inner{display:flex;flex-direction:row;flex-wrap:wrap}.fc-media-print.fc-direction-ltr .fc-multimonth-inner>*{float:left}.fc-media-print.fc-direction-rtl .fc-multimonth-inner>*{float:right}.fc-media-print .fc-multimonth-inner:after{clear:both;content:\"\";display:block}.fc-multimonth-multicol .fc-multimonth-month{padding:1.2em}.fc-multimonth-singlecol .fc-multimonth-title{padding:.5em 0}.fc-multimonth-multicol .fc-multimonth-title{padding-bottom:1em}.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-body:not(.fc-multimonth-singlecol .fc-multimonth-month-outer:last-child .fc-multimonth-body),.fc-multimonth-header-row{border-bottom:1px solid var(--fc-border-color)}.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}";
|
|
212
|
-
internal_cjs.injectStyles(css_248z);
|
|
213
|
-
|
|
214
|
-
var index = index_cjs.createPlugin({
|
|
215
|
-
name: '@fullcalendar/multimonth',
|
|
216
|
-
initialView: 'multiMonthYear',
|
|
217
|
-
optionRefiners: OPTION_REFINERS,
|
|
218
|
-
views: {
|
|
219
|
-
multiMonth: {
|
|
220
|
-
component: MultiMonthView,
|
|
221
|
-
dateProfileGeneratorClass: internal_cjs$1.TableDateProfileGenerator,
|
|
222
|
-
multiMonthMinWidth: 350,
|
|
223
|
-
multiMonthMaxColumns: 3,
|
|
224
|
-
},
|
|
225
|
-
multiMonthYear: {
|
|
226
|
-
type: 'multiMonth',
|
|
227
|
-
duration: { years: 1 },
|
|
228
|
-
fixedWeekCount: true,
|
|
229
|
-
showNonCurrentDates: false, // TODO: looks bad when single-col layout
|
|
230
|
-
},
|
|
231
|
-
},
|
|
232
|
-
});
|
|
233
|
-
|
|
234
|
-
exports["default"] = index;
|
package/index.d.ts
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { PluginDef } from '@fullcalendar/core';
|
|
2
|
-
import { createFormatter } from '@fullcalendar/core/internal';
|
|
3
|
-
|
|
4
|
-
declare const OPTION_REFINERS: {
|
|
5
|
-
multiMonthTitleFormat: typeof createFormatter;
|
|
6
|
-
multiMonthMaxColumns: NumberConstructor;
|
|
7
|
-
multiMonthMinWidth: NumberConstructor;
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
type ExtraOptionRefiners = typeof OPTION_REFINERS;
|
|
11
|
-
declare module '@fullcalendar/core/internal' {
|
|
12
|
-
interface BaseOptionRefiners extends ExtraOptionRefiners {
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
//# sourceMappingURL=ambient.d.ts.map
|
|
16
|
-
|
|
17
|
-
declare const _default: PluginDef;
|
|
18
|
-
//# sourceMappingURL=index.d.ts.map
|
|
19
|
-
|
|
20
|
-
export { _default as default };
|
package/index.global.js
DELETED
|
@@ -1,241 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
FullCalendar Multi-Month Plugin v7.0.0-beta.4
|
|
3
|
-
Docs & License: https://fullcalendar.io/docs/multimonth-grid
|
|
4
|
-
(c) 2024 Adam Shaw
|
|
5
|
-
*/
|
|
6
|
-
FullCalendar.MultiMonth = (function (exports, core, internal$1, internal, preact) {
|
|
7
|
-
'use strict';
|
|
8
|
-
|
|
9
|
-
class SingleMonth extends internal.DateComponent {
|
|
10
|
-
constructor() {
|
|
11
|
-
super(...arguments);
|
|
12
|
-
// memo
|
|
13
|
-
this.buildDayTableModel = internal.memoize(internal$1.buildDayTableModel);
|
|
14
|
-
this.createDayHeaderFormatter = internal.memoize(internal$1.createDayHeaderFormatter);
|
|
15
|
-
this.buildDateRowConfig = internal.memoize(internal$1.buildDateRowConfig);
|
|
16
|
-
// internal
|
|
17
|
-
this.slicer = new internal$1.DayTableSlicer();
|
|
18
|
-
this.titleId = internal.getUniqueDomId();
|
|
19
|
-
}
|
|
20
|
-
render() {
|
|
21
|
-
const { props, context } = this;
|
|
22
|
-
const { dateProfile, forPrint } = props;
|
|
23
|
-
const { options } = context;
|
|
24
|
-
const dayTableModel = this.buildDayTableModel(dateProfile, context.dateProfileGenerator);
|
|
25
|
-
const slicedProps = this.slicer.sliceProps(props, dateProfile, options.nextDayThreshold, context, dayTableModel);
|
|
26
|
-
const dayHeaderFormat = this.createDayHeaderFormatter(options.dayHeaderFormat, false, // datesRepDistinctDays
|
|
27
|
-
dayTableModel.colCnt);
|
|
28
|
-
const rowConfig = this.buildDateRowConfig(dayTableModel.headerDates, false, // datesRepDistinctDays
|
|
29
|
-
dateProfile, props.todayRange, dayHeaderFormat, context);
|
|
30
|
-
const invAspectRatio = 1 / options.aspectRatio;
|
|
31
|
-
const invRowAspectRatio = invAspectRatio / dayTableModel.rowCnt;
|
|
32
|
-
const isHeaderSticky = !forPrint;
|
|
33
|
-
const isAspectRatio = !forPrint || props.hasLateralSiblings;
|
|
34
|
-
return (preact.createElement("div", { role: 'listitem', className: 'fc-multimonth-month-outer', style: { width: props.width } },
|
|
35
|
-
preact.createElement("div", { role: 'grid', "aria-labelledby": this.titleId, "data-date": props.isoDateStr, className: internal.joinClassNames('fc-multimonth-month', props.hasLateralSiblings && 'fc-break-inside-avoid') },
|
|
36
|
-
preact.createElement("div", { className: "fc-multimonth-header", style: {
|
|
37
|
-
marginBottom: isHeaderSticky ? internal.fracToCssDim(invRowAspectRatio) : undefined,
|
|
38
|
-
} },
|
|
39
|
-
preact.createElement("div", { id: this.titleId, className: 'fc-multimonth-title' }, context.dateEnv.format(props.dateProfile.currentRange.start, props.titleFormat)),
|
|
40
|
-
preact.createElement(internal$1.DayGridHeaderRow, Object.assign({}, rowConfig, { role: 'row', className: 'fc-multimonth-header-row' }))),
|
|
41
|
-
preact.createElement("div", { className: internal.joinClassNames('fc-multimonth-body', isAspectRatio && 'fc-rel'), style: {
|
|
42
|
-
marginTop: isHeaderSticky ? internal.fracToCssDim(-invRowAspectRatio) : undefined,
|
|
43
|
-
paddingBottom: isAspectRatio ? internal.fracToCssDim(invAspectRatio) : undefined,
|
|
44
|
-
} },
|
|
45
|
-
preact.createElement(internal$1.DayGridRows, { dateProfile: props.dateProfile, todayRange: props.todayRange, cellRows: dayTableModel.cellRows, className: isAspectRatio ? 'fc-fill' : '', forPrint: forPrint && !props.hasLateralSiblings, dayMaxEvents: forPrint ? undefined : options.dayMaxEvents, dayMaxEventRows: (forPrint && props.hasLateralSiblings) ? 1 : options.dayMaxEventRows,
|
|
46
|
-
// content
|
|
47
|
-
fgEventSegs: slicedProps.fgEventSegs, bgEventSegs: slicedProps.bgEventSegs, businessHourSegs: slicedProps.businessHourSegs, dateSelectionSegs: slicedProps.dateSelectionSegs, eventDrag: slicedProps.eventDrag, eventResize: slicedProps.eventResize, eventSelection: slicedProps.eventSelection,
|
|
48
|
-
// dimensions
|
|
49
|
-
visibleWidth: props.visibleWidth })))));
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
class MultiMonthView extends internal.DateComponent {
|
|
54
|
-
constructor() {
|
|
55
|
-
super(...arguments);
|
|
56
|
-
// memo
|
|
57
|
-
this.splitDateProfileByMonth = internal.memoize(splitDateProfileByMonth);
|
|
58
|
-
this.buildMonthFormat = internal.memoize(buildMonthFormat);
|
|
59
|
-
// ref
|
|
60
|
-
this.scrollerRef = preact.createRef();
|
|
61
|
-
this.innerElRef = preact.createRef(); // .fc-multimonth-inner
|
|
62
|
-
this.scrollDate = null;
|
|
63
|
-
this.handleScrollEnd = ({ isUser }) => {
|
|
64
|
-
if (isUser) {
|
|
65
|
-
this.scrollDate = null;
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
}
|
|
69
|
-
render() {
|
|
70
|
-
const { context, props, state } = this;
|
|
71
|
-
const { options } = context;
|
|
72
|
-
const verticalScrolling = !props.forPrint && !internal.getIsHeightAuto(options);
|
|
73
|
-
const monthDateProfiles = this.splitDateProfileByMonth(context.dateProfileGenerator, props.dateProfile, context.dateEnv, options.fixedWeekCount, options.showNonCurrentDates);
|
|
74
|
-
const monthTitleFormat = this.buildMonthFormat(options.multiMonthTitleFormat, monthDateProfiles);
|
|
75
|
-
const { multiMonthMinWidth, multiMonthMaxColumns } = options;
|
|
76
|
-
const { innerWidth } = state;
|
|
77
|
-
let cols;
|
|
78
|
-
let computedMonthWidth;
|
|
79
|
-
let cssMonthWidth;
|
|
80
|
-
let hasLateralSiblings = false;
|
|
81
|
-
if (innerWidth != null) {
|
|
82
|
-
cols = Math.max(1, Math.min(multiMonthMaxColumns, Math.floor(innerWidth / multiMonthMinWidth)));
|
|
83
|
-
if (props.forPrint) {
|
|
84
|
-
cols = Math.min(cols, 2);
|
|
85
|
-
}
|
|
86
|
-
computedMonthWidth = innerWidth / cols;
|
|
87
|
-
cssMonthWidth = internal.fracToCssDim(1 / cols);
|
|
88
|
-
hasLateralSiblings = cols > 1;
|
|
89
|
-
}
|
|
90
|
-
return (preact.createElement(internal.NowTimer, { unit: "day" }, (nowDate, todayRange) => (preact.createElement(internal.ViewContainer, { viewSpec: context.viewSpec, className: internal.joinClassNames('fc-multimonth fc-border', (cols === 1) ?
|
|
91
|
-
'fc-multimonth-singlecol' :
|
|
92
|
-
'fc-multimonth-multicol',
|
|
93
|
-
// HACK for Safari. Can't do break-inside:avoid with flexbox items, likely b/c it's not standard:
|
|
94
|
-
// https://stackoverflow.com/a/60256345
|
|
95
|
-
!props.forPrint && 'fc-flex-col') },
|
|
96
|
-
preact.createElement(internal.Scroller, { vertical: verticalScrolling, className: verticalScrolling ? 'fc-liquid' : '', ref: this.scrollerRef },
|
|
97
|
-
preact.createElement("div", { role: 'list', "aria-labelledby": props.labelId, "aria-label": props.labelStr, className: 'fc-multimonth-inner', ref: this.innerElRef }, monthDateProfiles.map((monthDateProfile) => {
|
|
98
|
-
const monthStr = internal.formatIsoMonthStr(monthDateProfile.currentRange.start);
|
|
99
|
-
return (preact.createElement(SingleMonth, Object.assign({}, props, { key: monthStr, todayRange: todayRange, isoDateStr: monthStr, titleFormat: monthTitleFormat, dateProfile: monthDateProfile, width: cssMonthWidth, visibleWidth: computedMonthWidth, hasLateralSiblings: hasLateralSiblings })));
|
|
100
|
-
})))))));
|
|
101
|
-
}
|
|
102
|
-
// Lifecycle
|
|
103
|
-
// -----------------------------------------------------------------------------------------------
|
|
104
|
-
componentDidMount() {
|
|
105
|
-
this.resetScroll();
|
|
106
|
-
this.scrollerRef.current.addScrollEndListener(this.handleScrollEnd);
|
|
107
|
-
this.disconnectInnerWidth = internal.watchWidth(this.innerElRef.current, (innerWidth) => {
|
|
108
|
-
internal.afterSize(() => {
|
|
109
|
-
this.setState({ innerWidth });
|
|
110
|
-
});
|
|
111
|
-
});
|
|
112
|
-
}
|
|
113
|
-
componentDidUpdate(prevProps) {
|
|
114
|
-
if (prevProps.dateProfile !== this.props.dateProfile && this.context.options.scrollTimeReset) {
|
|
115
|
-
this.resetScroll();
|
|
116
|
-
}
|
|
117
|
-
else {
|
|
118
|
-
// NOT optimal to update so often
|
|
119
|
-
// TODO: isolate dependencies of scroll coordinate
|
|
120
|
-
this.applyScroll();
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
componentWillUnmount() {
|
|
124
|
-
this.scrollerRef.current.removeScrollEndListener(this.handleScrollEnd);
|
|
125
|
-
this.disconnectInnerWidth();
|
|
126
|
-
}
|
|
127
|
-
// Scrolling
|
|
128
|
-
// -----------------------------------------------------------------------------------------------
|
|
129
|
-
resetScroll() {
|
|
130
|
-
this.scrollDate = this.props.dateProfile.currentDate;
|
|
131
|
-
this.applyScroll();
|
|
132
|
-
}
|
|
133
|
-
applyScroll() {
|
|
134
|
-
if (this.scrollDate != null &&
|
|
135
|
-
this.state.innerWidth != null // render completed?
|
|
136
|
-
) {
|
|
137
|
-
const scroller = this.scrollerRef.current;
|
|
138
|
-
const innerEl = this.innerElRef.current;
|
|
139
|
-
const monthEl = innerEl.querySelector(`[data-date="${internal.formatIsoMonthStr(this.scrollDate)}"]`);
|
|
140
|
-
const scrollTop = Math.ceil(// for fractions, err on the side of scrolling further
|
|
141
|
-
monthEl.getBoundingClientRect().top -
|
|
142
|
-
innerEl.getBoundingClientRect().top);
|
|
143
|
-
scroller.scrollTo({ y: scrollTop });
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
// date profile
|
|
148
|
-
// -------------------------------------------------------------------------------------------------
|
|
149
|
-
const oneMonthDuration = internal.createDuration(1, 'month');
|
|
150
|
-
function splitDateProfileByMonth(dateProfileGenerator, dateProfile, dateEnv, fixedWeekCount, showNonCurrentDates) {
|
|
151
|
-
const { start, end } = dateProfile.currentRange;
|
|
152
|
-
let monthStart = start;
|
|
153
|
-
const monthDateProfiles = [];
|
|
154
|
-
while (monthStart.valueOf() < end.valueOf()) {
|
|
155
|
-
const monthEnd = dateEnv.add(monthStart, oneMonthDuration);
|
|
156
|
-
const currentRange = {
|
|
157
|
-
// yuck
|
|
158
|
-
start: dateProfileGenerator.skipHiddenDays(monthStart),
|
|
159
|
-
end: dateProfileGenerator.skipHiddenDays(monthEnd, -1, true),
|
|
160
|
-
};
|
|
161
|
-
let renderRange = internal$1.buildDayTableRenderRange({
|
|
162
|
-
currentRange,
|
|
163
|
-
snapToWeek: true,
|
|
164
|
-
fixedWeekCount,
|
|
165
|
-
dateEnv,
|
|
166
|
-
});
|
|
167
|
-
renderRange = {
|
|
168
|
-
// yuck
|
|
169
|
-
start: dateProfileGenerator.skipHiddenDays(renderRange.start),
|
|
170
|
-
end: dateProfileGenerator.skipHiddenDays(renderRange.end, -1, true),
|
|
171
|
-
};
|
|
172
|
-
const activeRange = dateProfile.activeRange ?
|
|
173
|
-
internal.intersectRanges(dateProfile.activeRange, showNonCurrentDates ? renderRange : currentRange) :
|
|
174
|
-
null;
|
|
175
|
-
monthDateProfiles.push({
|
|
176
|
-
currentDate: dateProfile.currentDate,
|
|
177
|
-
isValid: dateProfile.isValid,
|
|
178
|
-
validRange: dateProfile.validRange,
|
|
179
|
-
renderRange,
|
|
180
|
-
activeRange,
|
|
181
|
-
currentRange,
|
|
182
|
-
currentRangeUnit: 'month',
|
|
183
|
-
isRangeAllDay: true,
|
|
184
|
-
dateIncrement: dateProfile.dateIncrement,
|
|
185
|
-
slotMinTime: dateProfile.slotMaxTime,
|
|
186
|
-
slotMaxTime: dateProfile.slotMinTime,
|
|
187
|
-
});
|
|
188
|
-
monthStart = monthEnd;
|
|
189
|
-
}
|
|
190
|
-
return monthDateProfiles;
|
|
191
|
-
}
|
|
192
|
-
// date formatting
|
|
193
|
-
// -------------------------------------------------------------------------------------------------
|
|
194
|
-
const YEAR_MONTH_FORMATTER = internal.createFormatter({ year: 'numeric', month: 'long' });
|
|
195
|
-
const YEAR_FORMATTER = internal.createFormatter({ month: 'long' });
|
|
196
|
-
function buildMonthFormat(formatOverride, monthDateProfiles) {
|
|
197
|
-
return formatOverride ||
|
|
198
|
-
((monthDateProfiles[0].currentRange.start.getUTCFullYear() !==
|
|
199
|
-
monthDateProfiles[monthDateProfiles.length - 1].currentRange.start.getUTCFullYear())
|
|
200
|
-
? YEAR_MONTH_FORMATTER
|
|
201
|
-
: YEAR_FORMATTER);
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
const OPTION_REFINERS = {
|
|
205
|
-
multiMonthTitleFormat: internal.createFormatter,
|
|
206
|
-
multiMonthMaxColumns: Number,
|
|
207
|
-
multiMonthMinWidth: Number,
|
|
208
|
-
};
|
|
209
|
-
|
|
210
|
-
var css_248z = ".fc-media-screen .fc-multimonth-inner{display:flex;flex-direction:row;flex-wrap:wrap}.fc-media-print.fc-direction-ltr .fc-multimonth-inner>*{float:left}.fc-media-print.fc-direction-rtl .fc-multimonth-inner>*{float:right}.fc-media-print .fc-multimonth-inner:after{clear:both;content:\"\";display:block}.fc-multimonth-multicol .fc-multimonth-month{padding:1.2em}.fc-multimonth-singlecol .fc-multimonth-title{padding:.5em 0}.fc-multimonth-multicol .fc-multimonth-title{padding-bottom:1em}.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-body:not(.fc-multimonth-singlecol .fc-multimonth-month-outer:last-child .fc-multimonth-body),.fc-multimonth-header-row{border-bottom:1px solid var(--fc-border-color)}.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}";
|
|
211
|
-
internal.injectStyles(css_248z);
|
|
212
|
-
|
|
213
|
-
var plugin = core.createPlugin({
|
|
214
|
-
name: '@fullcalendar/multimonth',
|
|
215
|
-
initialView: 'multiMonthYear',
|
|
216
|
-
optionRefiners: OPTION_REFINERS,
|
|
217
|
-
views: {
|
|
218
|
-
multiMonth: {
|
|
219
|
-
component: MultiMonthView,
|
|
220
|
-
dateProfileGeneratorClass: internal$1.TableDateProfileGenerator,
|
|
221
|
-
multiMonthMinWidth: 350,
|
|
222
|
-
multiMonthMaxColumns: 3,
|
|
223
|
-
},
|
|
224
|
-
multiMonthYear: {
|
|
225
|
-
type: 'multiMonth',
|
|
226
|
-
duration: { years: 1 },
|
|
227
|
-
fixedWeekCount: true,
|
|
228
|
-
showNonCurrentDates: false, // TODO: looks bad when single-col layout
|
|
229
|
-
},
|
|
230
|
-
},
|
|
231
|
-
});
|
|
232
|
-
|
|
233
|
-
core.globalPlugins.push(plugin);
|
|
234
|
-
|
|
235
|
-
exports["default"] = plugin;
|
|
236
|
-
|
|
237
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
238
|
-
|
|
239
|
-
return exports;
|
|
240
|
-
|
|
241
|
-
})({}, FullCalendar, FullCalendar.DayGrid.Internal, FullCalendar.Internal, FullCalendar.Preact);
|
package/index.global.min.js
DELETED
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
FullCalendar Multi-Month Plugin v7.0.0-beta.4
|
|
3
|
-
Docs & License: https://fullcalendar.io/docs/multimonth-grid
|
|
4
|
-
(c) 2024 Adam Shaw
|
|
5
|
-
*/
|
|
6
|
-
FullCalendar.MultiMonth=function(e,t,i,n,l){"use strict";class r extends n.DateComponent{constructor(){super(...arguments),this.buildDayTableModel=n.memoize(i.buildDayTableModel),this.createDayHeaderFormatter=n.memoize(i.createDayHeaderFormatter),this.buildDateRowConfig=n.memoize(i.buildDateRowConfig),this.slicer=new i.DayTableSlicer,this.titleId=n.getUniqueDomId()}render(){const{props:e,context:t}=this,{dateProfile:r,forPrint:o}=e,{options:a}=t,s=this.buildDayTableModel(r,t.dateProfileGenerator),c=this.slicer.sliceProps(e,r,a.nextDayThreshold,t,s),m=this.createDayHeaderFormatter(a.dayHeaderFormat,!1,s.colCnt),d=this.buildDateRowConfig(s.headerDates,!1,r,e.todayRange,m,t),h=1/a.aspectRatio,u=h/s.rowCnt,f=!o,g=!o||e.hasLateralSiblings;return l.createElement("div",{role:"listitem",className:"fc-multimonth-month-outer",style:{width:e.width}},l.createElement("div",{role:"grid","aria-labelledby":this.titleId,"data-date":e.isoDateStr,className:n.joinClassNames("fc-multimonth-month",e.hasLateralSiblings&&"fc-break-inside-avoid")},l.createElement("div",{className:"fc-multimonth-header",style:{marginBottom:f?n.fracToCssDim(u):void 0}},l.createElement("div",{id:this.titleId,className:"fc-multimonth-title"},t.dateEnv.format(e.dateProfile.currentRange.start,e.titleFormat)),l.createElement(i.DayGridHeaderRow,Object.assign({},d,{role:"row",className:"fc-multimonth-header-row"}))),l.createElement("div",{className:n.joinClassNames("fc-multimonth-body",g&&"fc-rel"),style:{marginTop:f?n.fracToCssDim(-u):void 0,paddingBottom:g?n.fracToCssDim(h):void 0}},l.createElement(i.DayGridRows,{dateProfile:e.dateProfile,todayRange:e.todayRange,cellRows:s.cellRows,className:g?"fc-fill":"",forPrint:o&&!e.hasLateralSiblings,dayMaxEvents:o?void 0:a.dayMaxEvents,dayMaxEventRows:o&&e.hasLateralSiblings?1:a.dayMaxEventRows,fgEventSegs:c.fgEventSegs,bgEventSegs:c.bgEventSegs,businessHourSegs:c.businessHourSegs,dateSelectionSegs:c.dateSelectionSegs,eventDrag:c.eventDrag,eventResize:c.eventResize,eventSelection:c.eventSelection,visibleWidth:e.visibleWidth}))))}}class o extends n.DateComponent{constructor(){super(...arguments),this.splitDateProfileByMonth=n.memoize(s),this.buildMonthFormat=n.memoize(d),this.scrollerRef=l.createRef(),this.innerElRef=l.createRef(),this.scrollDate=null,this.handleScrollEnd=({isUser:e})=>{e&&(this.scrollDate=null)}}render(){const{context:e,props:t,state:i}=this,{options:o}=e,a=!t.forPrint&&!n.getIsHeightAuto(o),s=this.splitDateProfileByMonth(e.dateProfileGenerator,t.dateProfile,e.dateEnv,o.fixedWeekCount,o.showNonCurrentDates),c=this.buildMonthFormat(o.multiMonthTitleFormat,s),{multiMonthMinWidth:m,multiMonthMaxColumns:d}=o,{innerWidth:h}=i;let u,f,g,p=!1;return null!=h&&(u=Math.max(1,Math.min(d,Math.floor(h/m))),t.forPrint&&(u=Math.min(u,2)),f=h/u,g=n.fracToCssDim(1/u),p=u>1),l.createElement(n.NowTimer,{unit:"day"},(i,o)=>l.createElement(n.ViewContainer,{viewSpec:e.viewSpec,className:n.joinClassNames("fc-multimonth fc-border",1===u?"fc-multimonth-singlecol":"fc-multimonth-multicol",!t.forPrint&&"fc-flex-col")},l.createElement(n.Scroller,{vertical:a,className:a?"fc-liquid":"",ref:this.scrollerRef},l.createElement("div",{role:"list","aria-labelledby":t.labelId,"aria-label":t.labelStr,className:"fc-multimonth-inner",ref:this.innerElRef},s.map(e=>{const i=n.formatIsoMonthStr(e.currentRange.start);return l.createElement(r,Object.assign({},t,{key:i,todayRange:o,isoDateStr:i,titleFormat:c,dateProfile:e,width:g,visibleWidth:f,hasLateralSiblings:p}))})))))}componentDidMount(){this.resetScroll(),this.scrollerRef.current.addScrollEndListener(this.handleScrollEnd),this.disconnectInnerWidth=n.watchWidth(this.innerElRef.current,e=>{n.afterSize(()=>{this.setState({innerWidth:e})})})}componentDidUpdate(e){e.dateProfile!==this.props.dateProfile&&this.context.options.scrollTimeReset?this.resetScroll():this.applyScroll()}componentWillUnmount(){this.scrollerRef.current.removeScrollEndListener(this.handleScrollEnd),this.disconnectInnerWidth()}resetScroll(){this.scrollDate=this.props.dateProfile.currentDate,this.applyScroll()}applyScroll(){if(null!=this.scrollDate&&null!=this.state.innerWidth){const e=this.scrollerRef.current,t=this.innerElRef.current,i=t.querySelector(`[data-date="${n.formatIsoMonthStr(this.scrollDate)}"]`),l=Math.ceil(i.getBoundingClientRect().top-t.getBoundingClientRect().top);e.scrollTo({y:l})}}}const a=n.createDuration(1,"month");function s(e,t,l,r,o){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=i.buildDayTableRenderRange({currentRange:c,snapToWeek:!0,fixedWeekCount:r,dateEnv:l});h={start:e.skipHiddenDays(h.start),end:e.skipHiddenDays(h.end,-1,!0)};const u=t.activeRange?n.intersectRanges(t.activeRange,o?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=n.createFormatter({year:"numeric",month:"long"}),m=n.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:n.createFormatter,multiMonthMaxColumns:Number,multiMonthMinWidth:Number};n.injectStyles('.fc-media-screen .fc-multimonth-inner{display:flex;flex-direction:row;flex-wrap:wrap}.fc-media-print.fc-direction-ltr .fc-multimonth-inner>*{float:left}.fc-media-print.fc-direction-rtl .fc-multimonth-inner>*{float:right}.fc-media-print .fc-multimonth-inner:after{clear:both;content:"";display:block}.fc-multimonth-multicol .fc-multimonth-month{padding:1.2em}.fc-multimonth-singlecol .fc-multimonth-title{padding:.5em 0}.fc-multimonth-multicol .fc-multimonth-title{padding-bottom:1em}.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-body:not(.fc-multimonth-singlecol .fc-multimonth-month-outer:last-child .fc-multimonth-body),.fc-multimonth-header-row{border-bottom:1px solid var(--fc-border-color)}.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:o,dateProfileGeneratorClass:i.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);
|