@fullcalendar/list 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 +143 -144
- package/index.global.min.js +2 -2
- package/internal-common.d.ts +19 -16
- package/internal.cjs +144 -145
- package/internal.js +145 -146
- package/package.json +2 -2
package/index.global.js
CHANGED
|
@@ -1,51 +1,38 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
FullCalendar List View Plugin v7.0.0-beta.
|
|
2
|
+
FullCalendar List View Plugin v7.0.0-beta.4
|
|
3
3
|
Docs & License: https://fullcalendar.io/docs/list-view
|
|
4
4
|
(c) 2024 Adam Shaw
|
|
5
5
|
*/
|
|
6
6
|
FullCalendar.List = (function (exports, core, internal$1, preact) {
|
|
7
7
|
'use strict';
|
|
8
8
|
|
|
9
|
-
class
|
|
10
|
-
constructor() {
|
|
11
|
-
super(...arguments);
|
|
12
|
-
this.state = {
|
|
13
|
-
textId: internal$1.getUniqueDomId(),
|
|
14
|
-
};
|
|
15
|
-
}
|
|
9
|
+
class ListDayHeader extends internal$1.BaseComponent {
|
|
16
10
|
render() {
|
|
17
|
-
let {
|
|
18
|
-
let {
|
|
19
|
-
let { textId } = this.state;
|
|
11
|
+
let { dateEnv, options, viewApi } = this.context;
|
|
12
|
+
let { dayDate, todayRange } = this.props;
|
|
20
13
|
let stickyHeaderDates = !this.props.forPrint && internal$1.getStickyHeaderDates(options);
|
|
21
14
|
let dayMeta = internal$1.getDateMeta(dayDate, todayRange);
|
|
22
15
|
// will ever be falsy?
|
|
23
16
|
let text = options.listDayFormat ? dateEnv.format(dayDate, options.listDayFormat) : '';
|
|
24
17
|
// will ever be falsy? also, BAD NAME "alt"
|
|
25
18
|
let sideText = options.listDaySideFormat ? dateEnv.format(dayDate, options.listDaySideFormat) : '';
|
|
26
|
-
let
|
|
27
|
-
|
|
28
|
-
sideText, navLinkAttrs:
|
|
19
|
+
let isNavLink = options.navLinks;
|
|
20
|
+
let renderProps = Object.assign({ date: dateEnv.toDate(dayDate), view: viewApi, text,
|
|
21
|
+
sideText, navLinkAttrs: isNavLink
|
|
22
|
+
? internal$1.buildNavLinkAttrs(this.context, dayDate, undefined, text)
|
|
23
|
+
: {}, sideNavLinkAttrs: isNavLink
|
|
24
|
+
// duplicate navLink, so does not need to be tabbable
|
|
25
|
+
? internal$1.buildNavLinkAttrs(this.context, dayDate, undefined, sideText, /* isTabbable = */ false)
|
|
26
|
+
: {} }, dayMeta);
|
|
29
27
|
// TODO: make a reusable HOC for dayHeader (used in daygrid/timegrid too)
|
|
30
|
-
return (preact.createElement(internal$1.
|
|
31
|
-
|
|
32
|
-
...internal$1.getDayClassNames(dayMeta, theme),
|
|
33
|
-
], elAttrs: {
|
|
34
|
-
'data-date': internal$1.formatDayString(dayDate),
|
|
35
|
-
}, renderProps: renderProps, generatorName: "dayHeaderContent", customGenerator: options.dayHeaderContent, defaultGenerator: renderInnerContent, classNameGenerator: options.dayHeaderClassNames, didMount: options.dayHeaderDidMount, willUnmount: options.dayHeaderWillUnmount }, (InnerContent) => (preact.createElement(InnerContent, { elTag: "th", elAttrs: {
|
|
36
|
-
id: cellId,
|
|
37
|
-
colSpan: 3,
|
|
38
|
-
'aria-labelledby': textId,
|
|
39
|
-
}, elClasses: [
|
|
40
|
-
'fc-list-day-cell',
|
|
41
|
-
stickyHeaderDates ? 'fc-list-day-cell-sticky' : '',
|
|
42
|
-
] }))));
|
|
28
|
+
return (preact.createElement("div", { className: internal$1.joinClassNames('fc-list-day-outer', stickyHeaderDates && 'fc-list-day-outer-sticky') },
|
|
29
|
+
preact.createElement(internal$1.ContentContainer, { tag: "div", className: internal$1.joinClassNames('fc-list-day', internal$1.getDayClassName(dayMeta)), attrs: Object.assign({ 'data-date': internal$1.formatDayString(dayDate) }, (dayMeta.isToday ? { 'aria-current': 'date' } : {})), renderProps: renderProps, generatorName: "dayHeaderContent", customGenerator: options.dayHeaderContent, defaultGenerator: renderInnerContent, classNameGenerator: options.dayHeaderClassNames, didMount: options.dayHeaderDidMount, willUnmount: options.dayHeaderWillUnmount })));
|
|
43
30
|
}
|
|
44
31
|
}
|
|
45
32
|
function renderInnerContent(props) {
|
|
46
|
-
return (preact.createElement(
|
|
47
|
-
props.text && (preact.createElement("
|
|
48
|
-
props.sideText && (
|
|
33
|
+
return (preact.createElement(preact.Fragment, null,
|
|
34
|
+
props.text && (preact.createElement("div", Object.assign({ className: "fc-list-day-text" }, props.navLinkAttrs), props.text)),
|
|
35
|
+
props.sideText && (preact.createElement("div", Object.assign({ className: "fc-list-day-side-text" }, props.sideNavLinkAttrs), props.sideText))));
|
|
49
36
|
}
|
|
50
37
|
|
|
51
38
|
const DEFAULT_TIME_FORMAT = internal$1.createFormatter({
|
|
@@ -53,92 +40,132 @@ FullCalendar.List = (function (exports, core, internal$1, preact) {
|
|
|
53
40
|
minute: '2-digit',
|
|
54
41
|
meridiem: 'short',
|
|
55
42
|
});
|
|
56
|
-
class
|
|
43
|
+
class ListEvent extends internal$1.BaseComponent {
|
|
44
|
+
constructor() {
|
|
45
|
+
super(...arguments);
|
|
46
|
+
this.handleTitleEl = (titleEl) => {
|
|
47
|
+
if (this.disconnectTitleWidth) {
|
|
48
|
+
this.disconnectTitleWidth();
|
|
49
|
+
}
|
|
50
|
+
if (titleEl) {
|
|
51
|
+
this.disconnectTitleWidth = internal$1.watchWidth(titleEl, (titleWidth) => {
|
|
52
|
+
internal$1.setRef(this.props.timeWidthRef, titleWidth);
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
57
|
render() {
|
|
58
58
|
let { props, context } = this;
|
|
59
|
+
let { eventRange } = props;
|
|
59
60
|
let { options } = context;
|
|
60
|
-
let { eventRange, timeHeaderId, eventHeaderId, dateHeaderId } = props;
|
|
61
61
|
let timeFormat = options.eventTimeFormat || DEFAULT_TIME_FORMAT;
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
buildTimeContent(eventRange, props.isStart, props.isEnd, props.segStart, props.segEnd, timeFormat, context, timeHeaderId, dateHeaderId),
|
|
67
|
-
preact.createElement("td", { "aria-hidden": true, className: "fc-list-event-dot-cell" },
|
|
62
|
+
let [tag, attrs] = internal$1.getEventTagAndAttrs(eventRange, context);
|
|
63
|
+
return (preact.createElement(internal$1.EventContainer, Object.assign({}, props, { tag: tag, attrs: Object.assign({ role: 'listitem' }, attrs), className: 'fc-list-event', defaultGenerator: renderEventTitleOnly, eventRange: eventRange, timeText: "", disableDragging: true, disableResizing: true }), (InnerContent, eventContentArg) => (preact.createElement(preact.Fragment, null,
|
|
64
|
+
preact.createElement("div", { className: 'fc-list-event-time-outer', style: { width: props.timeOuterWidth } }, this.buildTimeContent(eventRange, props.slicedStart, props.slicedEnd, props.isStart, props.isEnd, timeFormat, context)),
|
|
65
|
+
preact.createElement("div", { className: "fc-list-event-dot-outer" },
|
|
68
66
|
preact.createElement("span", { className: "fc-list-event-dot", style: {
|
|
69
67
|
borderColor: eventContentArg.borderColor || eventContentArg.backgroundColor,
|
|
70
68
|
} })),
|
|
71
|
-
preact.createElement(InnerContent, {
|
|
69
|
+
preact.createElement(InnerContent, { tag: "div", className: 'fc-list-event-title' })))));
|
|
72
70
|
}
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
if (eventDef.allDay) {
|
|
86
|
-
doAllDay = true;
|
|
87
|
-
}
|
|
88
|
-
else if (internal$1.isMultiDayRange(eventRange.range)) { // TODO: use (!isStart || !isEnd) instead?
|
|
89
|
-
if (isStart) {
|
|
90
|
-
timeText = internal$1.buildEventRangeTimeText(eventRange, timeFormat, context, null, null, eventInstance.range.start, segEnd);
|
|
91
|
-
}
|
|
92
|
-
else if (isEnd) {
|
|
93
|
-
timeText = internal$1.buildEventRangeTimeText(eventRange, timeFormat, context, null, null, segStart, eventInstance.range.end);
|
|
71
|
+
buildTimeContent(eventRange, // whole-day span
|
|
72
|
+
slicedStart, // view-sliced whole-day span
|
|
73
|
+
slicedEnd, // view-sliced whole-day span
|
|
74
|
+
isStart, isEnd, timeFormat, context) {
|
|
75
|
+
let { options } = context;
|
|
76
|
+
if (options.displayEventTime !== false) {
|
|
77
|
+
if (eventRange.def.allDay || (!isStart && !isEnd)) {
|
|
78
|
+
let renderProps = {
|
|
79
|
+
text: context.options.allDayText,
|
|
80
|
+
view: context.viewApi,
|
|
81
|
+
};
|
|
82
|
+
return (preact.createElement(internal$1.ContentContainer, { tag: "div", className: 'fc-list-event-time', renderProps: renderProps, elRef: this.handleTitleEl, generatorName: "allDayContent", customGenerator: options.allDayContent, defaultGenerator: renderAllDayInner, classNameGenerator: options.allDayClassNames, didMount: options.allDayDidMount, willUnmount: options.allDayWillUnmount }));
|
|
94
83
|
}
|
|
95
84
|
else {
|
|
96
|
-
|
|
85
|
+
return (preact.createElement("div", { className: "fc-list-event-time", ref: this.handleTitleEl }, internal$1.buildEventRangeTimeText(timeFormat, eventRange, slicedStart, slicedEnd, isStart, isEnd, context)));
|
|
97
86
|
}
|
|
98
87
|
}
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
let renderProps = {
|
|
104
|
-
text: context.options.allDayText,
|
|
105
|
-
view: context.viewApi,
|
|
106
|
-
};
|
|
107
|
-
return (preact.createElement(internal$1.ContentContainer, { elTag: "td", elClasses: ['fc-list-event-time'], elAttrs: {
|
|
108
|
-
headers: `${timeHeaderId} ${dateHeaderId}`,
|
|
109
|
-
}, renderProps: renderProps, generatorName: "allDayContent", customGenerator: options.allDayContent, defaultGenerator: renderAllDayInner, classNameGenerator: options.allDayClassNames, didMount: options.allDayDidMount, willUnmount: options.allDayWillUnmount }));
|
|
110
|
-
}
|
|
111
|
-
return (preact.createElement("td", { className: "fc-list-event-time" }, timeText));
|
|
88
|
+
return null;
|
|
89
|
+
}
|
|
90
|
+
componentWillUnmount() {
|
|
91
|
+
internal$1.setRef(this.props.timeWidthRef, null);
|
|
112
92
|
}
|
|
113
|
-
|
|
93
|
+
}
|
|
94
|
+
function renderEventTitleOnly(renderProps) {
|
|
95
|
+
return renderProps.event.title;
|
|
114
96
|
}
|
|
115
97
|
function renderAllDayInner(renderProps) {
|
|
116
98
|
return renderProps.text;
|
|
117
99
|
}
|
|
118
100
|
|
|
101
|
+
class ListDay extends internal$1.BaseComponent {
|
|
102
|
+
constructor() {
|
|
103
|
+
super(...arguments);
|
|
104
|
+
// memo
|
|
105
|
+
this.sortEventSegs = internal$1.memoize(internal$1.sortEventSegs);
|
|
106
|
+
// ref
|
|
107
|
+
this.timeWidthRefMap = new internal$1.RefMap(() => {
|
|
108
|
+
internal$1.afterSize(this.handleTimeWidths);
|
|
109
|
+
});
|
|
110
|
+
this.handleTimeWidths = () => {
|
|
111
|
+
const timeWidthMap = this.timeWidthRefMap.current;
|
|
112
|
+
let max = 0;
|
|
113
|
+
for (const timeWidth of timeWidthMap.values()) {
|
|
114
|
+
max = Math.max(max, timeWidth);
|
|
115
|
+
}
|
|
116
|
+
internal$1.setRef(this.props.timeWidthRef, max);
|
|
117
|
+
};
|
|
118
|
+
}
|
|
119
|
+
render() {
|
|
120
|
+
const { props, context, timeWidthRefMap } = this;
|
|
121
|
+
const { nowDate, todayRange } = props;
|
|
122
|
+
const { options } = context;
|
|
123
|
+
const segs = this.sortEventSegs(props.segs, options.eventOrder);
|
|
124
|
+
const fullDateStr = internal$1.buildDateStr(this.context, props.dayDate);
|
|
125
|
+
return (preact.createElement("div", { role: 'listitem', "aria-label": fullDateStr, className: 'fc-list-day-and-events' },
|
|
126
|
+
preact.createElement(ListDayHeader, { dayDate: props.dayDate, todayRange: todayRange, forPrint: props.forPrint }),
|
|
127
|
+
preact.createElement("div", { role: 'list', "aria-label": options.eventsHint }, segs.map((seg) => {
|
|
128
|
+
const key = internal$1.getEventKey(seg);
|
|
129
|
+
return (preact.createElement(ListEvent, Object.assign({ key: key, eventRange: seg.eventRange, slicedStart: seg.slicedStart, slicedEnd: seg.slicedEnd, isStart: seg.isStart, isEnd: seg.isEnd, timeWidthRef: timeWidthRefMap.createRef(key), timeOuterWidth: props.timeOuterWidth, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: false }, internal$1.getEventRangeMeta(seg.eventRange, todayRange, nowDate))));
|
|
130
|
+
}))));
|
|
131
|
+
}
|
|
132
|
+
componentWillUnmount() {
|
|
133
|
+
internal$1.setRef(this.props.timeWidthRef, null);
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
119
137
|
/*
|
|
120
138
|
Responsible for the scroller, and forwarding event-related actions into the "grid".
|
|
121
139
|
*/
|
|
122
140
|
class ListView extends internal$1.DateComponent {
|
|
123
141
|
constructor() {
|
|
124
142
|
super(...arguments);
|
|
143
|
+
// memo
|
|
125
144
|
this.computeDateVars = internal$1.memoize(computeDateVars);
|
|
126
145
|
this.eventStoreToSegs = internal$1.memoize(this._eventStoreToSegs);
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
};
|
|
146
|
+
// ref
|
|
147
|
+
this.timeWidthRefMap = new internal$1.RefMap(() => {
|
|
148
|
+
internal$1.afterSize(this.handleTimeWidths);
|
|
149
|
+
});
|
|
132
150
|
this.setRootEl = (rootEl) => {
|
|
133
151
|
if (rootEl) {
|
|
134
152
|
this.context.registerInteractiveComponent(this, {
|
|
135
153
|
el: rootEl,
|
|
154
|
+
disableHits: true, // HACK to not do date-clicking/selecting
|
|
136
155
|
});
|
|
137
156
|
}
|
|
138
157
|
else {
|
|
139
158
|
this.context.unregisterInteractiveComponent(this);
|
|
140
159
|
}
|
|
141
160
|
};
|
|
161
|
+
this.handleTimeWidths = () => {
|
|
162
|
+
const timeWidthMap = this.timeWidthRefMap.current;
|
|
163
|
+
let max = 0;
|
|
164
|
+
for (const timeWidth of timeWidthMap.values()) {
|
|
165
|
+
max = Math.max(max, timeWidth);
|
|
166
|
+
}
|
|
167
|
+
this.setState({ timeOuterWidth: max });
|
|
168
|
+
};
|
|
142
169
|
}
|
|
143
170
|
render() {
|
|
144
171
|
let { props, context } = this;
|
|
@@ -146,15 +173,11 @@ FullCalendar.List = (function (exports, core, internal$1, preact) {
|
|
|
146
173
|
let { dayDates, dayRanges } = this.computeDateVars(props.dateProfile);
|
|
147
174
|
let eventSegs = this.eventStoreToSegs(props.eventStore, props.eventUiBases, dayRanges);
|
|
148
175
|
let verticalScrolling = !props.forPrint && !internal$1.getIsHeightAuto(options);
|
|
149
|
-
return (preact.createElement(internal$1.ViewContainer, { elRef: this.setRootEl,
|
|
150
|
-
'fc-list-view',
|
|
151
|
-
'fc-flex-column',
|
|
152
|
-
'fc-border',
|
|
153
|
-
], viewSpec: context.viewSpec },
|
|
176
|
+
return (preact.createElement(internal$1.ViewContainer, { viewSpec: context.viewSpec, className: 'fc-list fc-flex-col fc-border', elRef: this.setRootEl },
|
|
154
177
|
preact.createElement(internal$1.Scroller // TODO: don't need heavyweight component
|
|
155
|
-
, { vertical: verticalScrolling,
|
|
156
|
-
this.renderSegList(eventSegs, dayDates)
|
|
157
|
-
this.renderEmptyMessage())));
|
|
178
|
+
, { vertical: verticalScrolling, className: verticalScrolling ? 'fc-liquid' : '' },
|
|
179
|
+
this.renderSegList(eventSegs, dayDates),
|
|
180
|
+
!eventSegs.length && this.renderEmptyMessage())));
|
|
158
181
|
}
|
|
159
182
|
renderEmptyMessage() {
|
|
160
183
|
let { options, viewApi } = this.context;
|
|
@@ -162,77 +185,53 @@ FullCalendar.List = (function (exports, core, internal$1, preact) {
|
|
|
162
185
|
text: options.noEventsText,
|
|
163
186
|
view: viewApi,
|
|
164
187
|
};
|
|
165
|
-
return (preact.createElement(internal$1.ContentContainer, {
|
|
188
|
+
return (preact.createElement(internal$1.ContentContainer, { tag: "div", attrs: {
|
|
189
|
+
role: 'status', // does a polite announcement
|
|
190
|
+
}, className: 'fc-list-empty', renderProps: renderProps, generatorName: "noEventsContent", customGenerator: options.noEventsContent, defaultGenerator: renderNoEventsInner, classNameGenerator: options.noEventsClassNames, didMount: options.noEventsDidMount, willUnmount: options.noEventsWillUnmount }, (InnerContent) => (preact.createElement(InnerContent, { tag: "div", className: 'fc-list-empty-inner' }))));
|
|
166
191
|
}
|
|
167
192
|
renderSegList(allSegs, dayDates) {
|
|
168
|
-
let { options } = this.context;
|
|
169
|
-
let { timeHeaderId, eventHeaderId, dateHeaderIdRoot } = this.state;
|
|
170
193
|
let segsByDay = groupSegsByDay(allSegs); // sparse array
|
|
171
|
-
return (preact.createElement(
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
let
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
daySegs = internal$1.sortEventSegs(daySegs, options.eventOrder);
|
|
181
|
-
for (let seg of daySegs) {
|
|
182
|
-
innerNodes.push(preact.createElement(ListViewEventRow, Object.assign({ key: dayStr + ':' + seg.eventRange.instance.instanceId /* are multiple segs for an instanceId */, eventRange: seg.eventRange, isStart: seg.isStart, isEnd: seg.isEnd, segStart: seg.start, segEnd: seg.end, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: false, timeHeaderId: timeHeaderId, eventHeaderId: eventHeaderId, dateHeaderId: dateHeaderId }, internal$1.getEventRangeMeta(seg.eventRange, todayRange, nowDate))));
|
|
194
|
+
return (preact.createElement("div", { role: 'list', "aria-labelledby": this.props.labelId, "aria-label": this.props.labelStr },
|
|
195
|
+
preact.createElement(internal$1.NowTimer, { unit: "day" }, (nowDate, todayRange) => {
|
|
196
|
+
const dayNodes = [];
|
|
197
|
+
for (let dayIndex = 0; dayIndex < segsByDay.length; dayIndex += 1) {
|
|
198
|
+
let daySegs = segsByDay[dayIndex];
|
|
199
|
+
if (daySegs) { // sparse array, so might be undefined
|
|
200
|
+
const dayDate = dayDates[dayIndex];
|
|
201
|
+
const key = internal$1.formatDayString(dayDate);
|
|
202
|
+
dayNodes.push(preact.createElement(ListDay, { key: key, dayDate: dayDate, nowDate: nowDate, todayRange: todayRange, segs: daySegs, forPrint: this.props.forPrint, timeWidthRef: this.timeWidthRefMap.createRef(key), timeOuterWidth: this.state.timeOuterWidth }));
|
|
183
203
|
}
|
|
184
204
|
}
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
preact.createElement("thead", { className: 'fc-offscreen' },
|
|
188
|
-
preact.createElement("tr", null,
|
|
189
|
-
preact.createElement("th", { scope: "col", id: timeHeaderId }, options.timeHint),
|
|
190
|
-
preact.createElement("th", { scope: "col", "aria-hidden": true }),
|
|
191
|
-
preact.createElement("th", { scope: "col", id: eventHeaderId }, options.eventHint))),
|
|
192
|
-
preact.createElement("tbody", null, innerNodes)));
|
|
193
|
-
}));
|
|
205
|
+
return (preact.createElement(preact.Fragment, null, dayNodes));
|
|
206
|
+
})));
|
|
194
207
|
}
|
|
195
208
|
_eventStoreToSegs(eventStore, eventUiBases, dayRanges) {
|
|
196
|
-
return this.eventRangesToSegs(internal$1.sliceEventStore(eventStore, eventUiBases,
|
|
209
|
+
return this.eventRangesToSegs(internal$1.sliceEventStore(eventStore, eventUiBases,
|
|
210
|
+
// HACKY to reference internal state...
|
|
211
|
+
this.props.dateProfile.activeRange, this.context.options.nextDayThreshold).fg, dayRanges);
|
|
197
212
|
}
|
|
198
|
-
eventRangesToSegs(
|
|
213
|
+
eventRangesToSegs(fullDayEventRanges, dayRanges) {
|
|
199
214
|
let segs = [];
|
|
200
|
-
for (let
|
|
201
|
-
segs.push(...this.eventRangeToSegs(
|
|
215
|
+
for (let fullDayEventRange of fullDayEventRanges) {
|
|
216
|
+
segs.push(...this.eventRangeToSegs(fullDayEventRange, dayRanges));
|
|
202
217
|
}
|
|
203
218
|
return segs;
|
|
204
219
|
}
|
|
205
|
-
eventRangeToSegs(
|
|
206
|
-
let
|
|
207
|
-
let { nextDayThreshold } = this.context.options;
|
|
208
|
-
let range = eventRange.range;
|
|
209
|
-
let allDay = eventRange.def.allDay;
|
|
220
|
+
eventRangeToSegs(fullDayEventRange, dayRanges) {
|
|
221
|
+
let fullDayRange = fullDayEventRange.range;
|
|
210
222
|
let dayIndex;
|
|
211
|
-
let segRange;
|
|
212
|
-
let seg;
|
|
213
223
|
let segs = [];
|
|
214
224
|
for (dayIndex = 0; dayIndex < dayRanges.length; dayIndex += 1) {
|
|
215
|
-
|
|
216
|
-
if (
|
|
217
|
-
|
|
218
|
-
eventRange,
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
isStart:
|
|
222
|
-
isEnd:
|
|
225
|
+
const slicedFullDayRange = internal$1.intersectRanges(fullDayRange, dayRanges[dayIndex]);
|
|
226
|
+
if (slicedFullDayRange) {
|
|
227
|
+
segs.push({
|
|
228
|
+
eventRange: fullDayEventRange,
|
|
229
|
+
slicedStart: slicedFullDayRange.start,
|
|
230
|
+
slicedEnd: slicedFullDayRange.end,
|
|
231
|
+
isStart: fullDayEventRange.isStart && fullDayRange.start.valueOf() === slicedFullDayRange.start.valueOf(),
|
|
232
|
+
isEnd: fullDayEventRange.isEnd && fullDayRange.end.valueOf() === slicedFullDayRange.end.valueOf(),
|
|
223
233
|
dayIndex,
|
|
224
|
-
};
|
|
225
|
-
segs.push(seg);
|
|
226
|
-
// detect when range won't go fully into the next day,
|
|
227
|
-
// and mutate the latest seg to the be the end.
|
|
228
|
-
if (!seg.isEnd && !allDay &&
|
|
229
|
-
dayIndex + 1 < dayRanges.length &&
|
|
230
|
-
range.end <
|
|
231
|
-
dateEnv.add(dayRanges[dayIndex + 1].start, nextDayThreshold)) {
|
|
232
|
-
seg.end = range.end;
|
|
233
|
-
seg.isEnd = true;
|
|
234
|
-
break;
|
|
235
|
-
}
|
|
234
|
+
});
|
|
236
235
|
}
|
|
237
236
|
}
|
|
238
237
|
return segs;
|
|
@@ -282,7 +281,7 @@ FullCalendar.List = (function (exports, core, internal$1, preact) {
|
|
|
282
281
|
return input === false ? null : internal$1.createFormatter(input);
|
|
283
282
|
}
|
|
284
283
|
|
|
285
|
-
var css_248z = ":root{--fc-list-event-dot-width:10px;--fc-list-event-hover-bg-color:#f5f5f5}.fc-
|
|
284
|
+
var css_248z = ":root{--fc-list-event-dot-width:10px;--fc-list-event-hover-bg-color:#f5f5f5}.fc-list-day,.fc-list-event-dot-outer,.fc-list-event-time,.fc-list-event-title{padding:8px 14px}.fc-direction-ltr .fc-list-event-dot-outer{padding-right:0}.fc-direction-rtl .fc-list-event-dot-outer{padding-left:0}.fc-list-empty{align-items:center;background-color:var(--fc-neutral-bg-color);display:flex;height:100%;justify-content:center}.fc-list-empty-inner{margin:5em 0}.fc-list-day,.fc-list-event:not(.fc-list-day-and-events:last-child .fc-list-event:last-child){border-bottom:1px solid var(--fc-border-color)}.fc-list-day-outer-sticky{background:var(--fc-page-bg-color);position:sticky;top:0}.fc-list-day{background:var(--fc-neutral-bg-color);display:flex;font-weight:700;justify-content:space-between}.fc-list-event{display:flex;flex-direction:row}a.fc-list-event{color:inherit;text-decoration:none}.fc-list-event:hover{background-color:var(--fc-list-event-hover-bg-color)}.fc-list-event-time-outer{display:flex;flex-direction:row}.fc-list-event-dot-outer,.fc-list-event-time{white-space:nowrap}.fc-list-event-dot{border:calc(var(--fc-list-event-dot-width)/2) solid var(--fc-event-border-color);border-radius:calc(var(--fc-list-event-dot-width)/2);box-sizing:content-box;display:inline-block;height:0;width:0}a.fc-list-event:hover .fc-list-event-title{text-decoration:underline}";
|
|
286
285
|
internal$1.injectStyles(css_248z);
|
|
287
286
|
|
|
288
287
|
var plugin = core.createPlugin({
|
package/index.global.min.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
FullCalendar List View Plugin v7.0.0-beta.
|
|
2
|
+
FullCalendar List View Plugin v7.0.0-beta.4
|
|
3
3
|
Docs & License: https://fullcalendar.io/docs/list-view
|
|
4
4
|
(c) 2024 Adam Shaw
|
|
5
5
|
*/
|
|
6
|
-
FullCalendar.List=function(e,t,n,
|
|
6
|
+
FullCalendar.List=function(e,t,n,i){"use strict";class a extends n.BaseComponent{render(){let{dateEnv:e,options:t,viewApi:a}=this.context,{dayDate:r,todayRange:l}=this.props,o=!this.props.forPrint&&n.getStickyHeaderDates(t),d=n.getDateMeta(r,l),c=t.listDayFormat?e.format(r,t.listDayFormat):"",m=t.listDaySideFormat?e.format(r,t.listDaySideFormat):"",u=t.navLinks,f=Object.assign({date:e.toDate(r),view:a,text:c,sideText:m,navLinkAttrs:u?n.buildNavLinkAttrs(this.context,r,void 0,c):{},sideNavLinkAttrs:u?n.buildNavLinkAttrs(this.context,r,void 0,m,!1):{}},d);return i.createElement("div",{className:n.joinClassNames("fc-list-day-outer",o&&"fc-list-day-outer-sticky")},i.createElement(n.ContentContainer,{tag:"div",className:n.joinClassNames("fc-list-day",n.getDayClassName(d)),attrs:Object.assign({"data-date":n.formatDayString(r)},d.isToday?{"aria-current":"date"}:{}),renderProps:f,generatorName:"dayHeaderContent",customGenerator:t.dayHeaderContent,defaultGenerator:s,classNameGenerator:t.dayHeaderClassNames,didMount:t.dayHeaderDidMount,willUnmount:t.dayHeaderWillUnmount}))}}function s(e){return i.createElement(i.Fragment,null,e.text&&i.createElement("div",Object.assign({className:"fc-list-day-text"},e.navLinkAttrs),e.text),e.sideText&&i.createElement("div",Object.assign({className:"fc-list-day-side-text"},e.sideNavLinkAttrs),e.sideText))}const r=n.createFormatter({hour:"numeric",minute:"2-digit",meridiem:"short"});class l extends n.BaseComponent{constructor(){super(...arguments),this.handleTitleEl=e=>{this.disconnectTitleWidth&&this.disconnectTitleWidth(),e&&(this.disconnectTitleWidth=n.watchWidth(e,e=>{n.setRef(this.props.timeWidthRef,e)}))}}render(){let{props:e,context:t}=this,{eventRange:a}=e,{options:s}=t,l=s.eventTimeFormat||r,[d,c]=n.getEventTagAndAttrs(a,t);return i.createElement(n.EventContainer,Object.assign({},e,{tag:d,attrs:Object.assign({role:"listitem"},c),className:"fc-list-event",defaultGenerator:o,eventRange:a,timeText:"",disableDragging:!0,disableResizing:!0}),(n,s)=>i.createElement(i.Fragment,null,i.createElement("div",{className:"fc-list-event-time-outer",style:{width:e.timeOuterWidth}},this.buildTimeContent(a,e.slicedStart,e.slicedEnd,e.isStart,e.isEnd,l,t)),i.createElement("div",{className:"fc-list-event-dot-outer"},i.createElement("span",{className:"fc-list-event-dot",style:{borderColor:s.borderColor||s.backgroundColor}})),i.createElement(n,{tag:"div",className:"fc-list-event-title"})))}buildTimeContent(e,t,a,s,r,l,o){let{options:c}=o;if(!1!==c.displayEventTime){if(e.def.allDay||!s&&!r){let e={text:o.options.allDayText,view:o.viewApi};return i.createElement(n.ContentContainer,{tag:"div",className:"fc-list-event-time",renderProps:e,elRef:this.handleTitleEl,generatorName:"allDayContent",customGenerator:c.allDayContent,defaultGenerator:d,classNameGenerator:c.allDayClassNames,didMount:c.allDayDidMount,willUnmount:c.allDayWillUnmount})}return i.createElement("div",{className:"fc-list-event-time",ref:this.handleTitleEl},n.buildEventRangeTimeText(l,e,t,a,s,r,o))}return null}componentWillUnmount(){n.setRef(this.props.timeWidthRef,null)}}function o(e){return e.event.title}function d(e){return e.text}class c extends n.BaseComponent{constructor(){super(...arguments),this.sortEventSegs=n.memoize(n.sortEventSegs),this.timeWidthRefMap=new n.RefMap(()=>{n.afterSize(this.handleTimeWidths)}),this.handleTimeWidths=()=>{const e=this.timeWidthRefMap.current;let t=0;for(const n of e.values())t=Math.max(t,n);n.setRef(this.props.timeWidthRef,t)}}render(){const{props:e,context:t,timeWidthRefMap:s}=this,{nowDate:r,todayRange:o}=e,{options:d}=t,c=this.sortEventSegs(e.segs,d.eventOrder),m=n.buildDateStr(this.context,e.dayDate);return i.createElement("div",{role:"listitem","aria-label":m,className:"fc-list-day-and-events"},i.createElement(a,{dayDate:e.dayDate,todayRange:o,forPrint:e.forPrint}),i.createElement("div",{role:"list","aria-label":d.eventsHint},c.map(t=>{const a=n.getEventKey(t);return i.createElement(l,Object.assign({key:a,eventRange:t.eventRange,slicedStart:t.slicedStart,slicedEnd:t.slicedEnd,isStart:t.isStart,isEnd:t.isEnd,timeWidthRef:s.createRef(a),timeOuterWidth:e.timeOuterWidth,isDragging:!1,isResizing:!1,isDateSelecting:!1,isSelected:!1},n.getEventRangeMeta(t.eventRange,o,r)))})))}componentWillUnmount(){n.setRef(this.props.timeWidthRef,null)}}class m extends n.DateComponent{constructor(){super(...arguments),this.computeDateVars=n.memoize(f),this.eventStoreToSegs=n.memoize(this._eventStoreToSegs),this.timeWidthRefMap=new n.RefMap(()=>{n.afterSize(this.handleTimeWidths)}),this.setRootEl=e=>{e?this.context.registerInteractiveComponent(this,{el:e,disableHits:!0}):this.context.unregisterInteractiveComponent(this)},this.handleTimeWidths=()=>{const e=this.timeWidthRefMap.current;let t=0;for(const n of e.values())t=Math.max(t,n);this.setState({timeOuterWidth:t})}}render(){let{props:e,context:t}=this,{options:a}=t,{dayDates:s,dayRanges:r}=this.computeDateVars(e.dateProfile),l=this.eventStoreToSegs(e.eventStore,e.eventUiBases,r),o=!e.forPrint&&!n.getIsHeightAuto(a);return i.createElement(n.ViewContainer,{viewSpec:t.viewSpec,className:"fc-list fc-flex-col fc-border",elRef:this.setRootEl},i.createElement(n.Scroller,{vertical:o,className:o?"fc-liquid":""},this.renderSegList(l,s),!l.length&&this.renderEmptyMessage()))}renderEmptyMessage(){let{options:e,viewApi:t}=this.context,a={text:e.noEventsText,view:t};return i.createElement(n.ContentContainer,{tag:"div",attrs:{role:"status"},className:"fc-list-empty",renderProps:a,generatorName:"noEventsContent",customGenerator:e.noEventsContent,defaultGenerator:u,classNameGenerator:e.noEventsClassNames,didMount:e.noEventsDidMount,willUnmount:e.noEventsWillUnmount},e=>i.createElement(e,{tag:"div",className:"fc-list-empty-inner"}))}renderSegList(e,t){let a=function(e){let t,n,i=[];for(t=0;t<e.length;t+=1)n=e[t],(i[n.dayIndex]||(i[n.dayIndex]=[])).push(n);return i}(e);return i.createElement("div",{role:"list","aria-labelledby":this.props.labelId,"aria-label":this.props.labelStr},i.createElement(n.NowTimer,{unit:"day"},(e,s)=>{const r=[];for(let l=0;l<a.length;l+=1){let o=a[l];if(o){const a=t[l],d=n.formatDayString(a);r.push(i.createElement(c,{key:d,dayDate:a,nowDate:e,todayRange:s,segs:o,forPrint:this.props.forPrint,timeWidthRef:this.timeWidthRefMap.createRef(d),timeOuterWidth:this.state.timeOuterWidth}))}}return i.createElement(i.Fragment,null,r)}))}_eventStoreToSegs(e,t,i){return this.eventRangesToSegs(n.sliceEventStore(e,t,this.props.dateProfile.activeRange,this.context.options.nextDayThreshold).fg,i)}eventRangesToSegs(e,t){let n=[];for(let i of e)n.push(...this.eventRangeToSegs(i,t));return n}eventRangeToSegs(e,t){let i,a=e.range,s=[];for(i=0;i<t.length;i+=1){const r=n.intersectRanges(a,t[i]);r&&s.push({eventRange:e,slicedStart:r.start,slicedEnd:r.end,isStart:e.isStart&&a.start.valueOf()===r.start.valueOf(),isEnd:e.isEnd&&a.end.valueOf()===r.end.valueOf(),dayIndex:i})}return s}}function u(e){return e.text}function f(e){let t=n.startOfDay(e.renderRange.start),i=e.renderRange.end,a=[],s=[];for(;t<i;)a.push(t),s.push({start:t,end:n.addDays(t,1)}),t=n.addDays(t,1);return{dayDates:a,dayRanges:s}}const h={listDayFormat:v,listDaySideFormat:v,noEventsClassNames:n.identity,noEventsContent:n.identity,noEventsDidMount:n.identity,noEventsWillUnmount:n.identity};function v(e){return!1===e?null:n.createFormatter(e)}n.injectStyles(":root{--fc-list-event-dot-width:10px;--fc-list-event-hover-bg-color:#f5f5f5}.fc-list-day,.fc-list-event-dot-outer,.fc-list-event-time,.fc-list-event-title{padding:8px 14px}.fc-direction-ltr .fc-list-event-dot-outer{padding-right:0}.fc-direction-rtl .fc-list-event-dot-outer{padding-left:0}.fc-list-empty{align-items:center;background-color:var(--fc-neutral-bg-color);display:flex;height:100%;justify-content:center}.fc-list-empty-inner{margin:5em 0}.fc-list-day,.fc-list-event:not(.fc-list-day-and-events:last-child .fc-list-event:last-child){border-bottom:1px solid var(--fc-border-color)}.fc-list-day-outer-sticky{background:var(--fc-page-bg-color);position:sticky;top:0}.fc-list-day{background:var(--fc-neutral-bg-color);display:flex;font-weight:700;justify-content:space-between}.fc-list-event{display:flex;flex-direction:row}a.fc-list-event{color:inherit;text-decoration:none}.fc-list-event:hover{background-color:var(--fc-list-event-hover-bg-color)}.fc-list-event-time-outer{display:flex;flex-direction:row}.fc-list-event-dot-outer,.fc-list-event-time{white-space:nowrap}.fc-list-event-dot{border:calc(var(--fc-list-event-dot-width)/2) solid var(--fc-event-border-color);border-radius:calc(var(--fc-list-event-dot-width)/2);box-sizing:content-box;display:inline-block;height:0;width:0}a.fc-list-event:hover .fc-list-event-title{text-decoration:underline}");var g=t.createPlugin({name:"@fullcalendar/list",optionRefiners:h,views:{list:{component:m,buttonTextKey:"list",listDayFormat:{month:"long",day:"numeric",year:"numeric"}},listDay:{type:"list",duration:{days:1},listDayFormat:{weekday:"long"}},listWeek:{type:"list",duration:{weeks:1},listDayFormat:{weekday:"long"},listDaySideFormat:{month:"long",day:"numeric",year:"numeric"}},listMonth:{type:"list",duration:{month:1},listDaySideFormat:{weekday:"long"}},listYear:{type:"list",duration:{year:1},listDaySideFormat:{weekday:"long"}}}}),y={__proto__:null,ListView:m};return t.globalPlugins.push(g),e.Internal=y,e.default=g,Object.defineProperty(e,"__esModule",{value:!0}),e}({},FullCalendar,FullCalendar.Internal,FullCalendar.Preact);
|
package/internal-common.d.ts
CHANGED
|
@@ -1,32 +1,35 @@
|
|
|
1
1
|
import { ViewApi, EventRenderRange } from '@fullcalendar/core';
|
|
2
|
-
import { MountArg, DateComponent, ViewProps,
|
|
2
|
+
import { DateMarker, MountArg, DateComponent, ViewProps, EventRangeProps, EventStore, EventUiHash, DateRange } from '@fullcalendar/core/internal';
|
|
3
3
|
import { createElement } from '@fullcalendar/core/preact';
|
|
4
4
|
|
|
5
|
+
interface ListSeg {
|
|
6
|
+
slicedStart: DateMarker;
|
|
7
|
+
slicedEnd: DateMarker;
|
|
8
|
+
isStart: boolean;
|
|
9
|
+
isEnd: boolean;
|
|
10
|
+
dayIndex: number;
|
|
11
|
+
}
|
|
12
|
+
|
|
5
13
|
interface NoEventsContentArg {
|
|
6
14
|
text: string;
|
|
7
15
|
view: ViewApi;
|
|
8
16
|
}
|
|
9
|
-
interface ListSeg extends Seg {
|
|
10
|
-
start: DateMarker;
|
|
11
|
-
end: DateMarker;
|
|
12
|
-
dayIndex: number;
|
|
13
|
-
}
|
|
14
17
|
type NoEventsMountArg = MountArg<NoEventsContentArg>;
|
|
15
|
-
|
|
18
|
+
interface ListViewState {
|
|
19
|
+
timeOuterWidth?: number;
|
|
20
|
+
}
|
|
21
|
+
declare class ListView extends DateComponent<ViewProps, ListViewState> {
|
|
16
22
|
private computeDateVars;
|
|
17
23
|
private eventStoreToSegs;
|
|
18
|
-
|
|
19
|
-
timeHeaderId: string;
|
|
20
|
-
eventHeaderId: string;
|
|
21
|
-
dateHeaderIdRoot: string;
|
|
22
|
-
};
|
|
24
|
+
private timeWidthRefMap;
|
|
23
25
|
render(): createElement.JSX.Element;
|
|
24
26
|
setRootEl: (rootEl: HTMLElement | null) => void;
|
|
25
27
|
renderEmptyMessage(): createElement.JSX.Element;
|
|
26
|
-
renderSegList(allSegs: ListSeg[], dayDates: DateMarker[]): createElement.JSX.Element;
|
|
27
|
-
_eventStoreToSegs(eventStore: EventStore, eventUiBases: EventUiHash, dayRanges: DateRange[]): ListSeg[];
|
|
28
|
-
eventRangesToSegs(
|
|
29
|
-
eventRangeToSegs(
|
|
28
|
+
renderSegList(allSegs: (ListSeg & EventRangeProps)[], dayDates: DateMarker[]): createElement.JSX.Element;
|
|
29
|
+
_eventStoreToSegs(eventStore: EventStore, eventUiBases: EventUiHash, dayRanges: DateRange[]): (ListSeg & EventRangeProps)[];
|
|
30
|
+
eventRangesToSegs(fullDayEventRanges: EventRenderRange[], dayRanges: DateRange[]): (ListSeg & EventRangeProps)[];
|
|
31
|
+
eventRangeToSegs(fullDayEventRange: EventRenderRange, dayRanges: DateRange[]): (ListSeg & EventRangeProps)[];
|
|
32
|
+
handleTimeWidths: () => void;
|
|
30
33
|
}
|
|
31
34
|
|
|
32
35
|
export { ListView as L, NoEventsContentArg as N, NoEventsMountArg as a };
|