diff options
Diffstat (limited to 'public/js/fullcalendar/packages/multimonth/index.global.js')
-rw-r--r-- | public/js/fullcalendar/packages/multimonth/index.global.js | 252 |
1 files changed, 252 insertions, 0 deletions
diff --git a/public/js/fullcalendar/packages/multimonth/index.global.js b/public/js/fullcalendar/packages/multimonth/index.global.js new file mode 100644 index 0000000..2748d04 --- /dev/null +++ b/public/js/fullcalendar/packages/multimonth/index.global.js | |||
@@ -0,0 +1,252 @@ | |||
1 | /*! | ||
2 | FullCalendar Multi-Month Plugin v6.1.17 | ||
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 | this.buildDayTableModel = internal.memoize(internal$1.buildDayTableModel); | ||
13 | this.slicer = new internal$1.DayTableSlicer(); | ||
14 | this.state = { | ||
15 | labelId: internal.getUniqueDomId(), | ||
16 | }; | ||
17 | } | ||
18 | render() { | ||
19 | const { props, state, context } = this; | ||
20 | const { dateProfile, forPrint } = props; | ||
21 | const { options } = context; | ||
22 | const dayTableModel = this.buildDayTableModel(dateProfile, context.dateProfileGenerator); | ||
23 | const slicedProps = this.slicer.sliceProps(props, dateProfile, options.nextDayThreshold, context, dayTableModel); | ||
24 | // ensure single-month has aspect ratio | ||
25 | const tableHeight = props.tableWidth != null ? props.tableWidth / options.aspectRatio : null; | ||
26 | const rowCnt = dayTableModel.cells.length; | ||
27 | const rowHeight = tableHeight != null ? tableHeight / rowCnt : null; | ||
28 | 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 }, | ||
29 | preact.createElement("div", { className: "fc-multimonth-header", style: { marginBottom: rowHeight }, role: "presentation" }, | ||
30 | preact.createElement("div", { className: "fc-multimonth-title", id: state.labelId }, context.dateEnv.format(props.dateProfile.currentRange.start, props.titleFormat)), | ||
31 | preact.createElement("table", { className: [ | ||
32 | 'fc-multimonth-header-table', | ||
33 | context.theme.getClass('table'), | ||
34 | ].join(' '), role: "presentation" }, | ||
35 | preact.createElement("thead", { role: "rowgroup" }, | ||
36 | preact.createElement(internal.DayHeader, { dateProfile: props.dateProfile, dates: dayTableModel.headerDates, datesRepDistinctDays: false })))), | ||
37 | preact.createElement("div", { className: [ | ||
38 | 'fc-multimonth-daygrid', | ||
39 | 'fc-daygrid', | ||
40 | 'fc-daygrid-body', | ||
41 | !forPrint && 'fc-daygrid-body-balanced', | ||
42 | forPrint && 'fc-daygrid-body-unbalanced', | ||
43 | forPrint && 'fc-daygrid-body-natural', | ||
44 | ].join(' '), style: { marginTop: -rowHeight } }, | ||
45 | preact.createElement("table", { className: [ | ||
46 | 'fc-multimonth-daygrid-table', | ||
47 | context.theme.getClass('table'), | ||
48 | ].join(' '), style: { height: forPrint ? '' : tableHeight }, role: "presentation" }, | ||
49 | preact.createElement("tbody", { role: "rowgroup" }, | ||
50 | 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 }))))))); | ||
51 | } | ||
52 | } | ||
53 | |||
54 | class MultiMonthView extends internal.DateComponent { | ||
55 | constructor() { | ||
56 | super(...arguments); | ||
57 | this.splitDateProfileByMonth = internal.memoize(splitDateProfileByMonth); | ||
58 | this.buildMonthFormat = internal.memoize(buildMonthFormat); | ||
59 | this.scrollElRef = preact.createRef(); | ||
60 | this.firstMonthElRef = preact.createRef(); | ||
61 | this.needsScrollReset = false; | ||
62 | this.handleSizing = (isForced) => { | ||
63 | if (isForced) { | ||
64 | this.updateSize(); | ||
65 | } | ||
66 | }; | ||
67 | } | ||
68 | render() { | ||
69 | const { context, props, state } = this; | ||
70 | const { options } = context; | ||
71 | const { clientWidth, clientHeight } = state; | ||
72 | const monthHPadding = state.monthHPadding || 0; | ||
73 | const colCount = Math.min(clientWidth != null ? | ||
74 | Math.floor(clientWidth / (options.multiMonthMinWidth + monthHPadding)) : | ||
75 | 1, options.multiMonthMaxColumns) || 1; | ||
76 | const monthWidthPct = (100 / colCount) + '%'; | ||
77 | const monthTableWidth = clientWidth == null ? null : | ||
78 | (clientWidth / colCount) - monthHPadding; | ||
79 | const isLegitSingleCol = clientWidth != null && colCount === 1; | ||
80 | const monthDateProfiles = this.splitDateProfileByMonth(context.dateProfileGenerator, props.dateProfile, context.dateEnv, isLegitSingleCol ? false : options.fixedWeekCount, options.showNonCurrentDates); | ||
81 | const monthTitleFormat = this.buildMonthFormat(options.multiMonthTitleFormat, monthDateProfiles); | ||
82 | const rootClassNames = [ | ||
83 | 'fc-multimonth', | ||
84 | isLegitSingleCol ? | ||
85 | 'fc-multimonth-singlecol' : | ||
86 | 'fc-multimonth-multicol', | ||
87 | (monthTableWidth != null && monthTableWidth < 400) ? | ||
88 | 'fc-multimonth-compact' : | ||
89 | '', | ||
90 | props.isHeightAuto ? | ||
91 | '' : | ||
92 | 'fc-scroller', // for AutoScroller | ||
93 | ]; | ||
94 | return (preact.createElement(internal.ViewContainer, { elRef: this.scrollElRef, elClasses: rootClassNames, viewSpec: context.viewSpec }, monthDateProfiles.map((monthDateProfile, i) => { | ||
95 | const monthStr = internal.formatIsoMonthStr(monthDateProfile.currentRange.start); | ||
96 | 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 }))); | ||
97 | }))); | ||
98 | } | ||
99 | componentDidMount() { | ||
100 | this.updateSize(); | ||
101 | this.context.addResizeHandler(this.handleSizing); | ||
102 | this.requestScrollReset(); | ||
103 | } | ||
104 | componentDidUpdate(prevProps) { | ||
105 | if (!internal.isPropsEqual(prevProps, this.props)) { // an external change? | ||
106 | this.handleSizing(false); | ||
107 | } | ||
108 | if (prevProps.dateProfile !== this.props.dateProfile) { | ||
109 | this.requestScrollReset(); | ||
110 | } | ||
111 | else { | ||
112 | this.flushScrollReset(); | ||
113 | } | ||
114 | } | ||
115 | componentWillUnmount() { | ||
116 | this.context.removeResizeHandler(this.handleSizing); | ||
117 | } | ||
118 | updateSize() { | ||
119 | const scrollEl = this.scrollElRef.current; | ||
120 | const firstMonthEl = this.firstMonthElRef.current; | ||
121 | if (scrollEl) { | ||
122 | this.setState({ | ||
123 | clientWidth: scrollEl.clientWidth, | ||
124 | clientHeight: scrollEl.clientHeight, | ||
125 | }); | ||
126 | } | ||
127 | if (firstMonthEl && scrollEl) { | ||
128 | if (this.state.monthHPadding == null) { // always remember initial non-zero value | ||
129 | this.setState({ | ||
130 | monthHPadding: scrollEl.clientWidth - // go within padding | ||
131 | firstMonthEl.firstChild.offsetWidth, | ||
132 | }); | ||
133 | } | ||
134 | } | ||
135 | } | ||
136 | requestScrollReset() { | ||
137 | this.needsScrollReset = true; | ||
138 | this.flushScrollReset(); | ||
139 | } | ||
140 | flushScrollReset() { | ||
141 | if (this.needsScrollReset && | ||
142 | this.state.monthHPadding != null // indicates sizing already happened | ||
143 | ) { | ||
144 | const { currentDate } = this.props.dateProfile; | ||
145 | const scrollEl = this.scrollElRef.current; | ||
146 | const monthEl = scrollEl.querySelector(`[data-date="${internal.formatIsoMonthStr(currentDate)}"]`); | ||
147 | scrollEl.scrollTop = monthEl.getBoundingClientRect().top - | ||
148 | this.firstMonthElRef.current.getBoundingClientRect().top; | ||
149 | this.needsScrollReset = false; | ||
150 | } | ||
151 | } | ||
152 | // workaround for when queued setState render (w/ clientWidth) gets cancelled because | ||
153 | // subsequent update and shouldComponentUpdate says not to render :( | ||
154 | shouldComponentUpdate() { | ||
155 | return true; | ||
156 | } | ||
157 | } | ||
158 | // date profile | ||
159 | // ------------------------------------------------------------------------------------------------- | ||
160 | const oneMonthDuration = internal.createDuration(1, 'month'); | ||
161 | function splitDateProfileByMonth(dateProfileGenerator, dateProfile, dateEnv, fixedWeekCount, showNonCurrentDates) { | ||
162 | const { start, end } = dateProfile.currentRange; | ||
163 | let monthStart = start; | ||
164 | const monthDateProfiles = []; | ||
165 | while (monthStart.valueOf() < end.valueOf()) { | ||
166 | const monthEnd = dateEnv.add(monthStart, oneMonthDuration); | ||
167 | const currentRange = { | ||
168 | // yuck | ||
169 | start: dateProfileGenerator.skipHiddenDays(monthStart), | ||
170 | end: dateProfileGenerator.skipHiddenDays(monthEnd, -1, true), | ||
171 | }; | ||
172 | let renderRange = internal$1.buildDayTableRenderRange({ | ||
173 | currentRange, | ||
174 | snapToWeek: true, | ||
175 | fixedWeekCount, | ||
176 | dateEnv, | ||
177 | }); | ||
178 | renderRange = { | ||
179 | // yuck | ||
180 | start: dateProfileGenerator.skipHiddenDays(renderRange.start), | ||
181 | end: dateProfileGenerator.skipHiddenDays(renderRange.end, -1, true), | ||
182 | }; | ||
183 | const activeRange = dateProfile.activeRange ? | ||
184 | internal.intersectRanges(dateProfile.activeRange, showNonCurrentDates ? renderRange : currentRange) : | ||
185 | null; | ||
186 | monthDateProfiles.push({ | ||
187 | currentDate: dateProfile.currentDate, | ||
188 | isValid: dateProfile.isValid, | ||
189 | validRange: dateProfile.validRange, | ||
190 | renderRange, | ||
191 | activeRange, | ||
192 | currentRange, | ||
193 | currentRangeUnit: 'month', | ||
194 | isRangeAllDay: true, | ||
195 | dateIncrement: dateProfile.dateIncrement, | ||
196 | slotMinTime: dateProfile.slotMaxTime, | ||
197 | slotMaxTime: dateProfile.slotMinTime, | ||
198 | }); | ||
199 | monthStart = monthEnd; | ||
200 | } | ||
201 | return monthDateProfiles; | ||
202 | } | ||
203 | // date formatting | ||
204 | // ------------------------------------------------------------------------------------------------- | ||
205 | const YEAR_MONTH_FORMATTER = internal.createFormatter({ year: 'numeric', month: 'long' }); | ||
206 | const YEAR_FORMATTER = internal.createFormatter({ month: 'long' }); | ||
207 | function buildMonthFormat(formatOverride, monthDateProfiles) { | ||
208 | return formatOverride || | ||
209 | ((monthDateProfiles[0].currentRange.start.getUTCFullYear() !== | ||
210 | monthDateProfiles[monthDateProfiles.length - 1].currentRange.start.getUTCFullYear()) | ||
211 | ? YEAR_MONTH_FORMATTER | ||
212 | : YEAR_FORMATTER); | ||
213 | } | ||
214 | |||
215 | const OPTION_REFINERS = { | ||
216 | multiMonthTitleFormat: internal.createFormatter, | ||
217 | multiMonthMaxColumns: Number, | ||
218 | multiMonthMinWidth: Number, | ||
219 | }; | ||
220 | |||
221 | 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}"; | ||
222 | internal.injectStyles(css_248z); | ||
223 | |||
224 | var plugin = core.createPlugin({ | ||
225 | name: '@fullcalendar/multimonth', | ||
226 | initialView: 'multiMonthYear', | ||
227 | optionRefiners: OPTION_REFINERS, | ||
228 | views: { | ||
229 | multiMonth: { | ||
230 | component: MultiMonthView, | ||
231 | dateProfileGeneratorClass: internal$1.TableDateProfileGenerator, | ||
232 | multiMonthMinWidth: 350, | ||
233 | multiMonthMaxColumns: 3, | ||
234 | }, | ||
235 | multiMonthYear: { | ||
236 | type: 'multiMonth', | ||
237 | duration: { years: 1 }, | ||
238 | fixedWeekCount: true, | ||
239 | showNonCurrentDates: false, | ||
240 | }, | ||
241 | }, | ||
242 | }); | ||
243 | |||
244 | core.globalPlugins.push(plugin); | ||
245 | |||
246 | exports["default"] = plugin; | ||
247 | |||
248 | Object.defineProperty(exports, '__esModule', { value: true }); | ||
249 | |||
250 | return exports; | ||
251 | |||
252 | })({}, FullCalendar, FullCalendar.DayGrid.Internal, FullCalendar.Internal, FullCalendar.Preact); | ||