@fullcalendar/daygrid 7.0.0-beta.1 → 7.0.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.global.js +639 -631
- package/index.global.min.js +2 -2
- package/internal.cjs +673 -665
- package/internal.d.ts +138 -173
- package/internal.js +670 -663
- 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.
|
|
2
|
+
FullCalendar Day Grid Plugin v7.0.0-beta.4
|
|
3
3
|
Docs & License: https://fullcalendar.io/docs/month-view
|
|
4
4
|
(c) 2024 Adam Shaw
|
|
5
5
|
*/
|
|
@@ -16,155 +16,110 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
|
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
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
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
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
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
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
|
-
|
|
116
|
-
|
|
40
|
+
/*
|
|
41
|
+
For header cells: how to connect w/ custom rendering
|
|
42
|
+
Applies to all cells in a row
|
|
43
|
+
*/
|
|
44
|
+
function buildDateRenderConfig(context) {
|
|
45
|
+
const { options } = context;
|
|
46
|
+
return {
|
|
47
|
+
generatorName: 'dayHeaderContent',
|
|
48
|
+
customGenerator: options.dayHeaderContent,
|
|
49
|
+
classNameGenerator: options.dayHeaderClassNames,
|
|
50
|
+
didMount: options.dayHeaderDidMount,
|
|
51
|
+
willUnmount: options.dayHeaderWillUnmount,
|
|
52
|
+
};
|
|
117
53
|
}
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
54
|
+
/*
|
|
55
|
+
For header cells: data
|
|
56
|
+
*/
|
|
57
|
+
function buildDateDataConfigs(dates, datesRepDistinctDays, dateProfile, todayRange, dayHeaderFormat, // TODO: rename to dateHeaderFormat?
|
|
58
|
+
context, colSpan = 1, keyPrefix = '') {
|
|
59
|
+
const { dateEnv, viewApi, options } = context;
|
|
60
|
+
return datesRepDistinctDays
|
|
61
|
+
? dates.map((date) => {
|
|
62
|
+
const dateMeta = internal$1.getDateMeta(date, todayRange, null, dateProfile);
|
|
63
|
+
const text = dateEnv.format(date, dayHeaderFormat);
|
|
64
|
+
const renderProps = Object.assign(Object.assign({}, dateMeta), { date: dateEnv.toDate(date), view: viewApi, text });
|
|
65
|
+
const isNavLink = options.navLinks && !dateMeta.isDisabled;
|
|
66
|
+
const fullDateStr = internal$1.buildDateStr(context, date);
|
|
67
|
+
// for DayGridHeaderCell
|
|
68
|
+
return {
|
|
69
|
+
key: keyPrefix + date.toUTCString(),
|
|
70
|
+
renderProps,
|
|
71
|
+
attrs: Object.assign(Object.assign({ 'aria-label': fullDateStr }, (dateMeta.isToday ? { 'aria-current': 'date' } : {})), { 'data-date': internal$1.formatDayString(date) }),
|
|
72
|
+
// for navlink
|
|
73
|
+
innerAttrs: isNavLink
|
|
74
|
+
? internal$1.buildNavLinkAttrs(context, date, undefined, fullDateStr)
|
|
75
|
+
: { 'aria-hidden': true },
|
|
76
|
+
colSpan,
|
|
77
|
+
isNavLink,
|
|
78
|
+
className: internal$1.getDayClassName(dateMeta),
|
|
79
|
+
};
|
|
80
|
+
})
|
|
81
|
+
: dates.map((date) => {
|
|
82
|
+
const dow = date.getUTCDay();
|
|
83
|
+
const normDate = internal$1.addDays(firstSunday, dow);
|
|
84
|
+
const dayMeta = {
|
|
85
|
+
dow,
|
|
86
|
+
isDisabled: false,
|
|
87
|
+
isFuture: false,
|
|
88
|
+
isPast: false,
|
|
89
|
+
isToday: false,
|
|
90
|
+
isOther: false,
|
|
91
|
+
};
|
|
92
|
+
const text = dateEnv.format(normDate, dayHeaderFormat);
|
|
93
|
+
const renderProps = Object.assign(Object.assign({}, dayMeta), { date, view: viewApi, text });
|
|
94
|
+
const fullWeekDayStr = dateEnv.format(normDate, WEEKDAY_FORMAT);
|
|
95
|
+
// for DayGridHeaderCell
|
|
96
|
+
return {
|
|
97
|
+
key: keyPrefix + String(dow),
|
|
98
|
+
renderProps,
|
|
99
|
+
attrs: {
|
|
100
|
+
'aria-label': fullWeekDayStr,
|
|
101
|
+
},
|
|
102
|
+
// for navlink
|
|
103
|
+
innerAttrs: {
|
|
104
|
+
'aria-hidden': true, // label already on cell
|
|
105
|
+
},
|
|
106
|
+
colSpan,
|
|
107
|
+
className: internal$1.getDayClassName(dayMeta),
|
|
108
|
+
};
|
|
160
109
|
});
|
|
161
|
-
}
|
|
162
|
-
componentWillUnmount() {
|
|
163
|
-
this.disconectInnerHeight();
|
|
164
|
-
internal$1.setRef(this.props.innerHeightRef, null);
|
|
165
|
-
}
|
|
166
110
|
}
|
|
167
111
|
|
|
112
|
+
/*
|
|
113
|
+
We need really specific keys because RefMap::createRef() which is then given to heightRef
|
|
114
|
+
unable to change key! As a result, we cannot reuse elements between normal/slice/standin types,
|
|
115
|
+
but that's okay since they render quite differently
|
|
116
|
+
*/
|
|
117
|
+
function getEventPartKey(seg) {
|
|
118
|
+
return internal$1.getEventKey(seg) + ':' + seg.start +
|
|
119
|
+
(seg.standinFor ? ':standin' : seg.isSlice ? ':slice' : '');
|
|
120
|
+
}
|
|
121
|
+
// DayGridRange utils (TODO: move)
|
|
122
|
+
// -------------------------------------------------------------------------------------------------
|
|
168
123
|
function splitSegsByRow(segs, rowCnt) {
|
|
169
124
|
const byRow = [];
|
|
170
125
|
for (let row = 0; row < rowCnt; row++) {
|
|
@@ -196,20 +151,8 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
|
|
|
196
151
|
}
|
|
197
152
|
return byRow;
|
|
198
153
|
}
|
|
199
|
-
function
|
|
200
|
-
|
|
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;
|
|
154
|
+
function sliceSegForCol(seg, col) {
|
|
155
|
+
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
156
|
}
|
|
214
157
|
|
|
215
158
|
const DEFAULT_TABLE_EVENT_TIME_FORMAT = internal$1.createFormatter({
|
|
@@ -222,7 +165,7 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
|
|
|
222
165
|
let { display } = seg.eventRange.ui;
|
|
223
166
|
return display === 'list-item' || (display === 'auto' &&
|
|
224
167
|
!seg.eventRange.def.allDay &&
|
|
225
|
-
seg.
|
|
168
|
+
(seg.end - seg.start) === 1 && // single-day
|
|
226
169
|
seg.isStart && // "
|
|
227
170
|
seg.isEnd // "
|
|
228
171
|
);
|
|
@@ -231,7 +174,7 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
|
|
|
231
174
|
class DayGridBlockEvent extends internal$1.BaseComponent {
|
|
232
175
|
render() {
|
|
233
176
|
let { props } = this;
|
|
234
|
-
return (preact.createElement(internal$1.StandardEvent, Object.assign({}, props, {
|
|
177
|
+
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
178
|
}
|
|
236
179
|
}
|
|
237
180
|
|
|
@@ -241,8 +184,12 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
|
|
|
241
184
|
let { options } = context;
|
|
242
185
|
let { eventRange } = props;
|
|
243
186
|
let timeFormat = options.eventTimeFormat || DEFAULT_TABLE_EVENT_TIME_FORMAT;
|
|
244
|
-
let timeText = internal$1.buildEventRangeTimeText(
|
|
245
|
-
|
|
187
|
+
let timeText = internal$1.buildEventRangeTimeText(timeFormat, eventRange,
|
|
188
|
+
/* slicedStart = */ undefined,
|
|
189
|
+
/* slicedEnd = */ undefined, props.isStart, props.isEnd, context,
|
|
190
|
+
/* defaultDisplayEventTime = */ true, props.defaultDisplayEventEnd);
|
|
191
|
+
let [tag, attrs] = internal$1.getEventTagAndAttrs(eventRange, context);
|
|
192
|
+
return (preact.createElement(internal$1.EventContainer, Object.assign({}, props, { tag: tag, attrs: attrs, className: 'fc-daygrid-dot-event fc-daygrid-event', defaultGenerator: renderInnerContent, timeText: timeText, isResizing: false, isDateSelecting: false })));
|
|
246
193
|
}
|
|
247
194
|
}
|
|
248
195
|
function renderInnerContent(renderProps) {
|
|
@@ -255,14 +202,16 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
|
|
|
255
202
|
class DayGridMoreLink extends internal$1.BaseComponent {
|
|
256
203
|
render() {
|
|
257
204
|
let { props } = this;
|
|
258
|
-
return (preact.createElement(internal$1.MoreLinkContainer, {
|
|
205
|
+
return (preact.createElement(internal$1.MoreLinkContainer, { className: internal$1.joinClassNames('fc-daygrid-more-link', props.isBlock
|
|
206
|
+
? 'fc-daygrid-more-link-block'
|
|
207
|
+
: '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
208
|
let forcedInvisibleMap = // TODO: more convenient/DRY
|
|
260
209
|
(props.eventDrag ? props.eventDrag.affectedInstances : null) ||
|
|
261
210
|
(props.eventResize ? props.eventResize.affectedInstances : null) ||
|
|
262
211
|
{};
|
|
263
212
|
return (preact.createElement(preact.Fragment, null, props.segs.map((seg) => {
|
|
264
213
|
let { eventRange } = seg;
|
|
265
|
-
let instanceId = eventRange.instance
|
|
214
|
+
let { instanceId } = eventRange.instance;
|
|
266
215
|
return (preact.createElement("div", { key: instanceId, style: {
|
|
267
216
|
visibility: forcedInvisibleMap[instanceId] ? 'hidden' : '',
|
|
268
217
|
} }, 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 +224,31 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
|
|
|
275
224
|
constructor() {
|
|
276
225
|
super(...arguments);
|
|
277
226
|
// ref
|
|
278
|
-
this.
|
|
279
|
-
this.
|
|
227
|
+
this.rootElRef = preact.createRef();
|
|
228
|
+
this.handleBodyEl = (bodyEl) => {
|
|
229
|
+
if (this.disconnectBodyHeight) {
|
|
230
|
+
this.disconnectBodyHeight();
|
|
231
|
+
this.disconnectBodyHeight = undefined;
|
|
232
|
+
internal$1.setRef(this.props.headerHeightRef, null);
|
|
233
|
+
internal$1.setRef(this.props.mainHeightRef, null);
|
|
234
|
+
}
|
|
235
|
+
if (bodyEl) {
|
|
236
|
+
// we want to fire on ANY size change, because we do more advanced stuff
|
|
237
|
+
this.disconnectBodyHeight = internal$1.watchSize(bodyEl, (_bodyWidth, bodyHeight) => {
|
|
238
|
+
const { props } = this;
|
|
239
|
+
const mainRect = bodyEl.getBoundingClientRect();
|
|
240
|
+
const rootRect = this.rootElRef.current.getBoundingClientRect();
|
|
241
|
+
const headerHeight = mainRect.top - rootRect.top;
|
|
242
|
+
if (!internal$1.isDimsEqual(this.headerHeight, headerHeight)) {
|
|
243
|
+
this.headerHeight = headerHeight;
|
|
244
|
+
internal$1.setRef(props.headerHeightRef, headerHeight);
|
|
245
|
+
}
|
|
246
|
+
if (props.fgLiquidHeight) {
|
|
247
|
+
internal$1.setRef(props.mainHeightRef, bodyHeight);
|
|
248
|
+
}
|
|
249
|
+
});
|
|
250
|
+
}
|
|
251
|
+
};
|
|
280
252
|
}
|
|
281
253
|
render() {
|
|
282
254
|
let { props, context } = this;
|
|
@@ -284,48 +256,28 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
|
|
|
284
256
|
// TODO: memoize this
|
|
285
257
|
const isMonthStart = props.showDayNumber &&
|
|
286
258
|
shouldDisplayMonthStart(props.date, props.dateProfile.currentRange, dateEnv);
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
259
|
+
// TODO: memoize this
|
|
260
|
+
const dateMeta = internal$1.getDateMeta(props.date, props.todayRange, null, props.dateProfile);
|
|
261
|
+
const baseClassName = internal$1.joinClassNames('fc-daygrid-day', props.borderStart && 'fc-border-s', props.width != null ? '' : 'fc-liquid', 'fc-flex-col');
|
|
262
|
+
if (dateMeta.isDisabled) {
|
|
263
|
+
return (preact.createElement("div", { role: 'gridcell', "aria-disabled": true, className: internal$1.joinClassNames(baseClassName, 'fc-day-disabled'), style: {
|
|
264
|
+
width: props.width
|
|
265
|
+
} }));
|
|
266
|
+
}
|
|
267
|
+
const hasDayNumber = props.showDayNumber || internal$1.hasCustomDayCellContent(options);
|
|
268
|
+
const isNavLink = options.navLinks;
|
|
269
|
+
const fullDateStr = internal$1.buildDateStr(context, props.date);
|
|
270
|
+
return (preact.createElement(internal$1.DayCellContainer, { tag: "div", className: internal$1.joinClassNames(baseClassName, props.className), attrs: Object.assign(Object.assign({}, props.attrs), { role: 'gridcell', 'aria-label': fullDateStr }), style: {
|
|
294
271
|
width: props.width
|
|
295
|
-
},
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
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))));
|
|
312
|
-
}
|
|
313
|
-
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);
|
|
322
|
-
});
|
|
323
|
-
}
|
|
324
|
-
componentWillUnmount() {
|
|
325
|
-
this.detachInnerHeight();
|
|
326
|
-
this.detachHeaderHeight();
|
|
327
|
-
internal$1.setRef(this.props.innerHeightRef, null);
|
|
328
|
-
internal$1.setRef(this.props.headerHeightRef, null);
|
|
272
|
+
}, elRef: this.rootElRef, renderProps: props.renderProps, defaultGenerator: renderTopInner, date: props.date, dateMeta: dateMeta, showDayNumber: props.showDayNumber, isMonthStart: isMonthStart }, (InnerContent) => (preact.createElement(preact.Fragment, null,
|
|
273
|
+
hasDayNumber && (preact.createElement("div", { className: "fc-daygrid-day-header" },
|
|
274
|
+
preact.createElement(InnerContent, { tag: 'div', attrs: isNavLink
|
|
275
|
+
? internal$1.buildNavLinkAttrs(context, props.date, undefined, fullDateStr)
|
|
276
|
+
: { 'aria-hidden': true } // label already on cell
|
|
277
|
+
, className: internal$1.joinClassNames('fc-daygrid-day-number', isMonthStart && 'fc-daygrid-month-start') }))),
|
|
278
|
+
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.handleBodyEl },
|
|
279
|
+
preact.createElement("div", { className: 'fc-daygrid-day-events', style: { height: props.fgHeight } }, props.fg),
|
|
280
|
+
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 }))))));
|
|
329
281
|
}
|
|
330
282
|
}
|
|
331
283
|
// Utils
|
|
@@ -349,121 +301,232 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
|
|
|
349
301
|
(dateEnv.getDay(date) === 1 && date.valueOf() < currentEnd.valueOf()));
|
|
350
302
|
}
|
|
351
303
|
|
|
304
|
+
function computeFgSegVerticals(segs, segHeightMap, cells, maxHeight, strictOrder, allowSlicing = true, dayMaxEvents, dayMaxEventRows) {
|
|
305
|
+
let maxCoord;
|
|
306
|
+
let maxDepth;
|
|
307
|
+
let hiddenConsumes;
|
|
308
|
+
if (dayMaxEvents === true || dayMaxEventRows === true) {
|
|
309
|
+
maxCoord = maxHeight;
|
|
310
|
+
hiddenConsumes = true;
|
|
311
|
+
}
|
|
312
|
+
else if (typeof dayMaxEvents === 'number') {
|
|
313
|
+
maxDepth = dayMaxEvents;
|
|
314
|
+
hiddenConsumes = false;
|
|
315
|
+
}
|
|
316
|
+
else if (typeof dayMaxEventRows === 'number') {
|
|
317
|
+
maxDepth = dayMaxEventRows;
|
|
318
|
+
hiddenConsumes = true;
|
|
319
|
+
}
|
|
320
|
+
// NOTE: visibleSegsMap and hiddenSegMap map NEVER overlap for a given event
|
|
321
|
+
// once a seg has a height, the combined potentially-sliced segs will comprise the entire span of the seg
|
|
322
|
+
// if a seg does not have a height yet, it won't be inserted into either visibleSegsMap/hiddenSegMap
|
|
323
|
+
const visibleSegMap = new Map();
|
|
324
|
+
const hiddenSegMap = new Map();
|
|
325
|
+
const segTops = new Map();
|
|
326
|
+
const isSlicedMap = new Map();
|
|
327
|
+
let hierarchy = new internal$1.SegHierarchy(segs, (seg) => segHeightMap.get(getEventPartKey(seg)), strictOrder, maxCoord, maxDepth, hiddenConsumes, allowSlicing);
|
|
328
|
+
hierarchy.traverseSegs((seg, segTop) => {
|
|
329
|
+
addToSegMap(visibleSegMap, seg);
|
|
330
|
+
segTops.set(getEventPartKey(seg), segTop);
|
|
331
|
+
if (seg.isSlice) {
|
|
332
|
+
isSlicedMap.set(seg.eventRange, true);
|
|
333
|
+
}
|
|
334
|
+
});
|
|
335
|
+
for (const hiddenSeg of hierarchy.hiddenSegs) {
|
|
336
|
+
addToSegMap(hiddenSegMap, hiddenSeg); // hidden main segs
|
|
337
|
+
}
|
|
338
|
+
// recompute tops while considering slices
|
|
339
|
+
// portions of these slices might be added to hiddenSegMap
|
|
340
|
+
if (isSlicedMap.size) {
|
|
341
|
+
segTops.clear();
|
|
342
|
+
hierarchy = new internal$1.SegHierarchy(compileSegMap(segs, visibleSegMap), (seg) => segHeightMap.get(getEventPartKey(seg)), strictOrder, maxCoord, maxDepth, hiddenConsumes);
|
|
343
|
+
hierarchy.traverseSegs((seg, segTop) => {
|
|
344
|
+
segTops.set(getEventPartKey(seg), segTop); // newly-hidden main segs and slices
|
|
345
|
+
});
|
|
346
|
+
for (const hiddenSeg of hierarchy.hiddenSegs) {
|
|
347
|
+
addToSegMap(hiddenSegMap, hiddenSeg);
|
|
348
|
+
}
|
|
349
|
+
}
|
|
350
|
+
const segsByCol = [];
|
|
351
|
+
const hiddenSegsByCol = [];
|
|
352
|
+
const renderableSegsByCol = [];
|
|
353
|
+
const heightsByCol = [];
|
|
354
|
+
for (let col = 0; col < cells.length; col++) {
|
|
355
|
+
segsByCol.push([]);
|
|
356
|
+
hiddenSegsByCol.push([]);
|
|
357
|
+
renderableSegsByCol.push([]);
|
|
358
|
+
heightsByCol.push(0);
|
|
359
|
+
}
|
|
360
|
+
for (const seg of segs) {
|
|
361
|
+
const { eventRange } = seg;
|
|
362
|
+
const visibleSegs = visibleSegMap.get(eventRange) || [];
|
|
363
|
+
const hiddenSegs = hiddenSegMap.get(eventRange) || [];
|
|
364
|
+
const isSliced = isSlicedMap.get(eventRange) || false;
|
|
365
|
+
// add orig to renderable
|
|
366
|
+
renderableSegsByCol[seg.start].push(seg);
|
|
367
|
+
// add slices to renderable
|
|
368
|
+
if (isSliced) {
|
|
369
|
+
for (const visibleSeg of visibleSegs) {
|
|
370
|
+
renderableSegsByCol[visibleSeg.start].push(visibleSeg);
|
|
371
|
+
}
|
|
372
|
+
}
|
|
373
|
+
// accumulate segsByCol/heightsByCol for visible segs
|
|
374
|
+
for (const visibleSeg of visibleSegs) {
|
|
375
|
+
for (let col = visibleSeg.start; col < visibleSeg.end; col++) {
|
|
376
|
+
const slice = sliceSegForCol(visibleSeg, col);
|
|
377
|
+
segsByCol[col].push(slice);
|
|
378
|
+
}
|
|
379
|
+
const segKey = getEventPartKey(visibleSeg);
|
|
380
|
+
const segTop = segTops.get(segKey);
|
|
381
|
+
if (segTop != null) { // positioned?
|
|
382
|
+
const segHeight = segHeightMap.get(segKey);
|
|
383
|
+
for (let col = visibleSeg.start; col < visibleSeg.end; col++) {
|
|
384
|
+
heightsByCol[col] = Math.max(heightsByCol[col], segTop + segHeight);
|
|
385
|
+
}
|
|
386
|
+
}
|
|
387
|
+
}
|
|
388
|
+
// accumulate segsByCol/hiddenSegsByCol for hidden segs
|
|
389
|
+
for (const hiddenSeg of hiddenSegs) {
|
|
390
|
+
for (let col = hiddenSeg.start; col < hiddenSeg.end; col++) {
|
|
391
|
+
const slice = sliceSegForCol(hiddenSeg, col);
|
|
392
|
+
segsByCol[col].push(slice);
|
|
393
|
+
hiddenSegsByCol[col].push(slice);
|
|
394
|
+
}
|
|
395
|
+
}
|
|
396
|
+
}
|
|
397
|
+
return [
|
|
398
|
+
segsByCol,
|
|
399
|
+
hiddenSegsByCol,
|
|
400
|
+
renderableSegsByCol,
|
|
401
|
+
segTops,
|
|
402
|
+
heightsByCol,
|
|
403
|
+
];
|
|
404
|
+
}
|
|
405
|
+
// Utils
|
|
406
|
+
// -------------------------------------------------------------------------------------------------
|
|
407
|
+
function addToSegMap(map, seg) {
|
|
408
|
+
let list = map.get(seg.eventRange);
|
|
409
|
+
if (!list) {
|
|
410
|
+
map.set(seg.eventRange, list = []);
|
|
411
|
+
}
|
|
412
|
+
list.push(seg);
|
|
413
|
+
}
|
|
352
414
|
/*
|
|
353
|
-
|
|
415
|
+
Ensures relative order of DayRowEventRange stays consistent with segs
|
|
354
416
|
*/
|
|
355
|
-
function
|
|
356
|
-
|
|
417
|
+
function compileSegMap(segs, segMap) {
|
|
418
|
+
const res = [];
|
|
419
|
+
for (const seg of segs) {
|
|
420
|
+
res.push(...(segMap.get(seg.eventRange) || []));
|
|
421
|
+
}
|
|
422
|
+
return res;
|
|
357
423
|
}
|
|
424
|
+
|
|
358
425
|
/*
|
|
359
|
-
|
|
426
|
+
TODO: move this so @fullcalendar/daygrid
|
|
360
427
|
*/
|
|
361
|
-
function
|
|
362
|
-
|
|
428
|
+
function buildDayTableModel(dateProfile, dateProfileGenerator) {
|
|
429
|
+
let daySeries = new internal$1.DaySeriesModel(dateProfile.renderRange, dateProfileGenerator);
|
|
430
|
+
return new internal$1.DayTableModel(daySeries, /year|month|week/.test(dateProfile.currentRangeUnit));
|
|
363
431
|
}
|
|
364
|
-
function
|
|
365
|
-
|
|
366
|
-
|
|
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;
|
|
432
|
+
function computeColWidth(colCnt, colMinWidth, viewportWidth) {
|
|
433
|
+
if (viewportWidth == null) {
|
|
434
|
+
return [undefined, undefined];
|
|
390
435
|
}
|
|
391
|
-
|
|
392
|
-
|
|
436
|
+
const colTempWidth = viewportWidth / colCnt;
|
|
437
|
+
if (colTempWidth < colMinWidth) {
|
|
438
|
+
return [colMinWidth * colCnt, colMinWidth];
|
|
393
439
|
}
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
const
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
const
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
for (; col < endCol; col++) {
|
|
407
|
-
heightsByCol[col] = Math.max(heightsByCol[col], segRect.levelCoord + segRect.thickness);
|
|
440
|
+
return [viewportWidth, undefined];
|
|
441
|
+
}
|
|
442
|
+
// Positioning
|
|
443
|
+
// -------------------------------------------------------------------------------------------------
|
|
444
|
+
function computeTopFromDate(date, cellRows, rowHeightMap, adjust = 0) {
|
|
445
|
+
let top = 0;
|
|
446
|
+
for (const cells of cellRows) {
|
|
447
|
+
const start = cells[0].date;
|
|
448
|
+
const end = cells[cells.length - 1].date;
|
|
449
|
+
const key = start.toISOString();
|
|
450
|
+
if (date >= start && date <= end) {
|
|
451
|
+
return top;
|
|
408
452
|
}
|
|
453
|
+
const rowHeight = rowHeightMap.get(key);
|
|
454
|
+
if (rowHeight == null) {
|
|
455
|
+
return; // denote unknown
|
|
456
|
+
}
|
|
457
|
+
top += rowHeight + adjust;
|
|
458
|
+
}
|
|
459
|
+
return top;
|
|
460
|
+
}
|
|
461
|
+
/*
|
|
462
|
+
FYI, `width` is not dependable for aligning completely to farside
|
|
463
|
+
*/
|
|
464
|
+
function computeHorizontalsFromSeg(seg, colWidth, colCnt, isRtl) {
|
|
465
|
+
let fromStart;
|
|
466
|
+
let fromEnd;
|
|
467
|
+
if (colWidth != null) {
|
|
468
|
+
fromStart = seg.start * colWidth;
|
|
469
|
+
fromEnd = (colCnt - seg.end) * colWidth;
|
|
409
470
|
}
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
471
|
+
else {
|
|
472
|
+
const colWidthFrac = 1 / colCnt;
|
|
473
|
+
fromStart = internal$1.fracToCssDim(seg.start * colWidthFrac);
|
|
474
|
+
fromEnd = internal$1.fracToCssDim(1 - seg.end * colWidthFrac);
|
|
475
|
+
}
|
|
476
|
+
if (isRtl) {
|
|
477
|
+
return { right: fromStart, left: fromEnd };
|
|
478
|
+
}
|
|
479
|
+
else {
|
|
480
|
+
return { left: fromStart, right: fromEnd };
|
|
481
|
+
}
|
|
482
|
+
}
|
|
483
|
+
function computeColFromPosition(positionLeft, elWidth, colWidth, colCnt, isRtl) {
|
|
484
|
+
const realColWidth = colWidth != null ? colWidth : elWidth / colCnt;
|
|
485
|
+
const colFromLeft = Math.floor(positionLeft / realColWidth);
|
|
486
|
+
const col = isRtl ? (colCnt - colFromLeft - 1) : colFromLeft;
|
|
487
|
+
const left = colFromLeft * realColWidth;
|
|
488
|
+
const right = left + realColWidth;
|
|
489
|
+
return { col, left, right };
|
|
490
|
+
}
|
|
491
|
+
function computeRowFromPosition(positionTop, cellRows, rowHeightMap) {
|
|
492
|
+
let row = 0;
|
|
493
|
+
let top = 0;
|
|
494
|
+
let bottom = 0;
|
|
495
|
+
for (const cells of cellRows) {
|
|
496
|
+
const key = cells[0].key;
|
|
497
|
+
top = bottom;
|
|
498
|
+
bottom = top + rowHeightMap.get(key);
|
|
499
|
+
if (positionTop < bottom) {
|
|
500
|
+
break;
|
|
416
501
|
}
|
|
502
|
+
row++;
|
|
417
503
|
}
|
|
418
|
-
return
|
|
504
|
+
return { row, top, bottom };
|
|
419
505
|
}
|
|
420
|
-
//
|
|
506
|
+
// Hit Element
|
|
421
507
|
// -------------------------------------------------------------------------------------------------
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
return
|
|
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);
|
|
508
|
+
function getRowEl(rootEl, row) {
|
|
509
|
+
return rootEl.querySelectorAll(':scope > [role=row]')[row];
|
|
510
|
+
}
|
|
511
|
+
function getCellEl(rowEl, col) {
|
|
512
|
+
return rowEl.querySelectorAll(':scope > [role=gridcell]')[col];
|
|
513
|
+
}
|
|
514
|
+
// Header Formatting
|
|
515
|
+
// -------------------------------------------------------------------------------------------------
|
|
516
|
+
function createDayHeaderFormatter(explicitFormat, datesRepDistinctDays, dateCnt) {
|
|
517
|
+
return explicitFormat || computeFallbackHeaderFormat(datesRepDistinctDays, dateCnt);
|
|
518
|
+
}
|
|
519
|
+
// Computes a default column header formatting string if `colFormat` is not explicitly defined
|
|
520
|
+
function computeFallbackHeaderFormat(datesRepDistinctDays, dayCnt) {
|
|
521
|
+
// if more than one week row, or if there are a lot of columns with not much space,
|
|
522
|
+
// put just the day numbers will be in each cell
|
|
523
|
+
if (!datesRepDistinctDays || dayCnt > 10) {
|
|
524
|
+
return internal$1.createFormatter({ weekday: 'short' }); // "Sat"
|
|
466
525
|
}
|
|
526
|
+
if (dayCnt > 1) {
|
|
527
|
+
return internal$1.createFormatter({ weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true }); // "Sat 11/12"
|
|
528
|
+
}
|
|
529
|
+
return internal$1.createFormatter({ weekday: 'long' }); // "Saturday"
|
|
467
530
|
}
|
|
468
531
|
|
|
469
532
|
class DayGridEventHarness extends preact.Component {
|
|
@@ -474,129 +537,102 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
|
|
|
474
537
|
}
|
|
475
538
|
render() {
|
|
476
539
|
const { props } = this;
|
|
477
|
-
return (preact.createElement("div", { className:
|
|
540
|
+
return (preact.createElement("div", { className: internal$1.joinClassNames(props.className, 'fc-abs'), style: props.style, ref: this.rootElRef }, props.children));
|
|
478
541
|
}
|
|
479
542
|
componentDidMount() {
|
|
480
543
|
const rootEl = this.rootElRef.current; // TODO: make dynamic with useEffect
|
|
481
|
-
this.
|
|
544
|
+
this.disconnectHeight = internal$1.watchHeight(rootEl, (height) => {
|
|
482
545
|
internal$1.setRef(this.props.heightRef, height);
|
|
483
546
|
});
|
|
484
547
|
}
|
|
485
548
|
componentWillUnmount() {
|
|
486
|
-
this.
|
|
549
|
+
this.disconnectHeight();
|
|
487
550
|
internal$1.setRef(this.props.heightRef, null);
|
|
488
551
|
}
|
|
489
552
|
}
|
|
490
553
|
|
|
491
554
|
const DEFAULT_WEEK_NUM_FORMAT = internal$1.createFormatter({ week: 'narrow' });
|
|
492
|
-
const COMPACT_CELL_WIDTH = 80;
|
|
493
555
|
class DayGridRow extends internal$1.BaseComponent {
|
|
494
556
|
constructor() {
|
|
495
557
|
super(...arguments);
|
|
496
|
-
this.
|
|
497
|
-
internal$1.afterSize(this.
|
|
558
|
+
this.headerHeightRefMap = new internal$1.RefMap(() => {
|
|
559
|
+
internal$1.afterSize(this.handleSegPositioning);
|
|
498
560
|
});
|
|
499
|
-
this.
|
|
500
|
-
|
|
561
|
+
this.mainHeightRefMap = new internal$1.RefMap(() => {
|
|
562
|
+
const fgLiquidHeight = this.props.dayMaxEvents === true || this.props.dayMaxEventRows === true;
|
|
563
|
+
if (fgLiquidHeight) {
|
|
564
|
+
internal$1.afterSize(this.handleSegPositioning);
|
|
565
|
+
}
|
|
501
566
|
});
|
|
502
567
|
this.segHeightRefMap = new internal$1.RefMap(() => {
|
|
503
|
-
internal$1.afterSize(this.
|
|
568
|
+
internal$1.afterSize(this.handleSegPositioning);
|
|
504
569
|
});
|
|
505
570
|
this.handleRootEl = (rootEl) => {
|
|
506
571
|
this.rootEl = rootEl;
|
|
507
572
|
internal$1.setRef(this.props.rootElRef, rootEl);
|
|
508
573
|
};
|
|
509
|
-
|
|
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
|
|
574
|
+
this.handleSegPositioning = () => {
|
|
575
|
+
this.forceUpdate();
|
|
540
576
|
};
|
|
541
577
|
}
|
|
542
578
|
render() {
|
|
543
|
-
const { props,
|
|
579
|
+
const { props, context, headerHeightRefMap, mainHeightRefMap } = this;
|
|
544
580
|
const { cells } = props;
|
|
545
581
|
const { options } = context;
|
|
546
582
|
const weekDate = props.cells[0].date;
|
|
547
|
-
const colCnt = props.cells.length;
|
|
548
583
|
const fgLiquidHeight = props.dayMaxEvents === true || props.dayMaxEventRows === true;
|
|
549
584
|
// TODO: memoize? sort all types of segs?
|
|
550
585
|
const fgEventSegs = internal$1.sortEventSegs(props.fgEventSegs, options.eventOrder);
|
|
551
586
|
// TODO: memoize?
|
|
552
|
-
const
|
|
553
|
-
const
|
|
554
|
-
|
|
555
|
-
const
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
587
|
+
const [maxMainTop, minMainHeight] = this.computeFgDims(); // uses headerHeightRefMap/mainHeightRefMap
|
|
588
|
+
const [segsByCol, hiddenSegsByCol, renderableSegsByCol, segTops, simpleHeightsByCol] = computeFgSegVerticals(fgEventSegs, this.segHeightRefMap.current, cells, fgLiquidHeight ? minMainHeight : undefined, // if not defined in first run, will unlimited!?
|
|
589
|
+
options.eventOrderStrict, options.eventSlicing, props.dayMaxEvents, props.dayMaxEventRows);
|
|
590
|
+
const heightsByCol = [];
|
|
591
|
+
if (maxMainTop != null) {
|
|
592
|
+
let col = 0;
|
|
593
|
+
for (const cell of cells) { // uses headerHeightRefMap/maxMainTop/simpleHeightsByCol
|
|
594
|
+
const cellHeaderHeight = headerHeightRefMap.current.get(cell.key);
|
|
595
|
+
const extraFgHeight = maxMainTop - cellHeaderHeight;
|
|
596
|
+
heightsByCol.push(simpleHeightsByCol[col++] + extraFgHeight);
|
|
597
|
+
}
|
|
598
|
+
}
|
|
599
|
+
const highlightSegs = this.getHighlightSegs();
|
|
600
|
+
const mirrorSegs = this.getMirrorSegs();
|
|
561
601
|
const forcedInvisibleMap = // TODO: more convenient/DRY
|
|
562
602
|
(props.eventDrag && props.eventDrag.affectedInstances) ||
|
|
563
603
|
(props.eventResize && props.eventResize.affectedInstances) ||
|
|
564
604
|
{};
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
: '',
|
|
572
|
-
props.cellGroup ? 'fc-flex-row' : 'fc-row',
|
|
573
|
-
'fc-rel',
|
|
574
|
-
props.className || '',
|
|
575
|
-
].join(' '), style: {
|
|
605
|
+
const isNavLink = options.navLinks;
|
|
606
|
+
const fullWeekStr = internal$1.buildDateStr(context, weekDate, 'week');
|
|
607
|
+
return (preact.createElement("div", { role: props.role /* !!! */, "aria-label": props.role === 'row' // HACK
|
|
608
|
+
? fullWeekStr
|
|
609
|
+
: undefined // can't have label on non-role div
|
|
610
|
+
, className: internal$1.joinClassNames('fc-flex-row fc-rel', props.className), style: {
|
|
576
611
|
minHeight: props.minHeight,
|
|
577
612
|
}, ref: this.handleRootEl },
|
|
578
|
-
props.
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
613
|
+
this.renderFillSegs(props.businessHourSegs, 'non-business'),
|
|
614
|
+
this.renderFillSegs(props.bgEventSegs, 'bg-event'),
|
|
615
|
+
this.renderFillSegs(highlightSegs, 'highlight'),
|
|
616
|
+
preact.createElement("div", { className: 'fc-flex-row fc-liquid fc-rel' }, props.cells.map((cell, col) => {
|
|
617
|
+
const normalFgNodes = this.renderFgSegs(maxMainTop, renderableSegsByCol[col], segTops, props.todayRange, forcedInvisibleMap);
|
|
618
|
+
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
619
|
// content
|
|
584
|
-
segs:
|
|
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,
|
|
620
|
+
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
621
|
// render hooks
|
|
591
|
-
|
|
622
|
+
renderProps: cell.renderProps, dateSpanProps: cell.dateSpanProps, attrs: cell.attrs, className: cell.className,
|
|
592
623
|
// dimensions
|
|
593
624
|
fgHeight: heightsByCol[col], width: props.colWidth,
|
|
594
625
|
// refs
|
|
595
|
-
|
|
596
|
-
}),
|
|
597
|
-
props.showWeekNumbers && (preact.createElement(internal$1.WeekNumberContainer, {
|
|
598
|
-
|
|
599
|
-
|
|
626
|
+
headerHeightRef: headerHeightRefMap.createRef(cell.key), mainHeightRef: mainHeightRefMap.createRef(cell.key) }));
|
|
627
|
+
})),
|
|
628
|
+
props.showWeekNumbers && (preact.createElement(internal$1.WeekNumberContainer, { tag: 'div', attrs: Object.assign(Object.assign({}, (isNavLink
|
|
629
|
+
? internal$1.buildNavLinkAttrs(context, weekDate, 'week', fullWeekStr, /* isTabbable = */ false)
|
|
630
|
+
: {})), { 'role': undefined, 'aria-hidden': true }), className: 'fc-daygrid-week-number', date: weekDate, defaultFormat: DEFAULT_WEEK_NUM_FORMAT })),
|
|
631
|
+
this.renderFgSegs(maxMainTop, mirrorSegs, segTops, props.todayRange, {}, // forcedInvisibleMap
|
|
632
|
+
Boolean(props.eventDrag), Boolean(props.eventResize), false)));
|
|
633
|
+
}
|
|
634
|
+
renderFgSegs(headerHeight, segs, segTops, todayRange, forcedInvisibleMap, isDragging, isResizing, isDateSelecting) {
|
|
635
|
+
var _a;
|
|
600
636
|
const { props, context, segHeightRefMap } = this;
|
|
601
637
|
const { isRtl } = context;
|
|
602
638
|
const { colWidth, eventSelection } = props;
|
|
@@ -605,30 +641,26 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
|
|
|
605
641
|
const isMirror = isDragging || isResizing || isDateSelecting;
|
|
606
642
|
const nodes = [];
|
|
607
643
|
for (const seg of segs) {
|
|
608
|
-
const
|
|
609
|
-
|
|
610
|
-
const { eventRange } = seg;
|
|
644
|
+
const key = getEventPartKey(seg);
|
|
645
|
+
const { standinFor, eventRange } = seg;
|
|
611
646
|
const { instanceId } = eventRange.instance;
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
const
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
nodes.push(preact.createElement(DayGridEventHarness, { key: segSpanId, style: {
|
|
624
|
-
visibility: isVisible ? '' : 'hidden',
|
|
647
|
+
if (standinFor) {
|
|
648
|
+
continue;
|
|
649
|
+
}
|
|
650
|
+
const { left, right } = computeHorizontalsFromSeg(seg, colWidth, colCnt, isRtl);
|
|
651
|
+
const localTop = (_a = segTops.get(standinFor ? getEventPartKey(standinFor) : key)) !== null && _a !== void 0 ? _a : (isMirror ? 0 : undefined);
|
|
652
|
+
const top = headerHeight != null && localTop != null
|
|
653
|
+
? headerHeight + localTop
|
|
654
|
+
: undefined;
|
|
655
|
+
const isInvisible = standinFor || forcedInvisibleMap[instanceId] || top == null;
|
|
656
|
+
nodes.push(preact.createElement(DayGridEventHarness, { key: key, className: seg.start ? 'fc-border-transparent fc-border-s' : '', style: {
|
|
657
|
+
visibility: isInvisible ? 'hidden' : '',
|
|
625
658
|
top,
|
|
626
659
|
left,
|
|
627
660
|
right,
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
?
|
|
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))))));
|
|
661
|
+
}, heightRef: (!standinFor && !isMirror)
|
|
662
|
+
? segHeightRefMap.createRef(key)
|
|
663
|
+
: 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
664
|
}
|
|
633
665
|
return nodes;
|
|
634
666
|
}
|
|
@@ -639,17 +671,17 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
|
|
|
639
671
|
const colCnt = props.cells.length;
|
|
640
672
|
const nodes = [];
|
|
641
673
|
for (const seg of segs) {
|
|
642
|
-
const
|
|
643
|
-
const
|
|
644
|
-
|
|
674
|
+
const key = internal$1.buildEventRangeKey(seg.eventRange); // TODO: use different type of key than fg!?
|
|
675
|
+
const { left, right } = computeHorizontalsFromSeg(seg, colWidth, colCnt, isRtl);
|
|
676
|
+
const isVisible = !seg.standinFor;
|
|
677
|
+
nodes.push(preact.createElement("div", { key: key, className: "fc-fill-y", style: {
|
|
645
678
|
visibility: isVisible ? '' : 'hidden',
|
|
646
679
|
left,
|
|
647
680
|
right,
|
|
648
|
-
width,
|
|
649
681
|
} }, fillType === 'bg-event' ?
|
|
650
682
|
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
683
|
}
|
|
652
|
-
return preact.createElement(preact.Fragment, {}, ...nodes);
|
|
684
|
+
return preact.createElement(preact.Fragment, {}, ...nodes); // TODO: shouldn't this be an array, so keyed?
|
|
653
685
|
}
|
|
654
686
|
// Sizing
|
|
655
687
|
// -----------------------------------------------------------------------------------------------
|
|
@@ -662,9 +694,36 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
|
|
|
662
694
|
componentWillUnmount() {
|
|
663
695
|
this.disconnectHeight();
|
|
664
696
|
internal$1.setRef(this.props.heightRef, null);
|
|
665
|
-
internal$1.setRef(this.props.innerHeightRef, null);
|
|
666
697
|
}
|
|
667
|
-
|
|
698
|
+
computeFgDims() {
|
|
699
|
+
const { cells } = this.props;
|
|
700
|
+
const headerHeightMap = this.headerHeightRefMap.current;
|
|
701
|
+
const mainHeightMap = this.mainHeightRefMap.current;
|
|
702
|
+
let maxMainTop;
|
|
703
|
+
let minMainBottom;
|
|
704
|
+
for (const cell of cells) {
|
|
705
|
+
const mainTop = headerHeightMap.get(cell.key);
|
|
706
|
+
const mainHeight = mainHeightMap.get(cell.key);
|
|
707
|
+
if (mainTop != null) {
|
|
708
|
+
if (maxMainTop === undefined || mainTop > maxMainTop) {
|
|
709
|
+
maxMainTop = mainTop;
|
|
710
|
+
}
|
|
711
|
+
if (mainHeight != null) {
|
|
712
|
+
const mainBottom = mainTop + mainHeight;
|
|
713
|
+
if (minMainBottom === undefined || mainBottom < minMainBottom) {
|
|
714
|
+
minMainBottom = mainBottom;
|
|
715
|
+
}
|
|
716
|
+
}
|
|
717
|
+
}
|
|
718
|
+
}
|
|
719
|
+
return [
|
|
720
|
+
maxMainTop,
|
|
721
|
+
minMainBottom != null && maxMainTop != null
|
|
722
|
+
? minMainBottom - maxMainTop
|
|
723
|
+
: undefined,
|
|
724
|
+
];
|
|
725
|
+
}
|
|
726
|
+
// Internal Utils
|
|
668
727
|
// -----------------------------------------------------------------------------------------------
|
|
669
728
|
getMirrorSegs() {
|
|
670
729
|
let { props } = this;
|
|
@@ -717,7 +776,7 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
|
|
|
717
776
|
};
|
|
718
777
|
}
|
|
719
778
|
render() {
|
|
720
|
-
let { props,
|
|
779
|
+
let { props, context, rowHeightRefMap } = this;
|
|
721
780
|
let { options } = context;
|
|
722
781
|
let rowCnt = props.cellRows.length;
|
|
723
782
|
let fgEventSegsByRow = this.splitFgEventSegs(props.fgEventSegs, rowCnt);
|
|
@@ -726,31 +785,31 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
|
|
|
726
785
|
let dateSelectionSegsByRow = this.splitDateSelectionSegs(props.dateSelectionSegs, rowCnt);
|
|
727
786
|
let eventDragByRow = this.splitEventDrag(props.eventDrag, rowCnt);
|
|
728
787
|
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
788
|
let isHeightAuto = internal$1.getIsHeightAuto(options);
|
|
732
|
-
|
|
733
|
-
let rowMinHeight = (
|
|
734
|
-
|
|
735
|
-
:
|
|
736
|
-
|
|
789
|
+
let rowHeightsRedistribute = !props.forPrint && !isHeightAuto;
|
|
790
|
+
let [rowMinHeight, isCompact] = computeRowHeight(props.visibleWidth, rowCnt, isHeightAuto, props.forPrint, options);
|
|
791
|
+
return (preact.createElement("div", { role: 'rowgroup', className: internal$1.joinClassNames(
|
|
792
|
+
// HACK for Safari. Can't do break-inside:avoid with flexbox items, likely b/c it's not standard:
|
|
793
|
+
// https://stackoverflow.com/a/60256345
|
|
794
|
+
!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, role: 'row', dateProfile: props.dateProfile, todayRange: props.todayRange, cells: cells, showDayNumbers: rowCnt > 1, showWeekNumbers: rowCnt > 1 && options.weekNumbers, forPrint: props.forPrint, isCompact: isCompact,
|
|
737
795
|
// if not auto-height, distribute height of container somewhat evently to rows
|
|
738
796
|
// (treat all as zero, distribute height, then ensure min-heights -- the inner content height)
|
|
739
|
-
className:
|
|
797
|
+
className: internal$1.joinClassNames(rowHeightsRedistribute && 'fc-grow fc-basis0', rowCnt > 1 && 'fc-break-inside-avoid', // don't avoid breaks for single tall row
|
|
798
|
+
row < rowCnt - 1 && 'fc-border-b'),
|
|
740
799
|
// 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:
|
|
800
|
+
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
801
|
// dimensions
|
|
743
802
|
colWidth: props.colWidth, minHeight: rowMinHeight,
|
|
744
803
|
// refs
|
|
745
804
|
heightRef: rowHeightRefMap.createRef(cells[0].key) })))));
|
|
746
805
|
}
|
|
747
806
|
componentDidMount() {
|
|
748
|
-
this.
|
|
807
|
+
this.disconnectWidth = internal$1.watchWidth(this.rootEl, (width) => {
|
|
749
808
|
this.setState({ width });
|
|
750
809
|
});
|
|
751
810
|
}
|
|
752
811
|
componentWillUnmount() {
|
|
753
|
-
this.
|
|
812
|
+
this.disconnectWidth();
|
|
754
813
|
}
|
|
755
814
|
// Hit System
|
|
756
815
|
// -----------------------------------------------------------------------------------------------
|
|
@@ -767,7 +826,7 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
|
|
|
767
826
|
dateSpan: Object.assign({ range: {
|
|
768
827
|
start: cellStartDate,
|
|
769
828
|
end: cellEndDate,
|
|
770
|
-
}, allDay: true }, cell.
|
|
829
|
+
}, allDay: true }, cell.dateSpanProps),
|
|
771
830
|
// HACK. TODO: This is expensive to do every hit-query
|
|
772
831
|
dayEl: getCellEl(getRowEl(this.rootEl, row), col),
|
|
773
832
|
rect: {
|
|
@@ -785,28 +844,98 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
|
|
|
785
844
|
function isSegAllDay(seg) {
|
|
786
845
|
return seg.eventRange.def.allDay;
|
|
787
846
|
}
|
|
847
|
+
function computeRowHeight(visibleWidth, // should INCLUDE any scrollbar width to avoid oscillation
|
|
848
|
+
rowCnt, isHeightAuto, forPrint, options) {
|
|
849
|
+
if (visibleWidth != null) {
|
|
850
|
+
// ensure a consistent row min-height modelled after a month with 6 rows respecting aspectRatio
|
|
851
|
+
// will result in same minHeight regardless of weekends, dayMinWidth, height:auto
|
|
852
|
+
const rowMinHeight = visibleWidth / options.aspectRatio / 6;
|
|
853
|
+
return [
|
|
854
|
+
forPrint
|
|
855
|
+
// special-case for print, which condenses whole-page width without notifying
|
|
856
|
+
// this is value that looks natural on paper for portrait/landscape
|
|
857
|
+
? '6em'
|
|
858
|
+
// don't give minHeight when single-month non-auto-height
|
|
859
|
+
// TODO: better way to detect this with DateProfile?
|
|
860
|
+
: (rowCnt > 6 || isHeightAuto)
|
|
861
|
+
? rowMinHeight
|
|
862
|
+
: undefined,
|
|
863
|
+
// isCompact?: just before most lone +more links hit bottom of cell
|
|
864
|
+
rowMinHeight < 70,
|
|
865
|
+
];
|
|
866
|
+
}
|
|
867
|
+
return [undefined, false];
|
|
868
|
+
}
|
|
869
|
+
|
|
870
|
+
class DayGridHeaderCell extends internal$1.BaseComponent {
|
|
871
|
+
constructor() {
|
|
872
|
+
super(...arguments);
|
|
873
|
+
this.handleInnerEl = (innerEl) => {
|
|
874
|
+
if (this.disconectInnerHeight) {
|
|
875
|
+
this.disconectInnerHeight();
|
|
876
|
+
this.disconectInnerHeight = undefined;
|
|
877
|
+
}
|
|
878
|
+
if (innerEl) {
|
|
879
|
+
this.disconectInnerHeight = internal$1.watchHeight(innerEl, (height) => {
|
|
880
|
+
internal$1.setRef(this.props.innerHeightRef, height);
|
|
881
|
+
});
|
|
882
|
+
}
|
|
883
|
+
else {
|
|
884
|
+
internal$1.setRef(this.props.innerHeightRef, null);
|
|
885
|
+
}
|
|
886
|
+
};
|
|
887
|
+
}
|
|
888
|
+
render() {
|
|
889
|
+
const { props } = this;
|
|
890
|
+
const { renderConfig, dataConfig } = props;
|
|
891
|
+
// HACK
|
|
892
|
+
const isDisabled = dataConfig.renderProps.isDisabled;
|
|
893
|
+
return (preact.createElement(internal$1.ContentContainer, { tag: 'div', attrs: Object.assign({ role: 'columnheader', 'aria-colspan': dataConfig.colSpan }, dataConfig.attrs), className: internal$1.joinClassNames('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', dataConfig.className), style: {
|
|
894
|
+
width: props.colWidth != null
|
|
895
|
+
? props.colWidth * (dataConfig.colSpan || 1)
|
|
896
|
+
: undefined,
|
|
897
|
+
}, renderProps: dataConfig.renderProps, generatorName: renderConfig.generatorName, customGenerator: renderConfig.customGenerator, defaultGenerator: internal$1.renderText, classNameGenerator:
|
|
898
|
+
// don't use custom classNames if disabled
|
|
899
|
+
// TODO: make DRY with DayCellContainer
|
|
900
|
+
isDisabled ? undefined : renderConfig.classNameGenerator, didMount: renderConfig.didMount, willUnmount: renderConfig.willUnmount }, (InnerContainer) => (preact.createElement(InnerContainer, { tag: '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 }))));
|
|
901
|
+
}
|
|
902
|
+
}
|
|
788
903
|
|
|
789
|
-
class
|
|
904
|
+
class DayGridHeaderRow extends internal$1.BaseComponent {
|
|
905
|
+
constructor() {
|
|
906
|
+
super(...arguments);
|
|
907
|
+
// ref
|
|
908
|
+
this.innerHeightRefMap = new internal$1.RefMap(() => {
|
|
909
|
+
internal$1.afterSize(this.handleInnerHeights);
|
|
910
|
+
});
|
|
911
|
+
this.handleInnerHeights = () => {
|
|
912
|
+
const innerHeightMap = this.innerHeightRefMap.current;
|
|
913
|
+
let max = 0;
|
|
914
|
+
for (const innerHeight of innerHeightMap.values()) {
|
|
915
|
+
max = Math.max(max, innerHeight);
|
|
916
|
+
}
|
|
917
|
+
if (this.currentInnerHeight !== max) {
|
|
918
|
+
this.currentInnerHeight = max;
|
|
919
|
+
internal$1.setRef(this.props.innerHeightRef, max);
|
|
920
|
+
}
|
|
921
|
+
};
|
|
922
|
+
}
|
|
790
923
|
render() {
|
|
791
924
|
const { props } = this;
|
|
792
|
-
return (preact.createElement("div", { role: props.
|
|
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))))));
|
|
925
|
+
return (preact.createElement("div", { role: props.role /* !!! */, "aria-rowindex": props.rowIndex != null ? 1 + props.rowIndex : undefined, 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 })))));
|
|
797
926
|
}
|
|
798
927
|
}
|
|
799
928
|
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
929
|
+
/*
|
|
930
|
+
TODO: kill this class in favor of DayGridHeaderRows?
|
|
931
|
+
*/
|
|
932
|
+
class DayGridHeader extends internal$1.BaseComponent {
|
|
933
|
+
render() {
|
|
934
|
+
const { props } = this;
|
|
935
|
+
return (preact.createElement("div", { role: 'rowgroup', className: internal$1.joinClassNames(props.className, 'fc-flex-col', props.width == null && 'fc-liquid'), style: {
|
|
936
|
+
width: props.width
|
|
937
|
+
} }, props.headerTiers.map((rowConfig, tierNum) => (preact.createElement(DayGridHeaderRow, Object.assign({}, rowConfig, { key: tierNum, role: 'row', className: tierNum ? 'fc-border-t' : '', colWidth: props.colWidth }))))));
|
|
938
|
+
}
|
|
810
939
|
}
|
|
811
940
|
|
|
812
941
|
class DayGridLayoutNormal extends internal$1.BaseComponent {
|
|
@@ -815,11 +944,11 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
|
|
|
815
944
|
this.handleScroller = (scroller) => {
|
|
816
945
|
internal$1.setRef(this.props.scrollerRef, scroller);
|
|
817
946
|
};
|
|
818
|
-
this.
|
|
819
|
-
this.setState({
|
|
947
|
+
this.handleClientWidth = (clientWidth) => {
|
|
948
|
+
this.setState({ clientWidth });
|
|
820
949
|
};
|
|
821
|
-
this.
|
|
822
|
-
this.setState({
|
|
950
|
+
this.handleEndScrollbarWidth = (endScrollbarWidth) => {
|
|
951
|
+
this.setState({ endScrollbarWidth });
|
|
823
952
|
};
|
|
824
953
|
}
|
|
825
954
|
render() {
|
|
@@ -828,24 +957,22 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
|
|
|
828
957
|
const verticalScrollbars = !props.forPrint && !internal$1.getIsHeightAuto(options);
|
|
829
958
|
const stickyHeaderDates = !props.forPrint && internal$1.getStickyHeaderDates(options);
|
|
830
959
|
return (preact.createElement(preact.Fragment, null,
|
|
831
|
-
options.dayHeaders && (preact.createElement(
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
//
|
|
838
|
-
|
|
839
|
-
|
|
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,
|
|
960
|
+
options.dayHeaders && (preact.createElement("div", { className: internal$1.joinClassNames(props.forPrint ? 'fc-print-header' : 'fc-flex-row', // col for print, row for screen
|
|
961
|
+
'fc-border-b') },
|
|
962
|
+
preact.createElement(DayGridHeader, { headerTiers: props.headerTiers, className: internal$1.joinClassNames('fc-daygrid-header', stickyHeaderDates && 'fc-table-header-sticky') }),
|
|
963
|
+
Boolean(state.endScrollbarWidth) && (preact.createElement("div", { className: 'fc-border-s fc-filler', style: { minWidth: state.endScrollbarWidth } })))),
|
|
964
|
+
preact.createElement(internal$1.Scroller, { vertical: verticalScrollbars, clientWidthRef: this.handleClientWidth, endScrollbarWidthRef: this.handleEndScrollbarWidth, className: internal$1.joinClassNames('fc-daygrid-body',
|
|
965
|
+
// HACK for Safari. Can't do break-inside:avoid with flexbox items, likely b/c it's not standard:
|
|
966
|
+
// https://stackoverflow.com/a/60256345
|
|
967
|
+
!props.forPrint && 'fc-flex-col', verticalScrollbars && 'fc-liquid'), ref: this.handleScroller },
|
|
968
|
+
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
969
|
// content
|
|
848
970
|
fgEventSegs: props.fgEventSegs, bgEventSegs: props.bgEventSegs, businessHourSegs: props.businessHourSegs, dateSelectionSegs: props.dateSelectionSegs, eventDrag: props.eventDrag, eventResize: props.eventResize, eventSelection: props.eventSelection,
|
|
971
|
+
// dimensions
|
|
972
|
+
visibleWidth: // TODO: DRY
|
|
973
|
+
state.clientWidth != null && state.endScrollbarWidth != null
|
|
974
|
+
? state.clientWidth + state.endScrollbarWidth
|
|
975
|
+
: undefined,
|
|
849
976
|
// refs
|
|
850
977
|
rowHeightRefMap: props.rowHeightRefMap }))));
|
|
851
978
|
}
|
|
@@ -859,14 +986,11 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
|
|
|
859
986
|
this.footerScrollerRef = preact.createRef();
|
|
860
987
|
// Sizing
|
|
861
988
|
// -----------------------------------------------------------------------------------------------
|
|
862
|
-
this.
|
|
863
|
-
this.setState({
|
|
864
|
-
};
|
|
865
|
-
this.handleLeftScrollbarWidth = (leftScrollbarWidth) => {
|
|
866
|
-
this.setState({ leftScrollbarWidth });
|
|
989
|
+
this.handleClientWidth = (clientWidth) => {
|
|
990
|
+
this.setState({ clientWidth });
|
|
867
991
|
};
|
|
868
|
-
this.
|
|
869
|
-
this.setState({
|
|
992
|
+
this.handleEndScrollbarWidth = (endScrollbarWidth) => {
|
|
993
|
+
this.setState({ endScrollbarWidth });
|
|
870
994
|
};
|
|
871
995
|
}
|
|
872
996
|
render() {
|
|
@@ -876,37 +1000,29 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
|
|
|
876
1000
|
const stickyHeaderDates = !props.forPrint && internal$1.getStickyHeaderDates(options);
|
|
877
1001
|
const stickyFooterScrollbar = !props.forPrint && internal$1.getStickyFooterScrollbar(options);
|
|
878
1002
|
const colCnt = props.cellRows[0].length;
|
|
879
|
-
const [canvasWidth, colWidth] = computeColWidth(colCnt, props.dayMinWidth, state.
|
|
1003
|
+
const [canvasWidth, colWidth] = computeColWidth(colCnt, props.dayMinWidth, state.clientWidth);
|
|
880
1004
|
return (preact.createElement(preact.Fragment, null,
|
|
881
|
-
options.dayHeaders && (preact.createElement(
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
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,
|
|
1005
|
+
options.dayHeaders && (preact.createElement("div", { className: 'fc-print-header' },
|
|
1006
|
+
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 },
|
|
1007
|
+
preact.createElement(DayGridHeader, { headerTiers: props.headerTiers, colWidth: colWidth, width: canvasWidth }),
|
|
1008
|
+
Boolean(state.endScrollbarWidth) && (preact.createElement("div", { className: 'fc-border-s fc-filler', style: { minWidth: state.endScrollbarWidth } }))))),
|
|
1009
|
+
preact.createElement(internal$1.Scroller, { vertical: verticalScrollbars, horizontal: true, hideScrollbars: stickyFooterScrollbar ||
|
|
1010
|
+
props.forPrint // prevents blank space in print-view on Safari
|
|
1011
|
+
, className: internal$1.joinClassNames('fc-daygrid-body',
|
|
1012
|
+
// HACK for Safari. Can't do break-inside:avoid with flexbox items, likely b/c it's not standard:
|
|
1013
|
+
// https://stackoverflow.com/a/60256345
|
|
1014
|
+
!props.forPrint && 'fc-flex-col', verticalScrollbars && 'fc-liquid'), ref: this.bodyScrollerRef, clientWidthRef: this.handleClientWidth, endScrollbarWidthRef: this.handleEndScrollbarWidth },
|
|
1015
|
+
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
1016
|
// content
|
|
898
1017
|
fgEventSegs: props.fgEventSegs, bgEventSegs: props.bgEventSegs, businessHourSegs: props.businessHourSegs, dateSelectionSegs: props.dateSelectionSegs, eventDrag: props.eventDrag, eventResize: props.eventResize, eventSelection: props.eventSelection,
|
|
899
1018
|
// dimensions
|
|
900
|
-
colWidth: colWidth, width: canvasWidth,
|
|
1019
|
+
colWidth: colWidth, width: canvasWidth, visibleWidth: // TODO: DRY
|
|
1020
|
+
state.clientWidth != null && state.endScrollbarWidth != null
|
|
1021
|
+
? state.clientWidth + state.endScrollbarWidth
|
|
1022
|
+
: undefined,
|
|
901
1023
|
// refs
|
|
902
1024
|
rowHeightRefMap: props.rowHeightRefMap })),
|
|
903
|
-
Boolean(stickyFooterScrollbar) && (preact.createElement(internal$1.
|
|
904
|
-
marginTop: '-1px', // HACK
|
|
905
|
-
} },
|
|
906
|
-
preact.createElement("div", { style: {
|
|
907
|
-
width: canvasWidth,
|
|
908
|
-
height: '1px', // HACK
|
|
909
|
-
} })))));
|
|
1025
|
+
Boolean(stickyFooterScrollbar) && (preact.createElement(internal$1.StickyFooterScrollbar, { canvasWidth: canvasWidth, scrollerRef: this.footerScrollerRef }))));
|
|
910
1026
|
}
|
|
911
1027
|
// Lifecycle
|
|
912
1028
|
// -----------------------------------------------------------------------------------------------
|
|
@@ -961,21 +1077,29 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
|
|
|
961
1077
|
}
|
|
962
1078
|
}
|
|
963
1079
|
};
|
|
964
|
-
this.
|
|
965
|
-
|
|
1080
|
+
this.handleScrollEnd = ({ isUser }) => {
|
|
1081
|
+
if (isUser) {
|
|
1082
|
+
this.scrollDate = null;
|
|
1083
|
+
}
|
|
966
1084
|
};
|
|
967
1085
|
}
|
|
968
1086
|
render() {
|
|
969
1087
|
const { props, context } = this;
|
|
970
1088
|
const { options } = context;
|
|
971
1089
|
const commonLayoutProps = Object.assign(Object.assign({}, props), { scrollerRef: this.scrollerRef, rowHeightRefMap: this.rowHeightRefMap });
|
|
972
|
-
return (preact.createElement(internal$1.ViewContainer, { viewSpec: context.viewSpec,
|
|
1090
|
+
return (preact.createElement(internal$1.ViewContainer, { viewSpec: context.viewSpec, attrs: {
|
|
1091
|
+
role: 'grid',
|
|
1092
|
+
'aria-rowcount': props.headerTiers.length + props.cellRows.length,
|
|
1093
|
+
'aria-colcount': props.cellRows[0].length,
|
|
1094
|
+
'aria-labelledby': props.labelId,
|
|
1095
|
+
'aria-label': props.labelStr,
|
|
1096
|
+
}, 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
1097
|
}
|
|
974
1098
|
// Lifecycle
|
|
975
1099
|
// -----------------------------------------------------------------------------------------------
|
|
976
1100
|
componentDidMount() {
|
|
977
1101
|
this.resetScroll();
|
|
978
|
-
this.scrollerRef.current.addScrollEndListener(this.
|
|
1102
|
+
this.scrollerRef.current.addScrollEndListener(this.handleScrollEnd);
|
|
979
1103
|
}
|
|
980
1104
|
componentDidUpdate(prevProps) {
|
|
981
1105
|
if (prevProps.dateProfile !== this.props.dateProfile && this.context.options.scrollTimeReset) {
|
|
@@ -983,98 +1107,24 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
|
|
|
983
1107
|
}
|
|
984
1108
|
}
|
|
985
1109
|
componentWillUnmount() {
|
|
986
|
-
this.scrollerRef.current.removeScrollEndListener(this.
|
|
1110
|
+
this.scrollerRef.current.removeScrollEndListener(this.handleScrollEnd);
|
|
987
1111
|
}
|
|
988
1112
|
// Scrolling
|
|
989
1113
|
// -----------------------------------------------------------------------------------------------
|
|
990
1114
|
resetScroll() {
|
|
991
1115
|
this.scrollDate = this.props.dateProfile.currentDate;
|
|
992
1116
|
this.updateScrollY();
|
|
993
|
-
// updateScrollX
|
|
994
1117
|
const scroller = this.scrollerRef.current;
|
|
995
1118
|
scroller.scrollTo({ x: 0 });
|
|
996
1119
|
}
|
|
997
1120
|
}
|
|
998
1121
|
|
|
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
1122
|
class DayGridView extends internal$1.BaseComponent {
|
|
1073
1123
|
constructor() {
|
|
1074
1124
|
super(...arguments);
|
|
1075
1125
|
// memo
|
|
1076
1126
|
this.buildDayTableModel = internal$1.memoize(buildDayTableModel);
|
|
1077
|
-
this.
|
|
1127
|
+
this.buildDateRowConfigs = internal$1.memoize(buildDateRowConfigs);
|
|
1078
1128
|
this.createDayHeaderFormatter = internal$1.memoize(createDayHeaderFormatter);
|
|
1079
1129
|
// internal
|
|
1080
1130
|
this.slicer = new DayTableSlicer();
|
|
@@ -1084,27 +1134,16 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
|
|
|
1084
1134
|
const { options } = context;
|
|
1085
1135
|
const dayTableModel = this.buildDayTableModel(props.dateProfile, context.dateProfileGenerator);
|
|
1086
1136
|
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
1137
|
const dayHeaderFormat = this.createDayHeaderFormatter(context.options.dayHeaderFormat, datesRepDistinctDays, dayTableModel.colCnt);
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
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 }))));
|
|
1138
|
+
const slicedProps = this.slicer.sliceProps(props, props.dateProfile, options.nextDayThreshold, context, dayTableModel);
|
|
1139
|
+
return (preact.createElement(internal$1.NowTimer, { unit: "day" }, (nowDate, todayRange) => {
|
|
1140
|
+
const headerTiers = this.buildDateRowConfigs(dayTableModel.headerDates, datesRepDistinctDays, props.dateProfile, todayRange, dayHeaderFormat, context);
|
|
1141
|
+
return (preact.createElement(DayGridLayout, { labelId: props.labelId, labelStr: props.labelStr, dateProfile: props.dateProfile, todayRange: todayRange, cellRows: dayTableModel.cellRows, forPrint: props.forPrint, className: 'fc-daygrid',
|
|
1142
|
+
// header content
|
|
1143
|
+
headerTiers: headerTiers,
|
|
1144
|
+
// body content
|
|
1145
|
+
fgEventSegs: slicedProps.fgEventSegs, bgEventSegs: slicedProps.bgEventSegs, businessHourSegs: slicedProps.businessHourSegs, dateSelectionSegs: slicedProps.dateSelectionSegs, eventDrag: slicedProps.eventDrag, eventResize: slicedProps.eventResize, eventSelection: slicedProps.eventSelection }));
|
|
1146
|
+
}));
|
|
1108
1147
|
}
|
|
1109
1148
|
}
|
|
1110
1149
|
|
|
@@ -1146,7 +1185,7 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
|
|
|
1146
1185
|
return { start, end };
|
|
1147
1186
|
}
|
|
1148
1187
|
|
|
1149
|
-
var css_248z = ":root{--fc-daygrid-event-dot-width:8px}.fc-daygrid-
|
|
1188
|
+
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
1189
|
internal$1.injectStyles(css_248z);
|
|
1151
1190
|
|
|
1152
1191
|
var plugin = core.createPlugin({
|
|
@@ -1177,52 +1216,21 @@ FullCalendar.DayGrid = (function (exports, core, internal$1, preact) {
|
|
|
1177
1216
|
},
|
|
1178
1217
|
});
|
|
1179
1218
|
|
|
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
1219
|
var internal = {
|
|
1213
1220
|
__proto__: null,
|
|
1214
1221
|
DayTableSlicer: DayTableSlicer,
|
|
1215
1222
|
TableDateProfileGenerator: TableDateProfileGenerator,
|
|
1216
1223
|
buildDayTableRenderRange: buildDayTableRenderRange,
|
|
1217
1224
|
DayGridView: DayGridView,
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1225
|
+
DayGridHeaderRow: DayGridHeaderRow,
|
|
1226
|
+
buildDateRowConfigs: buildDateRowConfigs,
|
|
1227
|
+
buildDateRowConfig: buildDateRowConfig,
|
|
1228
|
+
buildDateRenderConfig: buildDateRenderConfig,
|
|
1229
|
+
buildDateDataConfigs: buildDateDataConfigs,
|
|
1222
1230
|
createDayHeaderFormatter: createDayHeaderFormatter,
|
|
1223
1231
|
DayGridLayout: DayGridLayout,
|
|
1232
|
+
computeRowHeight: computeRowHeight,
|
|
1224
1233
|
DayGridRow: DayGridRow,
|
|
1225
|
-
COMPACT_CELL_WIDTH: COMPACT_CELL_WIDTH,
|
|
1226
1234
|
DayGridRows: DayGridRows,
|
|
1227
1235
|
buildDayTableModel: buildDayTableModel,
|
|
1228
1236
|
computeColWidth: computeColWidth,
|