@fullcalendar/daygrid 7.0.0-beta.1 → 7.0.0-beta.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.
Files changed (6) hide show
  1. package/index.global.js +580 -621
  2. package/index.global.min.js +2 -2
  3. package/internal.cjs +614 -655
  4. package/internal.d.ts +130 -172
  5. package/internal.js +611 -653
  6. package/package.json +2 -2
package/index.global.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- FullCalendar Day Grid Plugin v7.0.0-beta.1
2
+ FullCalendar Day Grid Plugin v7.0.0-beta.3
3
3
  Docs & License: https://fullcalendar.io/docs/month-view
4
4
  (c) 2024 Adam Shaw
5
5
  */
@@ -16,155 +16,90 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
16
16
  }
17
17
  }
18
18
 
19
- function renderInner(renderProps) {
20
- return renderProps.text;
21
- }
22
- function buildDayTableModel(dateProfile, dateProfileGenerator) {
23
- let daySeries = new internal$1.DaySeriesModel(dateProfile.renderRange, dateProfileGenerator);
24
- return new internal$1.DayTableModel(daySeries, /year|month|week/.test(dateProfile.currentRangeUnit));
25
- }
26
- function computeColWidth(colCnt, colMinWidth, viewportWidth) {
27
- if (viewportWidth == null) {
28
- return [undefined, undefined];
29
- }
30
- const colTempWidth = viewportWidth / colCnt;
31
- if (colTempWidth < colMinWidth) {
32
- return [colMinWidth * colCnt, colMinWidth];
33
- }
34
- return [viewportWidth, undefined];
35
- }
36
- function buildHeaderTiers(dates, datesRepDistinctDays) {
37
- return [
38
- datesRepDistinctDays
39
- ? dates.map((date) => ({ colSpan: 1, date }))
40
- : dates.map((date) => ({ colSpan: 1, dow: date.getUTCDay() }))
41
- ];
42
- }
43
- // Positioning
19
+ // TODO: converge types with DayTableCell and DayCellContainer (the component) and refineRenderProps
20
+ // the generation of DayTableCell will be distinct (for the BODY cells)
21
+ // but can share some of the same types/utils
22
+ // Date Cells
44
23
  // -------------------------------------------------------------------------------------------------
45
- function computeTopFromDate(date, cellRows, rowHeightMap, adjust = 0) {
46
- let top = 0;
47
- for (const cells of cellRows) {
48
- const start = cells[0].date;
49
- const end = cells[cells.length - 1].date;
50
- const key = start.toISOString();
51
- if (date >= start && date <= end) {
52
- return top;
53
- }
54
- const rowHeight = rowHeightMap.get(key);
55
- if (rowHeight == null) {
56
- return; // denote unknown
57
- }
58
- top += rowHeight + adjust;
59
- }
60
- return top;
61
- }
62
- function computeHorizontalsFromSeg(seg, colWidth, colCnt, isRtl) {
63
- let left;
64
- let right;
65
- let width;
66
- if (colWidth != null) {
67
- width = (seg.lastCol - seg.firstCol + 1) * colWidth;
68
- if (isRtl) {
69
- right = seg.firstCol * colWidth;
70
- }
71
- else {
72
- left = seg.firstCol * colWidth;
73
- }
74
- }
75
- else {
76
- const colWidthFrac = 1 / colCnt;
77
- width = internal$1.fracToCssDim((seg.lastCol - seg.firstCol + 1) * colWidthFrac);
78
- if (isRtl) {
79
- right = internal$1.fracToCssDim(seg.firstCol * colWidthFrac);
80
- }
81
- else {
82
- left = internal$1.fracToCssDim(seg.firstCol * colWidthFrac);
83
- }
84
- }
85
- return { left, right, width };
86
- }
87
- function computeColFromPosition(positionLeft, elWidth, colWidth, colCnt, isRtl) {
88
- const realColWidth = colWidth != null ? colWidth : elWidth / colCnt;
89
- const colFromLeft = Math.floor(positionLeft / realColWidth);
90
- const col = isRtl ? (colCnt - colFromLeft - 1) : colFromLeft;
91
- const left = colFromLeft * realColWidth;
92
- const right = left + realColWidth;
93
- return { col, left, right };
94
- }
95
- function computeRowFromPosition(positionTop, cellRows, rowHeightMap) {
96
- let row = 0;
97
- let top = 0;
98
- let bottom = 0;
99
- for (const cells of cellRows) {
100
- const key = cells[0].key;
101
- top = bottom;
102
- bottom = top + rowHeightMap.get(key);
103
- if (positionTop < bottom) {
104
- break;
105
- }
106
- row++;
107
- }
108
- return { row, top, bottom };
24
+ const WEEKDAY_FORMAT = internal$1.createFormatter({ weekday: 'long' });
25
+ const firstSunday = new Date(259200000);
26
+ function buildDateRowConfigs(...args) {
27
+ return [buildDateRowConfig(...args)];
109
28
  }
110
- // Hit Element
111
- // -------------------------------------------------------------------------------------------------
112
- function getRowEl(rootEl, row) {
113
- return rootEl.querySelectorAll(':scope > [role=row]')[row];
29
+ /*
30
+ Should this receive resource data attributes?
31
+ Or ResourceApi object itself?
32
+ */
33
+ function buildDateRowConfig(dates, datesRepDistinctDays, dateProfile, todayRange, dayHeaderFormat, // TODO: rename to dateHeaderFormat?
34
+ context, colSpan) {
35
+ return {
36
+ renderConfig: buildDateRenderConfig(context),
37
+ dataConfigs: buildDateDataConfigs(dates, datesRepDistinctDays, dateProfile, todayRange, dayHeaderFormat, context, colSpan)
38
+ };
114
39
  }
115
- function getCellEl(rowEl, col) {
116
- return rowEl.querySelectorAll(':scope > [role=gridcell]')[col];
40
+ function buildDateRenderConfig(context) {
41
+ const { options } = context;
42
+ return {
43
+ generatorName: 'dayHeaderContent',
44
+ customGenerator: options.dayHeaderContent,
45
+ classNameGenerator: options.dayHeaderClassNames,
46
+ didMount: options.dayHeaderDidMount,
47
+ willUnmount: options.dayHeaderWillUnmount,
48
+ };
117
49
  }
118
-
119
- class DateHeaderCell extends internal$1.BaseComponent {
120
- constructor() {
121
- super(...arguments);
122
- // ref
123
- this.innerElRef = preact.createRef();
124
- }
125
- render() {
126
- let { props, context } = this;
127
- let { dateProfile, date, extraRenderProps, extraDataAttrs } = props;
128
- let { dateEnv, options, theme, viewApi } = context;
129
- let dayMeta = internal$1.getDateMeta(date, props.todayRange, null, dateProfile);
130
- let text = dateEnv.format(date, props.dayHeaderFormat);
131
- let navLinkAttrs = (!dayMeta.isDisabled && props.navLink)
132
- ? internal$1.buildNavLinkAttrs(context, date)
133
- : {};
134
- let renderProps = Object.assign(Object.assign(Object.assign({ date: dateEnv.toDate(date), view: viewApi }, extraRenderProps), { text }), dayMeta);
135
- return (preact.createElement(internal$1.ContentContainer, { elTag: 'div', elClasses: [
136
- ...internal$1.getDayClassNames(dayMeta, theme),
137
- ...(props.extraClassNames || []),
138
- 'fc-header-cell',
139
- 'fc-cell',
140
- props.colWidth != null ? '' : 'fc-liquid',
141
- 'fc-flex-column',
142
- 'fc-align-center',
143
- ], elAttrs: Object.assign({ 'data-date': !dayMeta.isDisabled ? internal$1.formatDayString(date) : undefined }, extraDataAttrs), elStyle: {
144
- width: props.colWidth != null // TODO: DRY
145
- ? props.colWidth * (props.colSpan || 1)
146
- : undefined,
147
- }, renderProps: renderProps, generatorName: "dayHeaderContent", customGenerator: options.dayHeaderContent, defaultGenerator: renderInner, classNameGenerator: options.dayHeaderClassNames, didMount: options.dayHeaderDidMount, willUnmount: options.dayHeaderWillUnmount }, (InnerContainer) => (preact.createElement("div", { ref: this.innerElRef, className: [
148
- 'fc-flex-column',
149
- props.isSticky ? 'fc-sticky-x' : '',
150
- ].join(' ') }, !dayMeta.isDisabled && (preact.createElement(InnerContainer, { elTag: "a", elAttrs: navLinkAttrs, elClasses: [
151
- 'fc-cell-inner',
152
- 'fc-padding-sm',
153
- ] }))))));
154
- }
155
- componentDidMount() {
156
- const innerEl = this.innerElRef.current; // TODO: make dynamic with useEffect
157
- // TODO: only attach this if refs props present
158
- this.disconectInnerHeight = internal$1.watchHeight(innerEl, (height) => {
159
- internal$1.setRef(this.props.innerHeightRef, height);
50
+ function buildDateDataConfigs(dates, datesRepDistinctDays, dateProfile, todayRange, dayHeaderFormat, // TODO: rename to dateHeaderFormat?
51
+ context, colSpan = 1, keyPrefix = '') {
52
+ const { dateEnv, viewApi, options } = context;
53
+ return datesRepDistinctDays
54
+ ? dates.map((date) => {
55
+ const dateMeta = internal$1.getDateMeta(date, todayRange, null, dateProfile);
56
+ const text = dateEnv.format(date, dayHeaderFormat);
57
+ const renderProps = Object.assign(Object.assign({}, dateMeta), { date: dateEnv.toDate(date), view: viewApi, text });
58
+ const isNavLink = options.navLinks && !dateMeta.isDisabled;
59
+ return {
60
+ key: keyPrefix + date.toUTCString(),
61
+ renderProps,
62
+ attrs: { 'data-date': !dateMeta.isDisabled ? internal$1.formatDayString(date) : undefined },
63
+ innerAttrs: isNavLink ? internal$1.buildNavLinkAttrs(context, date) : {},
64
+ colSpan,
65
+ isNavLink,
66
+ className: internal$1.getDayClassName(dateMeta),
67
+ };
68
+ })
69
+ : dates.map((date) => {
70
+ const dow = date.getUTCDay();
71
+ const normDate = internal$1.addDays(firstSunday, dow);
72
+ const dayMeta = {
73
+ dow,
74
+ isDisabled: false,
75
+ isFuture: false,
76
+ isPast: false,
77
+ isToday: false,
78
+ isOther: false,
79
+ };
80
+ const text = dateEnv.format(normDate, dayHeaderFormat);
81
+ const renderProps = Object.assign(Object.assign({}, dayMeta), { date, view: viewApi, text });
82
+ return {
83
+ key: keyPrefix + String(dow),
84
+ renderProps,
85
+ innerAttrs: { 'aria-label': dateEnv.format(normDate, WEEKDAY_FORMAT) },
86
+ colSpan,
87
+ className: internal$1.getDayClassName(dayMeta),
88
+ };
160
89
  });
161
- }
162
- componentWillUnmount() {
163
- this.disconectInnerHeight();
164
- internal$1.setRef(this.props.innerHeightRef, null);
165
- }
166
90
  }
167
91
 
92
+ /*
93
+ We need really specific keys because RefMap::createRef() which is then given to heightRef
94
+ unable to change key! As a result, we cannot reuse elements between normal/slice/standin types,
95
+ but that's okay since they render quite differently
96
+ */
97
+ function getEventPartKey(seg) {
98
+ return internal$1.getEventKey(seg) + ':' + seg.start +
99
+ (seg.standinFor ? ':standin' : seg.isSlice ? ':slice' : '');
100
+ }
101
+ // DayGridRange utils (TODO: move)
102
+ // -------------------------------------------------------------------------------------------------
168
103
  function splitSegsByRow(segs, rowCnt) {
169
104
  const byRow = [];
170
105
  for (let row = 0; row < rowCnt; row++) {
@@ -196,20 +131,8 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
196
131
  }
197
132
  return byRow;
198
133
  }
199
- function splitSegsByCol(segs, colCnt) {
200
- let byCol = [];
201
- for (let col = 0; col < colCnt; col++) {
202
- byCol.push([]);
203
- }
204
- for (let seg of segs) {
205
- for (let col = seg.firstCol; col <= seg.lastCol; col++) {
206
- if (seg.firstCol !== col) {
207
- seg = Object.assign(Object.assign({}, seg), { firstCol: col, lastCol: col, isStart: false, isEnd: seg.isEnd && seg.lastCol === col, isStandin: true });
208
- }
209
- byCol[col].push(seg);
210
- }
211
- }
212
- return byCol;
134
+ function sliceSegForCol(seg, col) {
135
+ return Object.assign(Object.assign({}, seg), { start: col, end: col + 1, isStart: seg.isStart && seg.start === col, isEnd: seg.isEnd && seg.end - 1 === col, standinFor: seg });
213
136
  }
214
137
 
215
138
  const DEFAULT_TABLE_EVENT_TIME_FORMAT = internal$1.createFormatter({
@@ -222,7 +145,7 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
222
145
  let { display } = seg.eventRange.ui;
223
146
  return display === 'list-item' || (display === 'auto' &&
224
147
  !seg.eventRange.def.allDay &&
225
- seg.firstCol === seg.lastCol && // can't be multi-day
148
+ (seg.end - seg.start) === 1 && // single-day
226
149
  seg.isStart && // "
227
150
  seg.isEnd // "
228
151
  );
@@ -231,7 +154,7 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
231
154
  class DayGridBlockEvent extends internal$1.BaseComponent {
232
155
  render() {
233
156
  let { props } = this;
234
- return (preact.createElement(internal$1.StandardEvent, Object.assign({}, props, { elClasses: ['fc-daygrid-event', 'fc-daygrid-block-event', 'fc-h-event'], defaultTimeFormat: DEFAULT_TABLE_EVENT_TIME_FORMAT, defaultDisplayEventEnd: props.defaultDisplayEventEnd, disableResizing: !props.eventRange.def.allDay })));
157
+ return (preact.createElement(internal$1.StandardEvent, Object.assign({}, props, { className: 'fc-daygrid-block-event fc-daygrid-event fc-h-event', defaultTimeFormat: DEFAULT_TABLE_EVENT_TIME_FORMAT, defaultDisplayEventEnd: props.defaultDisplayEventEnd, disableResizing: !props.eventRange.def.allDay })));
235
158
  }
236
159
  }
237
160
 
@@ -241,8 +164,12 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
241
164
  let { options } = context;
242
165
  let { eventRange } = props;
243
166
  let timeFormat = options.eventTimeFormat || DEFAULT_TABLE_EVENT_TIME_FORMAT;
244
- let timeText = internal$1.buildEventRangeTimeText(eventRange, timeFormat, context, true, props.defaultDisplayEventEnd);
245
- return (preact.createElement(internal$1.EventContainer, Object.assign({}, props, { elTag: "a", elClasses: ['fc-daygrid-event', 'fc-daygrid-dot-event'], elAttrs: internal$1.getEventRangeAnchorAttrs(eventRange, context), defaultGenerator: renderInnerContent, timeText: timeText, isResizing: false, isDateSelecting: false })));
167
+ let timeText = internal$1.buildEventRangeTimeText(timeFormat, eventRange,
168
+ /* slicedStart = */ undefined,
169
+ /* slicedEnd = */ undefined, props.isStart, props.isEnd, context,
170
+ /* defaultDisplayEventTime = */ true, props.defaultDisplayEventEnd);
171
+ let anchorAttrs = internal$1.getEventRangeAnchorAttrs(eventRange, context);
172
+ return (preact.createElement(internal$1.EventContainer, Object.assign({}, props, { tag: anchorAttrs ? 'a' : 'div', attrs: anchorAttrs, className: 'fc-daygrid-dot-event fc-daygrid-event', defaultGenerator: renderInnerContent, timeText: timeText, isResizing: false, isDateSelecting: false })));
246
173
  }
247
174
  }
248
175
  function renderInnerContent(renderProps) {
@@ -255,14 +182,16 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
255
182
  class DayGridMoreLink extends internal$1.BaseComponent {
256
183
  render() {
257
184
  let { props } = this;
258
- return (preact.createElement(internal$1.MoreLinkContainer, { elClasses: ['fc-daygrid-more-link'], dateProfile: props.dateProfile, todayRange: props.todayRange, allDayDate: props.allDayDate, segs: props.segs, hiddenSegs: props.hiddenSegs, alignmentElRef: props.alignmentElRef, alignGridTop: props.alignGridTop, extraDateSpan: props.extraDateSpan, popoverContent: () => {
185
+ return (preact.createElement(internal$1.MoreLinkContainer, { className: internal$1.joinClassNames('fc-daygrid-more-link', props.isBlock
186
+ ? 'fc-daygrid-more-link-block'
187
+ : 'fc-daygrid-more-link-button'), dateProfile: props.dateProfile, todayRange: props.todayRange, allDayDate: props.allDayDate, segs: props.segs, hiddenSegs: props.hiddenSegs, alignElRef: props.alignElRef, alignParentTop: props.alignParentTop, dateSpanProps: props.dateSpanProps, popoverContent: () => {
259
188
  let forcedInvisibleMap = // TODO: more convenient/DRY
260
189
  (props.eventDrag ? props.eventDrag.affectedInstances : null) ||
261
190
  (props.eventResize ? props.eventResize.affectedInstances : null) ||
262
191
  {};
263
192
  return (preact.createElement(preact.Fragment, null, props.segs.map((seg) => {
264
193
  let { eventRange } = seg;
265
- let instanceId = eventRange.instance.instanceId;
194
+ let { instanceId } = eventRange.instance;
266
195
  return (preact.createElement("div", { key: instanceId, style: {
267
196
  visibility: forcedInvisibleMap[instanceId] ? 'hidden' : '',
268
197
  } }, hasListItemDisplay(seg) ? (preact.createElement(DayGridListEvent, Object.assign({ eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: false, isSelected: instanceId === props.eventSelection, defaultDisplayEventEnd: false }, internal$1.getEventRangeMeta(eventRange, props.todayRange)))) : (preact.createElement(DayGridBlockEvent, Object.assign({ eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: instanceId === props.eventSelection, defaultDisplayEventEnd: false }, internal$1.getEventRangeMeta(eventRange, props.todayRange))))));
@@ -275,8 +204,8 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
275
204
  constructor() {
276
205
  super(...arguments);
277
206
  // ref
278
- this.innerElRef = preact.createRef();
279
- this.headerWrapElRef = preact.createRef();
207
+ this.rootElRef = preact.createRef();
208
+ this.bodyElRef = preact.createRef();
280
209
  }
281
210
  render() {
282
211
  let { props, context } = this;
@@ -284,48 +213,37 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
284
213
  // TODO: memoize this
285
214
  const isMonthStart = props.showDayNumber &&
286
215
  shouldDisplayMonthStart(props.date, props.dateProfile.currentRange, dateEnv);
287
- return (preact.createElement(internal$1.DayCellContainer, { elTag: "div", elClasses: [
288
- 'fc-daygrid-cell',
289
- 'fc-cell',
290
- props.width != null ? '' : 'fc-liquid',
291
- 'fc-flex-column',
292
- ...(props.extraClassNames || []),
293
- ], elAttrs: Object.assign(Object.assign({}, props.extraDataAttrs), { role: 'gridcell' }), elStyle: {
216
+ return (preact.createElement(internal$1.DayCellContainer, { tag: "div", className: internal$1.joinClassNames(props.className, 'fc-daygrid-day fc-flex-col', props.borderStart && 'fc-border-s', props.width != null ? '' : 'fc-liquid'), attrs: Object.assign(Object.assign({}, props.attrs), { role: 'gridcell' }), style: {
294
217
  width: props.width
295
- }, extraRenderProps: props.extraRenderProps, defaultGenerator: renderTopInner, date: props.date, dateProfile: props.dateProfile, todayRange: props.todayRange, showDayNumber: props.showDayNumber, isMonthStart: isMonthStart }, (InnerContent, renderProps) => (preact.createElement("div", { ref: this.innerElRef, className: [
296
- 'fc-daygrid-cell-inner',
297
- props.fgLiquidHeight ? 'fc-liquid' : ''
298
- ].join(' ') },
299
- preact.createElement("div", { ref: this.headerWrapElRef, className: "fc-flex-column" }, !renderProps.isDisabled && (props.showDayNumber || internal$1.hasCustomDayCellContent(options)) && (preact.createElement("div", { className: "fc-daygrid-cell-header" },
300
- preact.createElement(InnerContent, { elTag: "a", elClasses: [
301
- 'fc-daygrid-cell-number',
302
- isMonthStart && 'fc-daygrid-month-start',
303
- ], elAttrs: internal$1.buildNavLinkAttrs(context, props.date) })))),
304
- preact.createElement("div", { className: "fc-daygrid-cell-main", style: {
305
- height: props.fgLiquidHeight ? '' : props.fgHeight
306
- } }, props.fg),
307
- preact.createElement("div", { className: "fc-daygrid-cell-footer", style: props.fgLiquidHeight
308
- ? { position: 'relative', top: props.fgHeight }
309
- : {} },
310
- preact.createElement(DayGridMoreLink, { allDayDate: props.date, segs: props.segs, hiddenSegs: props.hiddenSegs, alignmentElRef: this.innerElRef, alignGridTop: !props.showDayNumber, extraDateSpan: props.extraDateSpan, dateProfile: props.dateProfile, eventSelection: props.eventSelection, eventDrag: props.eventDrag, eventResize: props.eventResize, todayRange: props.todayRange })),
311
- props.bg))));
218
+ }, elRef: this.rootElRef, renderProps: props.renderProps, defaultGenerator: renderTopInner, date: props.date, dateProfile: props.dateProfile, todayRange: props.todayRange, showDayNumber: props.showDayNumber, isMonthStart: isMonthStart }, (InnerContent, renderProps) => (preact.createElement(preact.Fragment, null,
219
+ !renderProps.isDisabled && (props.showDayNumber || internal$1.hasCustomDayCellContent(options)) && (preact.createElement("div", { className: "fc-daygrid-day-header" },
220
+ preact.createElement(InnerContent, { tag: "a", attrs: internal$1.buildNavLinkAttrs(context, props.date), className: internal$1.joinClassNames('fc-daygrid-day-number', isMonthStart && 'fc-daygrid-month-start') }))),
221
+ preact.createElement("div", { className: internal$1.joinClassNames('fc-daygrid-day-body', props.isTall && 'fc-daygrid-day-body-tall', props.fgLiquidHeight ? 'fc-liquid' : 'fc-grow'), ref: this.bodyElRef },
222
+ preact.createElement("div", { className: 'fc-daygrid-day-events', style: { height: props.fgHeight } }, props.fg),
223
+ preact.createElement(DayGridMoreLink, { isBlock: props.isCompact, allDayDate: props.date, segs: props.segs, hiddenSegs: props.hiddenSegs, alignElRef: this.rootElRef, alignParentTop: props.showDayNumber ? '[role=row]' : '.fc-view', dateSpanProps: props.dateSpanProps, dateProfile: props.dateProfile, eventSelection: props.eventSelection, eventDrag: props.eventDrag, eventResize: props.eventResize, todayRange: props.todayRange }))))));
312
224
  }
313
225
  componentDidMount() {
314
- const innerEl = this.innerElRef.current; // TODO: make dynamic with useEffect
315
- const headerWrapEl = this.headerWrapElRef.current; // "
316
- // TODO: only attach this if refs props present
317
- this.detachInnerHeight = internal$1.watchHeight(innerEl, (height) => {
318
- internal$1.setRef(this.props.innerHeightRef, height);
319
- });
320
- this.detachHeaderHeight = internal$1.watchHeight(headerWrapEl, (height) => {
321
- internal$1.setRef(this.props.headerHeightRef, height);
226
+ const bodyEl = this.bodyElRef.current;
227
+ // we want to fire on ANY size change, because we do more advanced stuff
228
+ this.disconnectBodyHeight = internal$1.watchSize(bodyEl, (_bodyWidth, bodyHeight) => {
229
+ const { props } = this;
230
+ const mainRect = bodyEl.getBoundingClientRect();
231
+ const rootRect = this.rootElRef.current.getBoundingClientRect();
232
+ const headerHeight = mainRect.top - rootRect.top;
233
+ if (!internal$1.isDimsEqual(this.headerHeight, headerHeight)) {
234
+ this.headerHeight = headerHeight;
235
+ internal$1.setRef(props.headerHeightRef, headerHeight);
236
+ }
237
+ if (props.fgLiquidHeight) {
238
+ internal$1.setRef(props.mainHeightRef, bodyHeight);
239
+ }
322
240
  });
323
241
  }
324
242
  componentWillUnmount() {
325
- this.detachInnerHeight();
326
- this.detachHeaderHeight();
327
- internal$1.setRef(this.props.innerHeightRef, null);
328
- internal$1.setRef(this.props.headerHeightRef, null);
243
+ this.disconnectBodyHeight();
244
+ const { props } = this;
245
+ internal$1.setRef(props.headerHeightRef, null);
246
+ internal$1.setRef(props.mainHeightRef, null);
329
247
  }
330
248
  }
331
249
  // Utils
@@ -349,121 +267,232 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
349
267
  (dateEnv.getDay(date) === 1 && date.valueOf() < currentEnd.valueOf()));
350
268
  }
351
269
 
270
+ function computeFgSegVerticals(segs, segHeightMap, cells, maxHeight, strictOrder, allowSlicing = true, dayMaxEvents, dayMaxEventRows) {
271
+ let maxCoord;
272
+ let maxDepth;
273
+ let hiddenConsumes;
274
+ if (dayMaxEvents === true || dayMaxEventRows === true) {
275
+ maxCoord = maxHeight;
276
+ hiddenConsumes = true;
277
+ }
278
+ else if (typeof dayMaxEvents === 'number') {
279
+ maxDepth = dayMaxEvents;
280
+ hiddenConsumes = false;
281
+ }
282
+ else if (typeof dayMaxEventRows === 'number') {
283
+ maxDepth = dayMaxEventRows;
284
+ hiddenConsumes = true;
285
+ }
286
+ // NOTE: visibleSegsMap and hiddenSegMap map NEVER overlap for a given event
287
+ // once a seg has a height, the combined potentially-sliced segs will comprise the entire span of the seg
288
+ // if a seg does not have a height yet, it won't be inserted into either visibleSegsMap/hiddenSegMap
289
+ const visibleSegMap = new Map();
290
+ const hiddenSegMap = new Map();
291
+ const segTops = new Map();
292
+ const isSlicedMap = new Map();
293
+ let hierarchy = new internal$1.SegHierarchy(segs, (seg) => segHeightMap.get(getEventPartKey(seg)), strictOrder, maxCoord, maxDepth, hiddenConsumes, allowSlicing);
294
+ hierarchy.traverseSegs((seg, segTop) => {
295
+ addToSegMap(visibleSegMap, seg);
296
+ segTops.set(getEventPartKey(seg), segTop);
297
+ if (seg.isSlice) {
298
+ isSlicedMap.set(seg.eventRange, true);
299
+ }
300
+ });
301
+ for (const hiddenSeg of hierarchy.hiddenSegs) {
302
+ addToSegMap(hiddenSegMap, hiddenSeg); // hidden main segs
303
+ }
304
+ // recompute tops while considering slices
305
+ // portions of these slices might be added to hiddenSegMap
306
+ if (isSlicedMap.size) {
307
+ segTops.clear();
308
+ hierarchy = new internal$1.SegHierarchy(compileSegMap(segs, visibleSegMap), (seg) => segHeightMap.get(getEventPartKey(seg)), strictOrder, maxCoord, maxDepth, hiddenConsumes);
309
+ hierarchy.traverseSegs((seg, segTop) => {
310
+ segTops.set(getEventPartKey(seg), segTop); // newly-hidden main segs and slices
311
+ });
312
+ for (const hiddenSeg of hierarchy.hiddenSegs) {
313
+ addToSegMap(hiddenSegMap, hiddenSeg);
314
+ }
315
+ }
316
+ const segsByCol = [];
317
+ const hiddenSegsByCol = [];
318
+ const renderableSegsByCol = [];
319
+ const heightsByCol = [];
320
+ for (let col = 0; col < cells.length; col++) {
321
+ segsByCol.push([]);
322
+ hiddenSegsByCol.push([]);
323
+ renderableSegsByCol.push([]);
324
+ heightsByCol.push(0);
325
+ }
326
+ for (const seg of segs) {
327
+ const { eventRange } = seg;
328
+ const visibleSegs = visibleSegMap.get(eventRange) || [];
329
+ const hiddenSegs = hiddenSegMap.get(eventRange) || [];
330
+ const isSliced = isSlicedMap.get(eventRange) || false;
331
+ // add orig to renderable
332
+ renderableSegsByCol[seg.start].push(seg);
333
+ // add slices to renderable
334
+ if (isSliced) {
335
+ for (const visibleSeg of visibleSegs) {
336
+ renderableSegsByCol[visibleSeg.start].push(visibleSeg);
337
+ }
338
+ }
339
+ // accumulate segsByCol/heightsByCol for visible segs
340
+ for (const visibleSeg of visibleSegs) {
341
+ for (let col = visibleSeg.start; col < visibleSeg.end; col++) {
342
+ const slice = sliceSegForCol(visibleSeg, col);
343
+ segsByCol[col].push(slice);
344
+ }
345
+ const segKey = getEventPartKey(visibleSeg);
346
+ const segTop = segTops.get(segKey);
347
+ if (segTop != null) { // positioned?
348
+ const segHeight = segHeightMap.get(segKey);
349
+ for (let col = visibleSeg.start; col < visibleSeg.end; col++) {
350
+ heightsByCol[col] = Math.max(heightsByCol[col], segTop + segHeight);
351
+ }
352
+ }
353
+ }
354
+ // accumulate segsByCol/hiddenSegsByCol for hidden segs
355
+ for (const hiddenSeg of hiddenSegs) {
356
+ for (let col = hiddenSeg.start; col < hiddenSeg.end; col++) {
357
+ const slice = sliceSegForCol(hiddenSeg, col);
358
+ segsByCol[col].push(slice);
359
+ hiddenSegsByCol[col].push(slice);
360
+ }
361
+ }
362
+ }
363
+ return [
364
+ segsByCol,
365
+ hiddenSegsByCol,
366
+ renderableSegsByCol,
367
+ segTops,
368
+ heightsByCol,
369
+ ];
370
+ }
371
+ // Utils
372
+ // -------------------------------------------------------------------------------------------------
373
+ function addToSegMap(map, seg) {
374
+ let list = map.get(seg.eventRange);
375
+ if (!list) {
376
+ map.set(seg.eventRange, list = []);
377
+ }
378
+ list.push(seg);
379
+ }
352
380
  /*
353
- Unique per-START-column, good for cataloging by top
381
+ Ensures relative order of DayRowEventRange stays consistent with segs
354
382
  */
355
- function getSegStartId(seg) {
356
- return seg.eventRange.instance.instanceId + ':' + seg.firstCol;
383
+ function compileSegMap(segs, segMap) {
384
+ const res = [];
385
+ for (const seg of segs) {
386
+ res.push(...(segMap.get(seg.eventRange) || []));
387
+ }
388
+ return res;
357
389
  }
390
+
358
391
  /*
359
- Unique per-START-and-END-column, good for cataloging by width/height
392
+ TODO: move this so @fullcalendar/daygrid
360
393
  */
361
- function getSegSpanId(seg) {
362
- return getSegStartId(seg) + ':' + seg.lastCol;
394
+ function buildDayTableModel(dateProfile, dateProfileGenerator) {
395
+ let daySeries = new internal$1.DaySeriesModel(dateProfile.renderRange, dateProfileGenerator);
396
+ return new internal$1.DayTableModel(daySeries, /year|month|week/.test(dateProfile.currentRangeUnit));
363
397
  }
364
- function computeFgSegVerticals(segs, segHeightMap, // keyed by segSpanId
365
- cells, topOrigin, maxHeight, strictOrder, dayMaxEvents, dayMaxEventRows) {
366
- // initialize column-based arrays
367
- const colCnt = cells.length;
368
- const hiddenSegsByCol = [];
369
- const heightsByCol = [];
370
- for (let col = 0; col < colCnt; col++) {
371
- hiddenSegsByCol.push([]);
372
- heightsByCol.push(0);
373
- }
374
- // create entries to be given to DayGridSegHierarchy
375
- const segEntries = segs.map((seg, index) => ({
376
- index: index,
377
- seg,
378
- span: {
379
- start: seg.firstCol,
380
- end: seg.lastCol + 1,
381
- },
382
- }));
383
- // configure hierarchy position-generator
384
- let hierarchy = new DayGridSegHierarchy((segEntry) => (segHeightMap.get(getSegSpanId(segs[segEntry.index]))));
385
- hierarchy.allowReslicing = false;
386
- hierarchy.strictOrder = strictOrder;
387
- if (dayMaxEvents === true || dayMaxEventRows === true) {
388
- hierarchy.maxCoord = maxHeight;
389
- hierarchy.hiddenConsumes = true;
398
+ function computeColWidth(colCnt, colMinWidth, viewportWidth) {
399
+ if (viewportWidth == null) {
400
+ return [undefined, undefined];
390
401
  }
391
- else if (typeof dayMaxEvents === 'number') {
392
- hierarchy.maxStackCnt = dayMaxEvents;
402
+ const colTempWidth = viewportWidth / colCnt;
403
+ if (colTempWidth < colMinWidth) {
404
+ return [colMinWidth * colCnt, colMinWidth];
393
405
  }
394
- else if (typeof dayMaxEventRows === 'number') {
395
- hierarchy.maxStackCnt = dayMaxEventRows;
396
- hierarchy.hiddenConsumes = true;
397
- }
398
- // compile segTops & heightsByCol
399
- const hiddenSegEntries = hierarchy.addSegs(segEntries);
400
- const segRects = hierarchy.toRects();
401
- const segTops = {};
402
- for (const segRect of segRects) {
403
- const seg = segs[segRect.index];
404
- segTops[getSegStartId(seg)] = topOrigin + segRect.levelCoord;
405
- let { start: col, end: endCol } = segRect.span;
406
- for (; col < endCol; col++) {
407
- heightsByCol[col] = Math.max(heightsByCol[col], segRect.levelCoord + segRect.thickness);
406
+ return [viewportWidth, undefined];
407
+ }
408
+ // Positioning
409
+ // -------------------------------------------------------------------------------------------------
410
+ function computeTopFromDate(date, cellRows, rowHeightMap, adjust = 0) {
411
+ let top = 0;
412
+ for (const cells of cellRows) {
413
+ const start = cells[0].date;
414
+ const end = cells[cells.length - 1].date;
415
+ const key = start.toISOString();
416
+ if (date >= start && date <= end) {
417
+ return top;
418
+ }
419
+ const rowHeight = rowHeightMap.get(key);
420
+ if (rowHeight == null) {
421
+ return; // denote unknown
408
422
  }
423
+ top += rowHeight + adjust;
409
424
  }
410
- // compile # of invisible segs per-column
411
- for (const hiddenSegEntry of hiddenSegEntries) {
412
- const { span } = hiddenSegEntry;
413
- const hiddenSeg = segs[hiddenSegEntry.index];
414
- for (let col = span.start; col < span.end; col++) {
415
- hiddenSegsByCol[col].push(hiddenSeg);
425
+ return top;
426
+ }
427
+ /*
428
+ FYI, `width` is not dependable for aligning completely to farside
429
+ */
430
+ function computeHorizontalsFromSeg(seg, colWidth, colCnt, isRtl) {
431
+ let fromStart;
432
+ let fromEnd;
433
+ if (colWidth != null) {
434
+ fromStart = seg.start * colWidth;
435
+ fromEnd = (colCnt - seg.end) * colWidth;
436
+ }
437
+ else {
438
+ const colWidthFrac = 1 / colCnt;
439
+ fromStart = internal$1.fracToCssDim(seg.start * colWidthFrac);
440
+ fromEnd = internal$1.fracToCssDim(1 - seg.end * colWidthFrac);
441
+ }
442
+ if (isRtl) {
443
+ return { right: fromStart, left: fromEnd };
444
+ }
445
+ else {
446
+ return { left: fromStart, right: fromEnd };
447
+ }
448
+ }
449
+ function computeColFromPosition(positionLeft, elWidth, colWidth, colCnt, isRtl) {
450
+ const realColWidth = colWidth != null ? colWidth : elWidth / colCnt;
451
+ const colFromLeft = Math.floor(positionLeft / realColWidth);
452
+ const col = isRtl ? (colCnt - colFromLeft - 1) : colFromLeft;
453
+ const left = colFromLeft * realColWidth;
454
+ const right = left + realColWidth;
455
+ return { col, left, right };
456
+ }
457
+ function computeRowFromPosition(positionTop, cellRows, rowHeightMap) {
458
+ let row = 0;
459
+ let top = 0;
460
+ let bottom = 0;
461
+ for (const cells of cellRows) {
462
+ const key = cells[0].key;
463
+ top = bottom;
464
+ bottom = top + rowHeightMap.get(key);
465
+ if (positionTop < bottom) {
466
+ break;
416
467
  }
468
+ row++;
417
469
  }
418
- return [segTops, heightsByCol, hiddenSegsByCol];
470
+ return { row, top, bottom };
419
471
  }
420
- // DayGridSegHierarchy
472
+ // Hit Element
421
473
  // -------------------------------------------------------------------------------------------------
422
- class DayGridSegHierarchy extends internal$1.SegHierarchy {
423
- constructor() {
424
- super(...arguments);
425
- // config
426
- this.hiddenConsumes = false;
427
- // allows us to keep hidden entries in the hierarchy so they take up space
428
- this.forceHidden = {};
429
- }
430
- addSegs(segInputs) {
431
- const hiddenSegs = super.addSegs(segInputs);
432
- const { entriesByLevel } = this;
433
- const excludeHidden = (entry) => !this.forceHidden[internal$1.buildEntryKey(entry)];
434
- // remove the forced-hidden segs
435
- for (let level = 0; level < entriesByLevel.length; level += 1) {
436
- entriesByLevel[level] = entriesByLevel[level].filter(excludeHidden);
437
- }
438
- return hiddenSegs;
439
- }
440
- handleInvalidInsertion(insertion, entry, hiddenEntries) {
441
- const { entriesByLevel, forceHidden } = this;
442
- const { touchingEntry, touchingLevel, touchingLateral } = insertion;
443
- // the entry that the new insertion is touching must be hidden
444
- if (this.hiddenConsumes && touchingEntry) {
445
- const touchingEntryId = internal$1.buildEntryKey(touchingEntry);
446
- if (!forceHidden[touchingEntryId]) {
447
- if (this.allowReslicing) {
448
- // split up the touchingEntry, reinsert it
449
- const hiddenEntry = Object.assign(Object.assign({}, touchingEntry), { span: internal$1.intersectSpans(touchingEntry.span, entry.span) });
450
- // reinsert the area that turned into a "more" link (so no other entries try to
451
- // occupy the space) but mark it forced-hidden
452
- const hiddenEntryId = internal$1.buildEntryKey(hiddenEntry);
453
- forceHidden[hiddenEntryId] = true;
454
- entriesByLevel[touchingLevel][touchingLateral] = hiddenEntry;
455
- hiddenEntries.push(hiddenEntry);
456
- this.splitEntry(touchingEntry, entry, hiddenEntries);
457
- }
458
- else {
459
- forceHidden[touchingEntryId] = true;
460
- hiddenEntries.push(touchingEntry);
461
- }
462
- }
463
- }
464
- // will try to reslice...
465
- super.handleInvalidInsertion(insertion, entry, hiddenEntries);
474
+ function getRowEl(rootEl, row) {
475
+ return rootEl.querySelectorAll(':scope > [role=row]')[row];
476
+ }
477
+ function getCellEl(rowEl, col) {
478
+ return rowEl.querySelectorAll(':scope > [role=gridcell]')[col];
479
+ }
480
+ // Header Formatting
481
+ // -------------------------------------------------------------------------------------------------
482
+ function createDayHeaderFormatter(explicitFormat, datesRepDistinctDays, dateCnt) {
483
+ return explicitFormat || computeFallbackHeaderFormat(datesRepDistinctDays, dateCnt);
484
+ }
485
+ // Computes a default column header formatting string if `colFormat` is not explicitly defined
486
+ function computeFallbackHeaderFormat(datesRepDistinctDays, dayCnt) {
487
+ // if more than one week row, or if there are a lot of columns with not much space,
488
+ // put just the day numbers will be in each cell
489
+ if (!datesRepDistinctDays || dayCnt > 10) {
490
+ return internal$1.createFormatter({ weekday: 'short' }); // "Sat"
491
+ }
492
+ if (dayCnt > 1) {
493
+ return internal$1.createFormatter({ weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true }); // "Sat 11/12"
466
494
  }
495
+ return internal$1.createFormatter({ weekday: 'long' }); // "Saturday"
467
496
  }
468
497
 
469
498
  class DayGridEventHarness extends preact.Component {
@@ -474,129 +503,96 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
474
503
  }
475
504
  render() {
476
505
  const { props } = this;
477
- return (preact.createElement("div", { className: "fc-abs", style: props.style, ref: this.rootElRef }, props.children));
506
+ return (preact.createElement("div", { className: internal$1.joinClassNames(props.className, 'fc-abs'), style: props.style, ref: this.rootElRef }, props.children));
478
507
  }
479
508
  componentDidMount() {
480
509
  const rootEl = this.rootElRef.current; // TODO: make dynamic with useEffect
481
- this.detachHeight = internal$1.watchHeight(rootEl, (height) => {
510
+ this.disconnectHeight = internal$1.watchHeight(rootEl, (height) => {
482
511
  internal$1.setRef(this.props.heightRef, height);
483
512
  });
484
513
  }
485
514
  componentWillUnmount() {
486
- this.detachHeight();
515
+ this.disconnectHeight();
487
516
  internal$1.setRef(this.props.heightRef, null);
488
517
  }
489
518
  }
490
519
 
491
520
  const DEFAULT_WEEK_NUM_FORMAT = internal$1.createFormatter({ week: 'narrow' });
492
- const COMPACT_CELL_WIDTH = 80;
493
521
  class DayGridRow extends internal$1.BaseComponent {
494
522
  constructor() {
495
523
  super(...arguments);
496
- this.cellInnerHeightRefMap = new internal$1.RefMap(() => {
497
- internal$1.afterSize(this.handleInnerHeights);
524
+ this.headerHeightRefMap = new internal$1.RefMap(() => {
525
+ internal$1.afterSize(this.handleSegPositioning);
498
526
  });
499
- this.cellHeaderHeightRefMap = new internal$1.RefMap(() => {
500
- internal$1.afterSize(this.handleHeaderHeights);
527
+ this.mainHeightRefMap = new internal$1.RefMap(() => {
528
+ const fgLiquidHeight = this.props.dayMaxEvents === true || this.props.dayMaxEventRows === true;
529
+ if (fgLiquidHeight) {
530
+ internal$1.afterSize(this.handleSegPositioning);
531
+ }
501
532
  });
502
533
  this.segHeightRefMap = new internal$1.RefMap(() => {
503
- internal$1.afterSize(this.handleSegHeights);
534
+ internal$1.afterSize(this.handleSegPositioning);
504
535
  });
505
536
  this.handleRootEl = (rootEl) => {
506
537
  this.rootEl = rootEl;
507
538
  internal$1.setRef(this.props.rootElRef, rootEl);
508
539
  };
509
- // Sizing
510
- // -----------------------------------------------------------------------------------------------
511
- this.handleHeaderHeights = () => {
512
- const cellHeaderHeightMap = this.cellHeaderHeightRefMap.current;
513
- let max = 0;
514
- for (const height of cellHeaderHeightMap.values()) {
515
- max = Math.max(max, height);
516
- }
517
- if (this.state.headerHeight !== max) {
518
- this.setState({ headerHeight: max });
519
- }
520
- };
521
- this.handleInnerHeights = () => {
522
- const { props } = this;
523
- const fgLiquidHeight = props.dayMaxEvents === true || props.dayMaxEventRows === true;
524
- const cellInnerHeightMap = this.cellInnerHeightRefMap.current;
525
- let max = 0;
526
- for (const height of cellInnerHeightMap.values()) {
527
- max = Math.max(max, height);
528
- }
529
- if (fgLiquidHeight) {
530
- if (this.state.innerHeight !== max) {
531
- this.setState({ innerHeight: max }); // will trigger event rerender
532
- }
533
- }
534
- else {
535
- internal$1.setRef(props.innerHeightRef, max);
536
- }
537
- };
538
- this.handleSegHeights = () => {
539
- this.setState({ segHeightRev: this.segHeightRefMap.rev }); // will trigger event rerender
540
+ this.handleSegPositioning = () => {
541
+ this.forceUpdate();
540
542
  };
541
543
  }
542
544
  render() {
543
- const { props, state, context, cellInnerHeightRefMap, cellHeaderHeightRefMap } = this;
545
+ const { props, context, headerHeightRefMap, mainHeightRefMap } = this;
544
546
  const { cells } = props;
545
547
  const { options } = context;
546
548
  const weekDate = props.cells[0].date;
547
- const colCnt = props.cells.length;
548
549
  const fgLiquidHeight = props.dayMaxEvents === true || props.dayMaxEventRows === true;
549
550
  // TODO: memoize? sort all types of segs?
550
551
  const fgEventSegs = internal$1.sortEventSegs(props.fgEventSegs, options.eventOrder);
551
552
  // TODO: memoize?
552
- const fgEventSegsByCol = splitSegsByCol(fgEventSegs, colCnt);
553
- const bgEventSegsByCol = splitSegsByCol(props.bgEventSegs, colCnt);
554
- const businessHoursByCol = splitSegsByCol(props.businessHourSegs, colCnt);
555
- const highlightSegsByCol = splitSegsByCol(this.getHighlightSegs(), colCnt); // TODO: doesn't need standins
556
- const mirrorSegsByCol = splitSegsByCol(this.getMirrorSegs(), colCnt); // TODO: doesn't need standins
557
- // TODO: memoize?
558
- const [segTops, heightsByCol, hiddenSegsByCol] = computeFgSegVerticals(fgEventSegs, this.segHeightRefMap.current, cells, state.headerHeight, (fgLiquidHeight && state.innerHeight != null && state.headerHeight != null)
559
- ? state.innerHeight - state.headerHeight
560
- : undefined, options.eventOrderStrict, props.dayMaxEvents, props.dayMaxEventRows);
553
+ const [maxMainTop, minMainHeight] = this.computeFgDims(); // uses headerHeightRefMap/mainHeightRefMap
554
+ const [segsByCol, hiddenSegsByCol, renderableSegsByCol, segTops, simpleHeightsByCol] = computeFgSegVerticals(fgEventSegs, this.segHeightRefMap.current, cells, fgLiquidHeight ? minMainHeight : undefined, // if not defined in first run, will unlimited!?
555
+ options.eventOrderStrict, options.eventSlicing, props.dayMaxEvents, props.dayMaxEventRows);
556
+ const heightsByCol = [];
557
+ if (maxMainTop != null) {
558
+ let col = 0;
559
+ for (const cell of cells) { // uses headerHeightRefMap/maxMainTop/simpleHeightsByCol
560
+ const cellHeaderHeight = headerHeightRefMap.current.get(cell.key);
561
+ const extraFgHeight = maxMainTop - cellHeaderHeight;
562
+ heightsByCol.push(simpleHeightsByCol[col++] + extraFgHeight);
563
+ }
564
+ }
565
+ const highlightSegs = this.getHighlightSegs();
566
+ const mirrorSegs = this.getMirrorSegs();
561
567
  const forcedInvisibleMap = // TODO: more convenient/DRY
562
568
  (props.eventDrag && props.eventDrag.affectedInstances) ||
563
569
  (props.eventResize && props.eventResize.affectedInstances) ||
564
570
  {};
565
- return (preact.createElement("div", { role: props.cellGroup ? undefined : 'row', className: [
566
- 'fc-daygrid-row',
567
- props.forceVSpacing
568
- ? 'fc-daygrid-row-spacious'
569
- : props.compact
570
- ? 'fc-daygrid-row-compact'
571
- : '',
572
- props.cellGroup ? 'fc-flex-row' : 'fc-row',
573
- 'fc-rel',
574
- props.className || '',
575
- ].join(' '), style: {
571
+ return (preact.createElement("div", { role: 'row' // TODO: audit this for all scenarios
572
+ , className: internal$1.joinClassNames('fc-flex-row fc-rel', props.className), style: {
576
573
  minHeight: props.minHeight,
577
574
  }, ref: this.handleRootEl },
578
- props.cells.map((cell, col) => {
579
- const normalFgNodes = this.renderFgSegs(fgEventSegsByCol[col], segTops, props.todayRange, forcedInvisibleMap);
580
- const mirrorFgNodes = this.renderFgSegs(mirrorSegsByCol[col], segTops, props.todayRange, {}, // forcedInvisibleMap
581
- Boolean(props.eventDrag), Boolean(props.eventResize), false);
582
- return (preact.createElement(DayGridCell, { key: cell.key, dateProfile: props.dateProfile, todayRange: props.todayRange, date: cell.date, showDayNumber: props.showDayNumbers,
575
+ this.renderFillSegs(props.businessHourSegs, 'non-business'),
576
+ this.renderFillSegs(props.bgEventSegs, 'bg-event'),
577
+ this.renderFillSegs(highlightSegs, 'highlight'),
578
+ preact.createElement("div", { className: 'fc-flex-row fc-liquid fc-rel' }, props.cells.map((cell, col) => {
579
+ const normalFgNodes = this.renderFgSegs(maxMainTop, renderableSegsByCol[col], segTops, props.todayRange, forcedInvisibleMap);
580
+ return (preact.createElement(DayGridCell, { key: cell.key, dateProfile: props.dateProfile, todayRange: props.todayRange, date: cell.date, showDayNumber: props.showDayNumbers, isCompact: props.isCompact, isTall: props.isTall, borderStart: Boolean(col),
583
581
  // content
584
- segs: fgEventSegsByCol[col], hiddenSegs: hiddenSegsByCol[col], fgLiquidHeight: fgLiquidHeight, fg: (preact.createElement(preact.Fragment, null,
585
- preact.createElement(preact.Fragment, null, normalFgNodes),
586
- preact.createElement(preact.Fragment, null, mirrorFgNodes))), bg: (preact.createElement(preact.Fragment, null,
587
- this.renderFillSegs(highlightSegsByCol[col], 'highlight'),
588
- this.renderFillSegs(businessHoursByCol[col], 'non-business'),
589
- this.renderFillSegs(bgEventSegsByCol[col], 'bg-event'))), eventDrag: props.eventDrag, eventResize: props.eventResize, eventSelection: props.eventSelection,
582
+ segs: segsByCol[col], hiddenSegs: hiddenSegsByCol[col], fgLiquidHeight: fgLiquidHeight, fg: (preact.createElement(preact.Fragment, null, normalFgNodes)), eventDrag: props.eventDrag, eventResize: props.eventResize, eventSelection: props.eventSelection,
590
583
  // render hooks
591
- extraRenderProps: cell.extraRenderProps, extraDateSpan: cell.extraDateSpan, extraDataAttrs: cell.extraDataAttrs, extraClassNames: cell.extraClassNames,
584
+ renderProps: cell.renderProps, dateSpanProps: cell.dateSpanProps, attrs: cell.attrs, className: cell.className,
592
585
  // dimensions
593
586
  fgHeight: heightsByCol[col], width: props.colWidth,
594
587
  // refs
595
- innerHeightRef: cellInnerHeightRefMap.createRef(cell.key), headerHeightRef: cellHeaderHeightRefMap.createRef(cell.key) }));
596
- }),
597
- props.showWeekNumbers && (preact.createElement(internal$1.WeekNumberContainer, { elTag: "a", elClasses: ['fc-daygrid-week-number'], elAttrs: internal$1.buildNavLinkAttrs(context, weekDate, 'week'), date: weekDate, defaultFormat: DEFAULT_WEEK_NUM_FORMAT }))));
598
- }
599
- renderFgSegs(segs, segTops, todayRange, forcedInvisibleMap, isDragging, isResizing, isDateSelecting) {
588
+ headerHeightRef: headerHeightRefMap.createRef(cell.key), mainHeightRef: mainHeightRefMap.createRef(cell.key) }));
589
+ })),
590
+ props.showWeekNumbers && (preact.createElement(internal$1.WeekNumberContainer, { tag: "a", attrs: internal$1.buildNavLinkAttrs(context, weekDate, 'week'), className: 'fc-daygrid-week-number', date: weekDate, defaultFormat: DEFAULT_WEEK_NUM_FORMAT })),
591
+ this.renderFgSegs(maxMainTop, mirrorSegs, segTops, props.todayRange, {}, // forcedInvisibleMap
592
+ Boolean(props.eventDrag), Boolean(props.eventResize), false)));
593
+ }
594
+ renderFgSegs(headerHeight, segs, segTops, todayRange, forcedInvisibleMap, isDragging, isResizing, isDateSelecting) {
595
+ var _a;
600
596
  const { props, context, segHeightRefMap } = this;
601
597
  const { isRtl } = context;
602
598
  const { colWidth, eventSelection } = props;
@@ -605,30 +601,26 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
605
601
  const isMirror = isDragging || isResizing || isDateSelecting;
606
602
  const nodes = [];
607
603
  for (const seg of segs) {
608
- const { left, right, width } = computeHorizontalsFromSeg(seg, colWidth, colCnt, isRtl);
609
- // TODO: optimize ID creation? all related
610
- const { eventRange } = seg;
604
+ const key = getEventPartKey(seg);
605
+ const { standinFor, eventRange } = seg;
611
606
  const { instanceId } = eventRange.instance;
612
- const segSpanId = getSegSpanId(seg);
613
- const segStartId = getSegStartId(seg);
614
- const top = segTops[segStartId];
615
- const isVisible = !seg.isStandin &&
616
- top != null &&
617
- !forcedInvisibleMap[instanceId];
618
- /*
619
- TODO: is this comment still relevant? vvvvvvvv
620
- known bug: events that are force to be list-item but span multiple days still take up space in later columns
621
- todo: in print view, for multi-day events, don't display title within non-start/end segs
622
- */
623
- nodes.push(preact.createElement(DayGridEventHarness, { key: segSpanId, style: {
624
- visibility: isVisible ? '' : 'hidden',
607
+ if (standinFor) {
608
+ continue;
609
+ }
610
+ const { left, right } = computeHorizontalsFromSeg(seg, colWidth, colCnt, isRtl);
611
+ const localTop = (_a = segTops.get(standinFor ? getEventPartKey(standinFor) : key)) !== null && _a !== void 0 ? _a : (isMirror ? 0 : undefined);
612
+ const top = headerHeight != null && localTop != null
613
+ ? headerHeight + localTop
614
+ : undefined;
615
+ const isInvisible = standinFor || forcedInvisibleMap[instanceId] || top == null;
616
+ nodes.push(preact.createElement(DayGridEventHarness, { key: key, className: seg.start ? 'fc-border-transparent fc-border-s' : '', style: {
617
+ visibility: isInvisible ? 'hidden' : '',
625
618
  top,
626
619
  left,
627
620
  right,
628
- width,
629
- }, heightRef: (isMirror || seg.isStandin)
630
- ? null
631
- : segHeightRefMap.createRef(segSpanId) }, hasListItemDisplay(seg) ? (preact.createElement(DayGridListEvent, Object.assign({ eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: isDragging, isSelected: instanceId === eventSelection, defaultDisplayEventEnd: defaultDisplayEventEnd }, internal$1.getEventRangeMeta(eventRange, todayRange)))) : (preact.createElement(DayGridBlockEvent, Object.assign({ eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: isDragging, isResizing: isResizing, isDateSelecting: isDateSelecting, isSelected: instanceId === eventSelection, defaultDisplayEventEnd: defaultDisplayEventEnd }, internal$1.getEventRangeMeta(eventRange, todayRange))))));
621
+ }, heightRef: (!standinFor && !isMirror)
622
+ ? segHeightRefMap.createRef(key)
623
+ : null }, hasListItemDisplay(seg) ? (preact.createElement(DayGridListEvent, Object.assign({ eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: isDragging, isSelected: instanceId === eventSelection, defaultDisplayEventEnd: defaultDisplayEventEnd }, internal$1.getEventRangeMeta(eventRange, todayRange)))) : (preact.createElement(DayGridBlockEvent, Object.assign({ eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: isDragging, isResizing: isResizing, isDateSelecting: isDateSelecting, isSelected: instanceId === eventSelection, defaultDisplayEventEnd: defaultDisplayEventEnd }, internal$1.getEventRangeMeta(eventRange, todayRange))))));
632
624
  }
633
625
  return nodes;
634
626
  }
@@ -639,17 +631,17 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
639
631
  const colCnt = props.cells.length;
640
632
  const nodes = [];
641
633
  for (const seg of segs) {
642
- const { left, right, width } = computeHorizontalsFromSeg(seg, colWidth, colCnt, isRtl);
643
- const isVisible = !seg.isStandin;
644
- nodes.push(preact.createElement("div", { key: internal$1.buildEventRangeKey(seg.eventRange), className: "fc-fill-y", style: {
634
+ const key = internal$1.buildEventRangeKey(seg.eventRange); // TODO: use different type of key than fg!?
635
+ const { left, right } = computeHorizontalsFromSeg(seg, colWidth, colCnt, isRtl);
636
+ const isVisible = !seg.standinFor;
637
+ nodes.push(preact.createElement("div", { key: key, className: "fc-fill-y", style: {
645
638
  visibility: isVisible ? '' : 'hidden',
646
639
  left,
647
640
  right,
648
- width,
649
641
  } }, fillType === 'bg-event' ?
650
642
  preact.createElement(internal$1.BgEvent, Object.assign({ eventRange: seg.eventRange, isStart: seg.isStart, isEnd: seg.isEnd }, internal$1.getEventRangeMeta(seg.eventRange, todayRange))) : (internal$1.renderFill(fillType))));
651
643
  }
652
- return preact.createElement(preact.Fragment, {}, ...nodes);
644
+ return preact.createElement(preact.Fragment, {}, ...nodes); // TODO: shouldn't this be an array, so keyed?
653
645
  }
654
646
  // Sizing
655
647
  // -----------------------------------------------------------------------------------------------
@@ -662,9 +654,36 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
662
654
  componentWillUnmount() {
663
655
  this.disconnectHeight();
664
656
  internal$1.setRef(this.props.heightRef, null);
665
- internal$1.setRef(this.props.innerHeightRef, null);
666
657
  }
667
- // Utils
658
+ computeFgDims() {
659
+ const { cells } = this.props;
660
+ const headerHeightMap = this.headerHeightRefMap.current;
661
+ const mainHeightMap = this.mainHeightRefMap.current;
662
+ let maxMainTop;
663
+ let minMainBottom;
664
+ for (const cell of cells) {
665
+ const mainTop = headerHeightMap.get(cell.key);
666
+ const mainHeight = mainHeightMap.get(cell.key);
667
+ if (mainTop != null) {
668
+ if (maxMainTop === undefined || mainTop > maxMainTop) {
669
+ maxMainTop = mainTop;
670
+ }
671
+ if (mainHeight != null) {
672
+ const mainBottom = mainTop + mainHeight;
673
+ if (minMainBottom === undefined || mainBottom < minMainBottom) {
674
+ minMainBottom = mainBottom;
675
+ }
676
+ }
677
+ }
678
+ }
679
+ return [
680
+ maxMainTop,
681
+ minMainBottom != null && maxMainTop != null
682
+ ? minMainBottom - maxMainTop
683
+ : undefined,
684
+ ];
685
+ }
686
+ // Internal Utils
668
687
  // -----------------------------------------------------------------------------------------------
669
688
  getMirrorSegs() {
670
689
  let { props } = this;
@@ -717,7 +736,7 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
717
736
  };
718
737
  }
719
738
  render() {
720
- let { props, state, context, rowHeightRefMap } = this;
739
+ let { props, context, rowHeightRefMap } = this;
721
740
  let { options } = context;
722
741
  let rowCnt = props.cellRows.length;
723
742
  let fgEventSegsByRow = this.splitFgEventSegs(props.fgEventSegs, rowCnt);
@@ -726,31 +745,31 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
726
745
  let dateSelectionSegsByRow = this.splitDateSelectionSegs(props.dateSelectionSegs, rowCnt);
727
746
  let eventDragByRow = this.splitEventDrag(props.eventDrag, rowCnt);
728
747
  let eventResizeByRow = this.splitEventResize(props.eventResize, rowCnt);
729
- // whether the ROW should expand in height
730
- // (not to be confused with whether the fg events within the row should be molded by height of row)
731
748
  let isHeightAuto = internal$1.getIsHeightAuto(options);
732
- // maintain at least aspectRatio for cells?
733
- let rowMinHeight = (state.width != null && (rowCnt >= 7 || // TODO: better way to infer if across single-month boundary
734
- isHeightAuto)) ? state.width / context.options.aspectRatio / 6 // okay to hardcode 6 (weeks) ?
735
- : null;
736
- return (preact.createElement("div", { className: 'fc-grow fc-flex-column', style: { width: props.width }, ref: this.handleRootEl }, props.cellRows.map((cells, row) => (preact.createElement(DayGridRow, { key: cells[0].key, dateProfile: props.dateProfile, todayRange: props.todayRange, cells: cells, showDayNumbers: rowCnt > 1, showWeekNumbers: options.weekNumbers, forPrint: props.forPrint, compact: state.width != null && (state.width / cells.length) < COMPACT_CELL_WIDTH,
749
+ let rowHeightsRedistribute = !props.forPrint && !isHeightAuto;
750
+ let [rowMinHeight, isCompact] = computeRowHeight(props.visibleWidth, rowCnt, isHeightAuto, props.forPrint, options);
751
+ return (preact.createElement("div", { className: internal$1.joinClassNames(
752
+ // HACK for Safari. Can't do break-inside:avoid with flexbox items, likely b/c it's not standard:
753
+ // https://stackoverflow.com/a/60256345
754
+ !props.forPrint && 'fc-flex-col', props.className), style: { width: props.width }, ref: this.handleRootEl }, props.cellRows.map((cells, row) => (preact.createElement(DayGridRow, { key: cells[0].key, dateProfile: props.dateProfile, todayRange: props.todayRange, cells: cells, showDayNumbers: rowCnt > 1, showWeekNumbers: options.weekNumbers, forPrint: props.forPrint, isCompact: isCompact,
737
755
  // if not auto-height, distribute height of container somewhat evently to rows
738
756
  // (treat all as zero, distribute height, then ensure min-heights -- the inner content height)
739
- className: isHeightAuto ? '' : 'fc-grow fc-basis0',
757
+ className: internal$1.joinClassNames(rowHeightsRedistribute && 'fc-grow fc-basis0', rowCnt > 1 && 'fc-break-inside-avoid', // don't avoid breaks for single tall row
758
+ row < rowCnt - 1 && 'fc-border-b'),
740
759
  // content
741
- fgEventSegs: fgEventSegsByRow[row], bgEventSegs: bgEventSegsByRow[row].filter(isSegAllDay) /* HACK */, businessHourSegs: businessHourSegsByRow[row], dateSelectionSegs: dateSelectionSegsByRow[row], eventSelection: props.eventSelection, eventDrag: eventDragByRow[row], eventResize: eventResizeByRow[row], dayMaxEvents: options.dayMaxEvents, dayMaxEventRows: options.dayMaxEventRows,
760
+ fgEventSegs: fgEventSegsByRow[row], bgEventSegs: bgEventSegsByRow[row].filter(isSegAllDay) /* HACK */, businessHourSegs: businessHourSegsByRow[row], dateSelectionSegs: dateSelectionSegsByRow[row], eventSelection: props.eventSelection, eventDrag: eventDragByRow[row], eventResize: eventResizeByRow[row], dayMaxEvents: props.dayMaxEvents, dayMaxEventRows: props.dayMaxEventRows,
742
761
  // dimensions
743
762
  colWidth: props.colWidth, minHeight: rowMinHeight,
744
763
  // refs
745
764
  heightRef: rowHeightRefMap.createRef(cells[0].key) })))));
746
765
  }
747
766
  componentDidMount() {
748
- this.detachWidth = internal$1.watchWidth(this.rootEl, (width) => {
767
+ this.disconnectWidth = internal$1.watchWidth(this.rootEl, (width) => {
749
768
  this.setState({ width });
750
769
  });
751
770
  }
752
771
  componentWillUnmount() {
753
- this.detachWidth();
772
+ this.disconnectWidth();
754
773
  }
755
774
  // Hit System
756
775
  // -----------------------------------------------------------------------------------------------
@@ -767,7 +786,7 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
767
786
  dateSpan: Object.assign({ range: {
768
787
  start: cellStartDate,
769
788
  end: cellEndDate,
770
- }, allDay: true }, cell.extraDateSpan),
789
+ }, allDay: true }, cell.dateSpanProps),
771
790
  // HACK. TODO: This is expensive to do every hit-query
772
791
  dayEl: getCellEl(getRowEl(this.rootEl, row), col),
773
792
  rect: {
@@ -785,28 +804,96 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
785
804
  function isSegAllDay(seg) {
786
805
  return seg.eventRange.def.allDay;
787
806
  }
807
+ function computeRowHeight(visibleWidth, // should INCLUDE any scrollbar width to avoid oscillation
808
+ rowCnt, isHeightAuto, forPrint, options) {
809
+ if (visibleWidth != null) {
810
+ // ensure a consistent row min-height modelled after a month with 6 rows respecting aspectRatio
811
+ // will result in same minHeight regardless of weekends, dayMinWidth, height:auto
812
+ const rowMinHeight = visibleWidth / options.aspectRatio / 6;
813
+ return [
814
+ forPrint
815
+ // special-case for print, which condenses whole-page width without notifying
816
+ // this is value that looks natural on paper for portrait/landscape
817
+ ? '6em'
818
+ // don't give minHeight when single-month non-auto-height
819
+ // TODO: better way to detect this with DateProfile?
820
+ : (rowCnt > 6 || isHeightAuto)
821
+ ? rowMinHeight
822
+ : undefined,
823
+ // isCompact?: just before most lone +more links hit bottom of cell
824
+ rowMinHeight < 70,
825
+ ];
826
+ }
827
+ return [undefined, false];
828
+ }
788
829
 
789
- class HeaderRow extends internal$1.BaseComponent {
830
+ class DayGridHeaderCell extends internal$1.BaseComponent {
831
+ constructor() {
832
+ super(...arguments);
833
+ this.handleInnerEl = (innerEl) => {
834
+ if (this.disconectInnerHeight) {
835
+ this.disconectInnerHeight();
836
+ this.disconectInnerHeight = undefined;
837
+ }
838
+ if (innerEl) {
839
+ this.disconectInnerHeight = internal$1.watchHeight(innerEl, (height) => {
840
+ internal$1.setRef(this.props.innerHeightRef, height);
841
+ });
842
+ }
843
+ else {
844
+ internal$1.setRef(this.props.innerHeightRef, null);
845
+ }
846
+ };
847
+ }
790
848
  render() {
791
849
  const { props } = this;
792
- return (preact.createElement("div", { role: props.cellGroup ? undefined : 'row', className: [
793
- props.cellGroup ? 'fc-flex-row' : 'fc-row',
794
- props.className || '',
795
- ].join(' ') }, props.cells.map((cell) => (preact.createElement(preact.Fragment, { key: props.getHeaderModelKey(cell) }, props.renderHeaderContent(cell, props.tierNum, undefined, // innerHeightRef
796
- props.colWidth))))));
850
+ const { renderConfig, dataConfig } = props;
851
+ return (preact.createElement(internal$1.ContentContainer, { tag: 'div', attrs: dataConfig.attrs, className: internal$1.joinClassNames(dataConfig.className, 'fc-header-cell fc-cell fc-flex-col fc-align-center', props.borderStart && 'fc-border-s', !props.isSticky && 'fc-crop', props.colWidth == null && 'fc-liquid'), style: {
852
+ width: props.colWidth != null
853
+ ? props.colWidth * (dataConfig.colSpan || 1)
854
+ : undefined,
855
+ }, renderProps: dataConfig.renderProps, generatorName: renderConfig.generatorName, customGenerator: renderConfig.customGenerator, defaultGenerator: internal$1.renderText, classNameGenerator:
856
+ // don't use custom classNames if disabled
857
+ // TODO: make DRY with DayCellContainer
858
+ dataConfig.renderProps.isDisabled ? undefined : renderConfig.classNameGenerator, didMount: renderConfig.didMount, willUnmount: renderConfig.willUnmount }, (InnerContainer) => (!dataConfig.renderProps.isDisabled && (preact.createElement(InnerContainer, { tag: dataConfig.isNavLink ? 'a' : 'div', attrs: dataConfig.innerAttrs, className: internal$1.joinClassNames('fc-cell-inner fc-flex-col fc-padding-sm', props.isSticky && 'fc-sticky-s'), elRef: this.handleInnerEl })))));
797
859
  }
798
860
  }
799
861
 
800
- function DayGridHeader(props) {
801
- return (preact.createElement("div", { className: [
802
- 'fc-rowgroup',
803
- 'fc-content-box',
804
- ...(props.extraClassNames || []),
805
- ].join(' '), style: {
806
- width: props.width,
807
- paddingLeft: props.paddingLeft,
808
- paddingRight: props.paddingRight,
809
- } }, props.headerTiers.map((cells, tierNum) => (preact.createElement(HeaderRow, { key: tierNum, tierNum: tierNum, cells: cells, renderHeaderContent: props.renderHeaderContent, getHeaderModelKey: props.getHeaderModelKey, colWidth: props.colWidth })))));
862
+ class DayGridHeaderRow extends internal$1.BaseComponent {
863
+ constructor() {
864
+ super(...arguments);
865
+ // ref
866
+ this.innerHeightRefMap = new internal$1.RefMap(() => {
867
+ internal$1.afterSize(this.handleInnerHeights);
868
+ });
869
+ this.handleInnerHeights = () => {
870
+ const innerHeightMap = this.innerHeightRefMap.current;
871
+ let max = 0;
872
+ for (const innerHeight of innerHeightMap.values()) {
873
+ max = Math.max(max, innerHeight);
874
+ }
875
+ if (this.currentInnerHeight !== max) {
876
+ this.currentInnerHeight = max;
877
+ internal$1.setRef(this.props.innerHeightRef, max);
878
+ }
879
+ };
880
+ }
881
+ render() {
882
+ const { props } = this;
883
+ return (preact.createElement("div", { role: 'row', className: internal$1.joinClassNames('fc-flex-row fc-content-box', props.className), style: { height: props.height } }, props.dataConfigs.map((dataConfig, cellI) => (preact.createElement(DayGridHeaderCell, { key: dataConfig.key, renderConfig: props.renderConfig, dataConfig: dataConfig, isSticky: props.isSticky, borderStart: Boolean(cellI), colWidth: props.colWidth, innerHeightRef: props.innerHeightRef })))));
884
+ }
885
+ }
886
+
887
+ /*
888
+ TODO: kill this class in favor of DayGridHeaderRows?
889
+ */
890
+ class DayGridHeader extends internal$1.BaseComponent {
891
+ render() {
892
+ const { props } = this;
893
+ return (preact.createElement("div", { className: internal$1.joinClassNames(props.className, 'fc-flex-col', props.width == null && 'fc-liquid'), style: {
894
+ width: props.width
895
+ } }, props.headerTiers.map((rowConfig, tierNum) => (preact.createElement(DayGridHeaderRow, Object.assign({}, rowConfig, { key: tierNum, className: tierNum ? 'fc-border-t' : '', colWidth: props.colWidth }))))));
896
+ }
810
897
  }
811
898
 
812
899
  class DayGridLayoutNormal extends internal$1.BaseComponent {
@@ -815,11 +902,11 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
815
902
  this.handleScroller = (scroller) => {
816
903
  internal$1.setRef(this.props.scrollerRef, scroller);
817
904
  };
818
- this.handleLeftScrollbarWidth = (leftScrollbarWidth) => {
819
- this.setState({ leftScrollbarWidth });
905
+ this.handleClientWidth = (clientWidth) => {
906
+ this.setState({ clientWidth });
820
907
  };
821
- this.handleRightScrollbarWidth = (rightScrollbarWidth) => {
822
- this.setState({ rightScrollbarWidth });
908
+ this.handleEndScrollbarWidth = (endScrollbarWidth) => {
909
+ this.setState({ endScrollbarWidth });
823
910
  };
824
911
  }
825
912
  render() {
@@ -828,24 +915,22 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
828
915
  const verticalScrollbars = !props.forPrint && !internal$1.getIsHeightAuto(options);
829
916
  const stickyHeaderDates = !props.forPrint && internal$1.getStickyHeaderDates(options);
830
917
  return (preact.createElement(preact.Fragment, null,
831
- options.dayHeaders && (preact.createElement(DayGridHeader, { headerTiers: props.headerTiers, renderHeaderContent: props.renderHeaderContent, getHeaderModelKey: props.getHeaderModelKey,
832
- // render hooks
833
- extraClassNames: [
834
- 'fc-daygrid-header',
835
- stickyHeaderDates ? 'fc-sticky-header' : '',
836
- ],
837
- // dimensions
838
- paddingLeft: state.leftScrollbarWidth, paddingRight: state.rightScrollbarWidth })),
839
- preact.createElement(internal$1.Scroller, { vertical: verticalScrollbars, leftScrollbarWidthRef: this.handleLeftScrollbarWidth, rightScrollbarWidthRef: this.handleRightScrollbarWidth, elClassNames: [
840
- 'fc-daygrid-body',
841
- 'fc-rowgroup',
842
- 'fc-flex-column',
843
- verticalScrollbars ? 'fc-liquid' : '',
844
- ], ref: this.handleScroller },
845
- preact.createElement(DayGridRows // .fc-grow
846
- , { dateProfile: props.dateProfile, todayRange: props.todayRange, cellRows: props.cellRows, forPrint: props.forPrint, isHitComboAllowed: props.isHitComboAllowed,
918
+ options.dayHeaders && (preact.createElement("div", { className: internal$1.joinClassNames(props.forPrint ? 'fc-print-header' : 'fc-flex-row', // col for print, row for screen
919
+ 'fc-border-b') },
920
+ preact.createElement(DayGridHeader, { headerTiers: props.headerTiers, className: internal$1.joinClassNames('fc-daygrid-header', stickyHeaderDates && 'fc-table-header-sticky') }),
921
+ Boolean(state.endScrollbarWidth) && (preact.createElement("div", { className: 'fc-border-s fc-filler', style: { minWidth: state.endScrollbarWidth } })))),
922
+ preact.createElement(internal$1.Scroller, { vertical: verticalScrollbars, clientWidthRef: this.handleClientWidth, endScrollbarWidthRef: this.handleEndScrollbarWidth, className: internal$1.joinClassNames('fc-daygrid-body',
923
+ // HACK for Safari. Can't do break-inside:avoid with flexbox items, likely b/c it's not standard:
924
+ // https://stackoverflow.com/a/60256345
925
+ !props.forPrint && 'fc-flex-col', verticalScrollbars && 'fc-liquid'), ref: this.handleScroller },
926
+ preact.createElement(DayGridRows, { dateProfile: props.dateProfile, todayRange: props.todayRange, cellRows: props.cellRows, forPrint: props.forPrint, isHitComboAllowed: props.isHitComboAllowed, className: 'fc-grow', dayMaxEvents: props.forPrint ? undefined : options.dayMaxEvents, dayMaxEventRows: options.dayMaxEventRows,
847
927
  // content
848
928
  fgEventSegs: props.fgEventSegs, bgEventSegs: props.bgEventSegs, businessHourSegs: props.businessHourSegs, dateSelectionSegs: props.dateSelectionSegs, eventDrag: props.eventDrag, eventResize: props.eventResize, eventSelection: props.eventSelection,
929
+ // dimensions
930
+ visibleWidth: // TODO: DRY
931
+ state.clientWidth != null && state.endScrollbarWidth != null
932
+ ? state.clientWidth + state.endScrollbarWidth
933
+ : undefined,
849
934
  // refs
850
935
  rowHeightRefMap: props.rowHeightRefMap }))));
851
936
  }
@@ -859,14 +944,11 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
859
944
  this.footerScrollerRef = preact.createRef();
860
945
  // Sizing
861
946
  // -----------------------------------------------------------------------------------------------
862
- this.handleWidth = (width) => {
863
- this.setState({ width });
864
- };
865
- this.handleLeftScrollbarWidth = (leftScrollbarWidth) => {
866
- this.setState({ leftScrollbarWidth });
947
+ this.handleClientWidth = (clientWidth) => {
948
+ this.setState({ clientWidth });
867
949
  };
868
- this.handleRightScrollbarWidth = (rightScrollbarWidth) => {
869
- this.setState({ rightScrollbarWidth });
950
+ this.handleEndScrollbarWidth = (endScrollbarWidth) => {
951
+ this.setState({ endScrollbarWidth });
870
952
  };
871
953
  }
872
954
  render() {
@@ -876,37 +958,29 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
876
958
  const stickyHeaderDates = !props.forPrint && internal$1.getStickyHeaderDates(options);
877
959
  const stickyFooterScrollbar = !props.forPrint && internal$1.getStickyFooterScrollbar(options);
878
960
  const colCnt = props.cellRows[0].length;
879
- const [canvasWidth, colWidth] = computeColWidth(colCnt, props.dayMinWidth, state.width);
961
+ const [canvasWidth, colWidth] = computeColWidth(colCnt, props.dayMinWidth, state.clientWidth);
880
962
  return (preact.createElement(preact.Fragment, null,
881
- options.dayHeaders && (preact.createElement(internal$1.Scroller, { horizontal: true, hideScrollbars: true, elClassNames: [
882
- 'fc-daygrid-header',
883
- 'fc-rowgroup',
884
- stickyHeaderDates ? 'fc-sticky-header' : ''
885
- ], ref: this.headerScrollerRef },
886
- preact.createElement(DayGridHeader, { headerTiers: props.headerTiers, renderHeaderContent: props.renderHeaderContent, getHeaderModelKey: props.getHeaderModelKey,
887
- // dimensions
888
- colWidth: colWidth, width: canvasWidth, paddingLeft: state.leftScrollbarWidth, paddingRight: state.rightScrollbarWidth }))),
889
- preact.createElement(internal$1.Scroller, { vertical: verticalScrollbars, horizontal: true, hideScrollbars: stickyFooterScrollbar, widthRef: this.handleWidth, leftScrollbarWidthRef: this.handleLeftScrollbarWidth, rightScrollbarWidthRef: this.handleRightScrollbarWidth, elClassNames: [
890
- 'fc-daygrid-body',
891
- 'fc-rowgroup',
892
- 'fc-flex-column',
893
- verticalScrollbars ? 'fc-liquid' : '',
894
- ], ref: this.bodyScrollerRef },
895
- preact.createElement(DayGridRows // .fc-grow
896
- , { dateProfile: props.dateProfile, todayRange: props.todayRange, cellRows: props.cellRows, forPrint: props.forPrint, isHitComboAllowed: props.isHitComboAllowed,
963
+ options.dayHeaders && (preact.createElement("div", { className: 'fc-print-header' },
964
+ preact.createElement(internal$1.Scroller, { horizontal: true, hideScrollbars: true, className: internal$1.joinClassNames('fc-daygrid-header fc-flex-row fc-border-b', stickyHeaderDates && 'fc-table-header-sticky'), ref: this.headerScrollerRef },
965
+ preact.createElement(DayGridHeader, { headerTiers: props.headerTiers, colWidth: colWidth, width: canvasWidth }),
966
+ Boolean(state.endScrollbarWidth) && (preact.createElement("div", { className: 'fc-border-s fc-filler', style: { minWidth: state.endScrollbarWidth } }))))),
967
+ preact.createElement(internal$1.Scroller, { vertical: verticalScrollbars, horizontal: true, hideScrollbars: stickyFooterScrollbar ||
968
+ props.forPrint // prevents blank space in print-view on Safari
969
+ , className: internal$1.joinClassNames('fc-daygrid-body',
970
+ // HACK for Safari. Can't do break-inside:avoid with flexbox items, likely b/c it's not standard:
971
+ // https://stackoverflow.com/a/60256345
972
+ !props.forPrint && 'fc-flex-col', verticalScrollbars && 'fc-liquid'), ref: this.bodyScrollerRef, clientWidthRef: this.handleClientWidth, endScrollbarWidthRef: this.handleEndScrollbarWidth },
973
+ preact.createElement(DayGridRows, { dateProfile: props.dateProfile, todayRange: props.todayRange, cellRows: props.cellRows, forPrint: props.forPrint, isHitComboAllowed: props.isHitComboAllowed, className: 'fc-grow', dayMaxEvents: props.forPrint ? undefined : options.dayMaxEvents, dayMaxEventRows: options.dayMaxEventRows,
897
974
  // content
898
975
  fgEventSegs: props.fgEventSegs, bgEventSegs: props.bgEventSegs, businessHourSegs: props.businessHourSegs, dateSelectionSegs: props.dateSelectionSegs, eventDrag: props.eventDrag, eventResize: props.eventResize, eventSelection: props.eventSelection,
899
976
  // dimensions
900
- colWidth: colWidth, width: canvasWidth,
977
+ colWidth: colWidth, width: canvasWidth, visibleWidth: // TODO: DRY
978
+ state.clientWidth != null && state.endScrollbarWidth != null
979
+ ? state.clientWidth + state.endScrollbarWidth
980
+ : undefined,
901
981
  // refs
902
982
  rowHeightRefMap: props.rowHeightRefMap })),
903
- Boolean(stickyFooterScrollbar) && (preact.createElement(internal$1.Scroller, { ref: this.footerScrollerRef, horizontal: true, elClassNames: ['fc-sticky-footer'], elStyle: {
904
- marginTop: '-1px', // HACK
905
- } },
906
- preact.createElement("div", { style: {
907
- width: canvasWidth,
908
- height: '1px', // HACK
909
- } })))));
983
+ Boolean(stickyFooterScrollbar) && (preact.createElement(internal$1.StickyFooterScrollbar, { canvasWidth: canvasWidth, scrollerRef: this.footerScrollerRef }))));
910
984
  }
911
985
  // Lifecycle
912
986
  // -----------------------------------------------------------------------------------------------
@@ -969,7 +1043,7 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
969
1043
  const { props, context } = this;
970
1044
  const { options } = context;
971
1045
  const commonLayoutProps = Object.assign(Object.assign({}, props), { scrollerRef: this.scrollerRef, rowHeightRefMap: this.rowHeightRefMap });
972
- return (preact.createElement(internal$1.ViewContainer, { viewSpec: context.viewSpec, elClasses: [props.className, 'fc-flex-column', 'fc-border'] }, options.dayMinWidth ? (preact.createElement(DayGridLayoutPannable, Object.assign({}, commonLayoutProps, { dayMinWidth: options.dayMinWidth }))) : (preact.createElement(DayGridLayoutNormal, Object.assign({}, commonLayoutProps)))));
1046
+ return (preact.createElement(internal$1.ViewContainer, { viewSpec: context.viewSpec, className: internal$1.joinClassNames(props.className, 'fc-print-root fc-border') }, options.dayMinWidth ? (preact.createElement(DayGridLayoutPannable, Object.assign({}, commonLayoutProps, { dayMinWidth: options.dayMinWidth }))) : (preact.createElement(DayGridLayoutNormal, Object.assign({}, commonLayoutProps)))));
973
1047
  }
974
1048
  // Lifecycle
975
1049
  // -----------------------------------------------------------------------------------------------
@@ -996,85 +1070,12 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
996
1070
  }
997
1071
  }
998
1072
 
999
- const WEEKDAY_FORMAT = internal$1.createFormatter({ weekday: 'long' });
1000
- class DayOfWeekHeaderCell extends internal$1.BaseComponent {
1001
- constructor() {
1002
- super(...arguments);
1003
- // ref
1004
- this.innerElRef = preact.createRef();
1005
- }
1006
- render() {
1007
- let { props, context } = this;
1008
- let { dateEnv, theme, viewApi, options } = context;
1009
- let date = internal$1.addDays(new Date(259200000), props.dow); // start with Sun, 04 Jan 1970 00:00:00 GMT
1010
- let dateMeta = {
1011
- dow: props.dow,
1012
- isDisabled: false,
1013
- isFuture: false,
1014
- isPast: false,
1015
- isToday: false,
1016
- isOther: false,
1017
- };
1018
- let text = dateEnv.format(date, props.dayHeaderFormat);
1019
- let renderProps = Object.assign(Object.assign(Object.assign(Object.assign({ date }, dateMeta), { view: viewApi }), props.extraRenderProps), { text });
1020
- return (preact.createElement(internal$1.ContentContainer, { elTag: 'div', elClasses: [
1021
- ...internal$1.getDayClassNames(dateMeta, theme),
1022
- ...(props.extraClassNames || []),
1023
- 'fc-header-cell',
1024
- 'fc-cell',
1025
- props.colWidth != null ? '' : 'fc-liquid',
1026
- 'fc-flex-column',
1027
- 'fc-align-center',
1028
- ], elAttrs: props.extraDataAttrs, elStyle: {
1029
- width: props.colWidth != null // TODO: DRY
1030
- ? props.colWidth * (props.colSpan || 1)
1031
- : undefined,
1032
- }, renderProps: renderProps, generatorName: "dayHeaderContent", customGenerator: options.dayHeaderContent, defaultGenerator: renderInner, classNameGenerator: options.dayHeaderClassNames, didMount: options.dayHeaderDidMount, willUnmount: options.dayHeaderWillUnmount }, (InnerContent) => (preact.createElement("div", { ref: this.innerElRef, className: [
1033
- 'fc-flex-column',
1034
- props.isSticky ? 'fc-sticky-x' : '',
1035
- ].join(' ') },
1036
- preact.createElement(InnerContent, { elTag: "a", elClasses: [
1037
- 'fc-cell-inner',
1038
- 'fc-padding-sm',
1039
- ], elAttrs: {
1040
- 'aria-label': dateEnv.format(date, WEEKDAY_FORMAT),
1041
- } })))));
1042
- }
1043
- componentDidMount() {
1044
- const innerEl = this.innerElRef.current; // TODO: make dynamic with useEffect
1045
- // TODO: only attach this if refs props present
1046
- this.disconectInnerHeight = internal$1.watchHeight(innerEl, (height) => {
1047
- internal$1.setRef(this.props.innerHeightRef, height);
1048
- });
1049
- }
1050
- componentWillUnmount() {
1051
- this.disconectInnerHeight();
1052
- internal$1.setRef(this.props.innerHeightRef, null);
1053
- }
1054
- }
1055
-
1056
- function createDayHeaderFormatter(explicitFormat, datesRepDistinctDays, dateCnt) {
1057
- return explicitFormat || computeFallbackHeaderFormat(datesRepDistinctDays, dateCnt);
1058
- }
1059
- // Computes a default column header formatting string if `colFormat` is not explicitly defined
1060
- function computeFallbackHeaderFormat(datesRepDistinctDays, dayCnt) {
1061
- // if more than one week row, or if there are a lot of columns with not much space,
1062
- // put just the day numbers will be in each cell
1063
- if (!datesRepDistinctDays || dayCnt > 10) {
1064
- return internal$1.createFormatter({ weekday: 'short' }); // "Sat"
1065
- }
1066
- if (dayCnt > 1) {
1067
- return internal$1.createFormatter({ weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true }); // "Sat 11/12"
1068
- }
1069
- return internal$1.createFormatter({ weekday: 'long' }); // "Saturday"
1070
- }
1071
-
1072
1073
  class DayGridView extends internal$1.BaseComponent {
1073
1074
  constructor() {
1074
1075
  super(...arguments);
1075
1076
  // memo
1076
1077
  this.buildDayTableModel = internal$1.memoize(buildDayTableModel);
1077
- this.buildHeaderTiers = internal$1.memoize(buildHeaderTiers);
1078
+ this.buildDateRowConfigs = internal$1.memoize(buildDateRowConfigs);
1078
1079
  this.createDayHeaderFormatter = internal$1.memoize(createDayHeaderFormatter);
1079
1080
  // internal
1080
1081
  this.slicer = new DayTableSlicer();
@@ -1084,27 +1085,16 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
1084
1085
  const { options } = context;
1085
1086
  const dayTableModel = this.buildDayTableModel(props.dateProfile, context.dateProfileGenerator);
1086
1087
  const datesRepDistinctDays = dayTableModel.rowCnt === 1;
1087
- const headerTiers = this.buildHeaderTiers(dayTableModel.headerDates, datesRepDistinctDays);
1088
- const slicedProps = this.slicer.sliceProps(props, props.dateProfile, options.nextDayThreshold, context, dayTableModel);
1089
1088
  const dayHeaderFormat = this.createDayHeaderFormatter(context.options.dayHeaderFormat, datesRepDistinctDays, dayTableModel.colCnt);
1090
- return (preact.createElement(internal$1.NowTimer, { unit: "day" }, (nowDate, todayRange) => (preact.createElement(DayGridLayout, { dateProfile: props.dateProfile, todayRange: todayRange, cellRows: dayTableModel.cellRows, forPrint: props.forPrint, className: 'fc-daygrid-view',
1091
- // header content
1092
- headerTiers: headerTiers, renderHeaderContent: (model, tier, innerHeightRef, colWidth) => {
1093
- if (model.date) {
1094
- return (preact.createElement(DateHeaderCell, Object.assign({}, model, { dateProfile: props.dateProfile, todayRange: todayRange, navLink: dayTableModel.colCnt > 1, dayHeaderFormat: dayHeaderFormat, colSpan: model.colSpan, colWidth: colWidth })));
1095
- }
1096
- else {
1097
- return (preact.createElement(DayOfWeekHeaderCell, Object.assign({}, model, { dayHeaderFormat: dayHeaderFormat, colSpan: model.colSpan, colWidth: colWidth })));
1098
- }
1099
- }, getHeaderModelKey: (model) => {
1100
- // can use model.key???
1101
- if (model.date) {
1102
- return model.date.toUTCString();
1103
- }
1104
- return model.dow;
1105
- },
1106
- // body content
1107
- fgEventSegs: slicedProps.fgEventSegs, bgEventSegs: slicedProps.bgEventSegs, businessHourSegs: slicedProps.businessHourSegs, dateSelectionSegs: slicedProps.dateSelectionSegs, eventDrag: slicedProps.eventDrag, eventResize: slicedProps.eventResize, eventSelection: slicedProps.eventSelection }))));
1089
+ const slicedProps = this.slicer.sliceProps(props, props.dateProfile, options.nextDayThreshold, context, dayTableModel);
1090
+ return (preact.createElement(internal$1.NowTimer, { unit: "day" }, (nowDate, todayRange) => {
1091
+ const headerTiers = this.buildDateRowConfigs(dayTableModel.headerDates, datesRepDistinctDays, props.dateProfile, todayRange, dayHeaderFormat, context);
1092
+ return (preact.createElement(DayGridLayout, { dateProfile: props.dateProfile, todayRange: todayRange, cellRows: dayTableModel.cellRows, forPrint: props.forPrint, className: 'fc-daygrid',
1093
+ // header content
1094
+ headerTiers: headerTiers,
1095
+ // body content
1096
+ fgEventSegs: slicedProps.fgEventSegs, bgEventSegs: slicedProps.bgEventSegs, businessHourSegs: slicedProps.businessHourSegs, dateSelectionSegs: slicedProps.dateSelectionSegs, eventDrag: slicedProps.eventDrag, eventResize: slicedProps.eventResize, eventSelection: slicedProps.eventSelection }));
1097
+ }));
1108
1098
  }
1109
1099
  }
1110
1100
 
@@ -1146,7 +1136,7 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
1146
1136
  return { start, end };
1147
1137
  }
1148
1138
 
1149
- var css_248z = ":root{--fc-daygrid-event-dot-width:8px}.fc-daygrid-week-number{background-color:var(--fc-neutral-bg-color);color:var(--fc-neutral-text-color);min-width:1.5em;padding:2px;position:absolute;text-align:center;top:0;z-index:5}.fc-daygrid-cell.fc-day-today{background-color:var(--fc-today-bg-color)}.fc-daygrid-row-spacious .fc-daygrid-cell-inner{min-height:3em}.fc-daygrid-cell-header{display:flex;flex-direction:row-reverse}.fc-day-other .fc-daygrid-cell-header{opacity:.3}.fc-daygrid-cell-number{padding:4px;position:relative;z-index:4}.fc-daygrid-month-start{font-size:1.1em;font-weight:700}.fc-daygrid-cell-footer{align-items:flex-start;display:flex;flex-direction:column;font-size:.85em;margin:0 2px}.fc-daygrid-row-spacious .fc-daygrid-cell-footer{margin-bottom:1em!important}.fc-daygrid-row-compact .fc-daygrid-cell-footer{align-items:stretch}.fc-daygrid-more-link{border-radius:3px;cursor:pointer;line-height:1;margin-top:1px;max-width:100%;overflow:hidden;padding:2px;position:relative;white-space:nowrap;z-index:4}.fc-daygrid-more-link:hover{background-color:rgba(0,0,0,.1)}.fc-daygrid-row-compact .fc-daygrid-more-link{border:1px solid var(--fc-event-border-color);padding:1px}.fc-daygrid-cell .fc-non-business{z-index:1}.fc-daygrid-cell .fc-bg-event{z-index:2}.fc-daygrid-cell .fc-highlight{z-index:3}.fc-more-popover .fc-popover-body{min-width:220px;padding:10px}.fc-daygrid-event{border-radius:3px;font-size:var(--fc-small-font-size);margin-top:1px;z-index:6}.fc-daygrid-event.fc-event-mirror{z-index:7}.fc-direction-ltr .fc-daygrid-event.fc-event-start,.fc-direction-rtl .fc-daygrid-event.fc-event-end{margin-left:2px}.fc-direction-ltr .fc-daygrid-event.fc-event-end,.fc-direction-rtl .fc-daygrid-event.fc-event-start{margin-right:2px}.fc-direction-ltr .fc-daygrid-event .fc-event-time{margin-right:3px}.fc-direction-rtl .fc-daygrid-event .fc-event-time{margin-left:3px}.fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-start),.fc-direction-rtl .fc-daygrid-block-event:not(.fc-event-end){border-bottom-left-radius:0;border-left-width:0;border-top-left-radius:0}.fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-end),.fc-direction-rtl .fc-daygrid-block-event:not(.fc-event-start){border-bottom-right-radius:0;border-right-width:0;border-top-right-radius:0}.fc-daygrid-block-event .fc-event-time{font-weight:700}.fc-daygrid-block-event .fc-event-time,.fc-daygrid-block-event .fc-event-title{padding:1px}.fc-daygrid-dot-event{align-items:center;direction:row;display:flex;padding:2px 0;position:relative}.fc-daygrid-dot-event.fc-event-mirror,.fc-daygrid-dot-event:hover{background:rgba(0,0,0,.1)}.fc-daygrid-event-dot{border:calc(var(--fc-daygrid-event-dot-width)/2) solid var(--fc-event-border-color);border-radius:calc(var(--fc-daygrid-event-dot-width)/2);box-sizing:content-box;height:0;margin:0 4px;width:0}.fc-daygrid-dot-event .fc-event-time,.fc-daygrid-dot-event .fc-event-title{overflow:hidden;white-space:nowrap}.fc-daygrid-dot-event .fc-event-title{flex-basis:0;flex-grow:1;font-weight:700;min-width:0}";
1139
+ var css_248z = ":root{--fc-daygrid-event-dot-width:8px}.fc-daygrid-day.fc-day-today{background-color:var(--fc-today-bg-color)}.fc-daygrid-day-header{display:flex;flex-direction:row-reverse}.fc-day-other .fc-daygrid-day-header{opacity:.3}.fc-daygrid-day-number{padding:4px;position:relative}.fc-daygrid-month-start{font-size:1.1em;font-weight:700}.fc-daygrid-day-body{display:flex;flex-direction:column;margin-bottom:1px}.fc-daygrid-day-body-tall{margin-bottom:1em;min-height:2em}.fc-daygrid-day-body:only-child{margin-top:2px}.fc-daygrid-more-link{border-radius:3px;cursor:pointer;font-size:var(--fc-small-font-size);margin:0 2px 1px;max-width:100%;overflow:hidden;padding:2px;position:relative;white-space:nowrap}.fc-daygrid-more-link:hover{background-color:rgba(0,0,0,.1)}.fc-daygrid-more-link-button{align-self:flex-start}.fc-daygrid-more-link-block{border:1px solid var(--fc-event-border-color);padding:1px}.fc-daygrid-week-number{background-color:var(--fc-neutral-bg-color);color:var(--fc-neutral-text-color);min-width:1.5em;padding:2px;position:absolute;text-align:center;top:0}.fc-more-popover .fc-popover-body{min-width:220px;padding:10px}.fc-daygrid-event{border-radius:3px;font-size:var(--fc-small-font-size);margin-bottom:1px}.fc-media-print .fc-daygrid-event{overflow:hidden!important;white-space:nowrap!important}.fc-direction-ltr .fc-daygrid-event.fc-event-start,.fc-direction-rtl .fc-daygrid-event.fc-event-end{margin-left:2px}.fc-direction-ltr .fc-daygrid-event.fc-event-end,.fc-direction-rtl .fc-daygrid-event.fc-event-start{margin-right:2px}.fc-direction-ltr .fc-daygrid-event .fc-event-time{margin-right:3px}.fc-direction-rtl .fc-daygrid-event .fc-event-time{margin-left:3px}.fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-start),.fc-direction-rtl .fc-daygrid-block-event:not(.fc-event-end){border-bottom-left-radius:0;border-left-width:0;border-top-left-radius:0}.fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-end),.fc-direction-rtl .fc-daygrid-block-event:not(.fc-event-start){border-bottom-right-radius:0;border-right-width:0;border-top-right-radius:0}.fc-daygrid-block-event .fc-event-time{font-weight:700}.fc-daygrid-block-event .fc-event-time,.fc-daygrid-block-event .fc-event-title{padding:1px}.fc-daygrid-dot-event{align-items:center;direction:row;display:flex;padding:2px 0;position:relative;z-index:2}.fc-daygrid-dot-event.fc-event-mirror,.fc-daygrid-dot-event:hover{background:rgba(0,0,0,.1)}.fc-daygrid-dot-event.fc-event-selected:before{bottom:-10px;top:-10px}.fc-daygrid-event-dot{border:calc(var(--fc-daygrid-event-dot-width)/2) solid var(--fc-event-border-color);border-radius:calc(var(--fc-daygrid-event-dot-width)/2);box-sizing:content-box;height:0;margin:0 4px;width:0}.fc-daygrid-dot-event .fc-event-time,.fc-daygrid-dot-event .fc-event-title{overflow:hidden;white-space:nowrap}.fc-daygrid-dot-event .fc-event-title{flex-basis:0;flex-grow:1;font-weight:700;min-height:0;min-width:0}";
1150
1140
  internal$1.injectStyles(css_248z);
1151
1141
 
1152
1142
  var plugin = core.createPlugin({
@@ -1177,52 +1167,21 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
1177
1167
  },
1178
1168
  });
1179
1169
 
1180
- /*
1181
- TODO: is it even worth doing this "advanced" version?
1182
- */
1183
- class HeaderRowAdvanced extends internal$1.BaseComponent {
1184
- constructor() {
1185
- super(...arguments);
1186
- // ref
1187
- this.innerHeightRefMap = new internal$1.RefMap(() => {
1188
- internal$1.afterSize(this.handleInnerHeights);
1189
- });
1190
- this.handleInnerHeights = () => {
1191
- const innerHeightMap = this.innerHeightRefMap.current;
1192
- let max = 0;
1193
- for (const innerHeight of innerHeightMap.values()) {
1194
- max = Math.max(max, innerHeight);
1195
- }
1196
- if (this.currentInnerHeight !== max) {
1197
- this.currentInnerHeight = max;
1198
- internal$1.setRef(this.props.innerHeightRef, max);
1199
- }
1200
- };
1201
- }
1202
- render() {
1203
- const { props } = this;
1204
- return (preact.createElement("div", { role: 'row', className: 'fc-row', style: { height: props.height } }, props.cells.map((cell) => {
1205
- const key = props.getHeaderModelKey(cell);
1206
- return (preact.createElement(preact.Fragment, { key: props.getHeaderModelKey(cell) }, props.renderHeaderContent(cell, props.tierNum, this.innerHeightRefMap.createRef(key), // innerHeightRef
1207
- props.colWidth)));
1208
- })));
1209
- }
1210
- }
1211
-
1212
1170
  var internal = {
1213
1171
  __proto__: null,
1214
1172
  DayTableSlicer: DayTableSlicer,
1215
1173
  TableDateProfileGenerator: TableDateProfileGenerator,
1216
1174
  buildDayTableRenderRange: buildDayTableRenderRange,
1217
1175
  DayGridView: DayGridView,
1218
- DateHeaderCell: DateHeaderCell,
1219
- DayOfWeekHeaderCell: DayOfWeekHeaderCell,
1220
- HeaderRow: HeaderRow,
1221
- HeaderRowAdvanced: HeaderRowAdvanced,
1176
+ DayGridHeaderRow: DayGridHeaderRow,
1177
+ buildDateRowConfigs: buildDateRowConfigs,
1178
+ buildDateRowConfig: buildDateRowConfig,
1179
+ buildDateRenderConfig: buildDateRenderConfig,
1180
+ buildDateDataConfigs: buildDateDataConfigs,
1222
1181
  createDayHeaderFormatter: createDayHeaderFormatter,
1223
1182
  DayGridLayout: DayGridLayout,
1183
+ computeRowHeight: computeRowHeight,
1224
1184
  DayGridRow: DayGridRow,
1225
- COMPACT_CELL_WIDTH: COMPACT_CELL_WIDTH,
1226
1185
  DayGridRows: DayGridRows,
1227
1186
  buildDayTableModel: buildDayTableModel,
1228
1187
  computeColWidth: computeColWidth,