@fullcalendar/list 6.1.15 → 7.0.0-beta.1
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 +42 -39
- package/index.global.min.js +2 -2
- package/internal-common.d.ts +10 -5
- package/internal.cjs +43 -40
- package/internal.js +44 -41
- package/package.json +2 -2
package/index.global.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
FullCalendar List View Plugin
|
|
2
|
+
FullCalendar List View Plugin v7.0.0-beta.1
|
|
3
3
|
Docs & License: https://fullcalendar.io/docs/list-view
|
|
4
4
|
(c) 2024 Adam Shaw
|
|
5
5
|
*/
|
|
@@ -17,6 +17,7 @@ FullCalendar.List = (function (exports, core, internal$1, preact) {
|
|
|
17
17
|
let { theme, dateEnv, options, viewApi } = this.context;
|
|
18
18
|
let { cellId, dayDate, todayRange } = this.props;
|
|
19
19
|
let { textId } = this.state;
|
|
20
|
+
let stickyHeaderDates = !this.props.forPrint && internal$1.getStickyHeaderDates(options);
|
|
20
21
|
let dayMeta = internal$1.getDateMeta(dayDate, todayRange);
|
|
21
22
|
// will ever be falsy?
|
|
22
23
|
let text = options.listDayFormat ? dateEnv.format(dayDate, options.listDayFormat) : '';
|
|
@@ -31,16 +32,18 @@ FullCalendar.List = (function (exports, core, internal$1, preact) {
|
|
|
31
32
|
...internal$1.getDayClassNames(dayMeta, theme),
|
|
32
33
|
], elAttrs: {
|
|
33
34
|
'data-date': internal$1.formatDayString(dayDate),
|
|
34
|
-
}, renderProps: renderProps, generatorName: "dayHeaderContent", customGenerator: options.dayHeaderContent, defaultGenerator: renderInnerContent, classNameGenerator: options.dayHeaderClassNames, didMount: options.dayHeaderDidMount, willUnmount: options.dayHeaderWillUnmount }, (InnerContent) => (
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
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
|
+
] }))));
|
|
40
43
|
}
|
|
41
44
|
}
|
|
42
45
|
function renderInnerContent(props) {
|
|
43
|
-
return (preact.createElement(
|
|
46
|
+
return (preact.createElement("div", { className: 'fc-list-day-inner' },
|
|
44
47
|
props.text && (preact.createElement("a", Object.assign({ id: props.textId, className: "fc-list-day-text" }, props.navLinkAttrs), props.text)),
|
|
45
48
|
props.sideText && ( /* not keyboard tabbable */preact.createElement("a", Object.assign({ "aria-hidden": true, className: "fc-list-day-side-text" }, props.sideNavLinkAttrs), props.sideText))));
|
|
46
49
|
}
|
|
@@ -54,47 +57,47 @@ FullCalendar.List = (function (exports, core, internal$1, preact) {
|
|
|
54
57
|
render() {
|
|
55
58
|
let { props, context } = this;
|
|
56
59
|
let { options } = context;
|
|
57
|
-
let {
|
|
60
|
+
let { eventRange, timeHeaderId, eventHeaderId, dateHeaderId } = props;
|
|
58
61
|
let timeFormat = options.eventTimeFormat || DEFAULT_TIME_FORMAT;
|
|
59
62
|
return (preact.createElement(internal$1.EventContainer, Object.assign({}, props, { elTag: "tr", elClasses: [
|
|
60
63
|
'fc-list-event',
|
|
61
|
-
|
|
62
|
-
], defaultGenerator: () => renderEventInnerContent(
|
|
63
|
-
buildTimeContent(
|
|
64
|
-
preact.createElement("td", { "aria-hidden": true, className: "fc-list-event-
|
|
64
|
+
eventRange.def.url && 'fc-event-forced-url',
|
|
65
|
+
], defaultGenerator: () => renderEventInnerContent(eventRange, context) /* weird */, eventRange: eventRange, timeText: "", disableDragging: true, disableResizing: true }), (InnerContent, eventContentArg) => (preact.createElement(preact.Fragment, null,
|
|
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" },
|
|
65
68
|
preact.createElement("span", { className: "fc-list-event-dot", style: {
|
|
66
69
|
borderColor: eventContentArg.borderColor || eventContentArg.backgroundColor,
|
|
67
70
|
} })),
|
|
68
71
|
preact.createElement(InnerContent, { elTag: "td", elClasses: ['fc-list-event-title'], elAttrs: { headers: `${eventHeaderId} ${dateHeaderId}` } })))));
|
|
69
72
|
}
|
|
70
73
|
}
|
|
71
|
-
function renderEventInnerContent(
|
|
72
|
-
let interactiveAttrs = internal$1.
|
|
73
|
-
return (preact.createElement("a", Object.assign({}, interactiveAttrs),
|
|
74
|
+
function renderEventInnerContent(eventRange, context) {
|
|
75
|
+
let interactiveAttrs = internal$1.getEventRangeAnchorAttrs(eventRange, context);
|
|
76
|
+
return (preact.createElement("a", Object.assign({}, interactiveAttrs), eventRange.def.title));
|
|
74
77
|
}
|
|
75
|
-
function buildTimeContent(
|
|
78
|
+
function buildTimeContent(eventRange, isStart, isEnd, segStart, segEnd, timeFormat, context, timeHeaderId, dateHeaderId) {
|
|
76
79
|
let { options } = context;
|
|
77
80
|
if (options.displayEventTime !== false) {
|
|
78
|
-
let eventDef =
|
|
79
|
-
let eventInstance =
|
|
81
|
+
let eventDef = eventRange.def;
|
|
82
|
+
let eventInstance = eventRange.instance;
|
|
80
83
|
let doAllDay = false;
|
|
81
84
|
let timeText;
|
|
82
85
|
if (eventDef.allDay) {
|
|
83
86
|
doAllDay = true;
|
|
84
87
|
}
|
|
85
|
-
else if (internal$1.isMultiDayRange(
|
|
86
|
-
if (
|
|
87
|
-
timeText = internal$1.
|
|
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);
|
|
88
91
|
}
|
|
89
|
-
else if (
|
|
90
|
-
timeText = internal$1.
|
|
92
|
+
else if (isEnd) {
|
|
93
|
+
timeText = internal$1.buildEventRangeTimeText(eventRange, timeFormat, context, null, null, segStart, eventInstance.range.end);
|
|
91
94
|
}
|
|
92
95
|
else {
|
|
93
96
|
doAllDay = true;
|
|
94
97
|
}
|
|
95
98
|
}
|
|
96
99
|
else {
|
|
97
|
-
timeText = internal$1.
|
|
100
|
+
timeText = internal$1.buildEventRangeTimeText(eventRange, timeFormat, context, null, null, segStart, segEnd);
|
|
98
101
|
}
|
|
99
102
|
if (doAllDay) {
|
|
100
103
|
let renderProps = {
|
|
@@ -139,16 +142,17 @@ FullCalendar.List = (function (exports, core, internal$1, preact) {
|
|
|
139
142
|
}
|
|
140
143
|
render() {
|
|
141
144
|
let { props, context } = this;
|
|
145
|
+
let { options } = context;
|
|
142
146
|
let { dayDates, dayRanges } = this.computeDateVars(props.dateProfile);
|
|
143
147
|
let eventSegs = this.eventStoreToSegs(props.eventStore, props.eventUiBases, dayRanges);
|
|
148
|
+
let verticalScrolling = !props.forPrint && !internal$1.getIsHeightAuto(options);
|
|
144
149
|
return (preact.createElement(internal$1.ViewContainer, { elRef: this.setRootEl, elClasses: [
|
|
145
|
-
'fc-list',
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
'fc-list-sticky' :
|
|
149
|
-
'',
|
|
150
|
+
'fc-list-view',
|
|
151
|
+
'fc-flex-column',
|
|
152
|
+
'fc-border',
|
|
150
153
|
], viewSpec: context.viewSpec },
|
|
151
|
-
preact.createElement(internal$1.Scroller
|
|
154
|
+
preact.createElement(internal$1.Scroller // TODO: don't need heavyweight component
|
|
155
|
+
, { vertical: verticalScrolling, elClassNames: [verticalScrolling ? 'fc-liquid' : ''] }, eventSegs.length > 0 ?
|
|
152
156
|
this.renderSegList(eventSegs, dayDates) :
|
|
153
157
|
this.renderEmptyMessage())));
|
|
154
158
|
}
|
|
@@ -158,10 +162,10 @@ FullCalendar.List = (function (exports, core, internal$1, preact) {
|
|
|
158
162
|
text: options.noEventsText,
|
|
159
163
|
view: viewApi,
|
|
160
164
|
};
|
|
161
|
-
return (preact.createElement(internal$1.ContentContainer, { elTag: "div", elClasses: ['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, { elTag: "div", elClasses: ['fc-list-empty-
|
|
165
|
+
return (preact.createElement(internal$1.ContentContainer, { elTag: "div", elClasses: ['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, { elTag: "div", elClasses: ['fc-list-empty-inner'] }))));
|
|
162
166
|
}
|
|
163
167
|
renderSegList(allSegs, dayDates) {
|
|
164
|
-
let {
|
|
168
|
+
let { options } = this.context;
|
|
165
169
|
let { timeHeaderId, eventHeaderId, dateHeaderIdRoot } = this.state;
|
|
166
170
|
let segsByDay = groupSegsByDay(allSegs); // sparse array
|
|
167
171
|
return (preact.createElement(internal$1.NowTimer, { unit: "day" }, (nowDate, todayRange) => {
|
|
@@ -172,15 +176,15 @@ FullCalendar.List = (function (exports, core, internal$1, preact) {
|
|
|
172
176
|
let dayStr = internal$1.formatDayString(dayDates[dayIndex]);
|
|
173
177
|
let dateHeaderId = dateHeaderIdRoot + '-' + dayStr;
|
|
174
178
|
// append a day header
|
|
175
|
-
innerNodes.push(preact.createElement(ListViewHeaderRow, { key: dayStr, cellId: dateHeaderId, dayDate: dayDates[dayIndex], todayRange: todayRange }));
|
|
179
|
+
innerNodes.push(preact.createElement(ListViewHeaderRow, { key: dayStr, forPrint: this.props.forPrint, cellId: dateHeaderId, dayDate: dayDates[dayIndex], todayRange: todayRange }));
|
|
176
180
|
daySegs = internal$1.sortEventSegs(daySegs, options.eventOrder);
|
|
177
181
|
for (let seg of daySegs) {
|
|
178
|
-
innerNodes.push(preact.createElement(ListViewEventRow, Object.assign({ key: dayStr + ':' + seg.eventRange.instance.instanceId /* are multiple segs for an instanceId */, seg: seg, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: false, timeHeaderId: timeHeaderId, eventHeaderId: eventHeaderId, dateHeaderId: dateHeaderId }, internal$1.
|
|
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))));
|
|
179
183
|
}
|
|
180
184
|
}
|
|
181
185
|
}
|
|
182
|
-
return (preact.createElement("table", { className: 'fc-
|
|
183
|
-
preact.createElement("thead",
|
|
186
|
+
return (preact.createElement("table", { className: 'fc-table' },
|
|
187
|
+
preact.createElement("thead", { className: 'fc-offscreen' },
|
|
184
188
|
preact.createElement("tr", null,
|
|
185
189
|
preact.createElement("th", { scope: "col", id: timeHeaderId }, options.timeHint),
|
|
186
190
|
preact.createElement("th", { scope: "col", "aria-hidden": true }),
|
|
@@ -211,7 +215,6 @@ FullCalendar.List = (function (exports, core, internal$1, preact) {
|
|
|
211
215
|
segRange = internal$1.intersectRanges(range, dayRanges[dayIndex]);
|
|
212
216
|
if (segRange) {
|
|
213
217
|
seg = {
|
|
214
|
-
component: this,
|
|
215
218
|
eventRange,
|
|
216
219
|
start: segRange.start,
|
|
217
220
|
end: segRange.end,
|
|
@@ -279,7 +282,7 @@ FullCalendar.List = (function (exports, core, internal$1, preact) {
|
|
|
279
282
|
return input === false ? null : internal$1.createFormatter(input);
|
|
280
283
|
}
|
|
281
284
|
|
|
282
|
-
var css_248z = ":root{--fc-list-event-dot-width:10px;--fc-list-event-hover-bg-color:#f5f5f5}.fc-
|
|
285
|
+
var css_248z = ":root{--fc-list-event-dot-width:10px;--fc-list-event-hover-bg-color:#f5f5f5}.fc-table{border-spacing:0;width:100%}.fc-table>*>*>*{border-color:var(--fc-border-color);border-style:solid;border-width:0 0 1px;padding:0}.fc-table>:last-child>:last-child>*{border-bottom-width:0}.fc-list-day-inner,.fc-list-event-dot-cell,.fc-list-event-time,.fc-list-event-title{padding:8px 14px}.fc-direction-ltr .fc-list-event-dot-cell{padding-right:0}.fc-direction-rtl .fc-list-event-dot-cell{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-cell-sticky{background:var(--fc-page-bg-color);position:sticky;top:0}.fc-list-day-inner{background:var(--fc-neutral-bg-color);display:flex;justify-content:space-between}.fc-list-event.fc-event-forced-url{cursor:pointer}.fc-list-event:hover td{background-color:var(--fc-list-event-hover-bg-color)}.fc-list-event-dot-cell,.fc-list-event-time{white-space:nowrap;width:1px}.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}.fc-list-event-title a{color:inherit;text-decoration:none}.fc-list-event.fc-event-forced-url:hover a{text-decoration:underline}";
|
|
283
286
|
internal$1.injectStyles(css_248z);
|
|
284
287
|
|
|
285
288
|
var plugin = core.createPlugin({
|
package/index.global.min.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
FullCalendar List View Plugin
|
|
2
|
+
FullCalendar List View Plugin v7.0.0-beta.1
|
|
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,a){"use strict";class r extends n.BaseComponent{constructor(){super(...arguments),this.state={textId:n.getUniqueDomId()}}render(){let{theme:e,dateEnv:t,options:r,viewApi:
|
|
6
|
+
FullCalendar.List=function(e,t,n,a){"use strict";class r extends n.BaseComponent{constructor(){super(...arguments),this.state={textId:n.getUniqueDomId()}}render(){let{theme:e,dateEnv:t,options:r,viewApi:i}=this.context,{cellId:l,dayDate:o,todayRange:d}=this.props,{textId:c}=this.state,u=!this.props.forPrint&&n.getStickyHeaderDates(r),m=n.getDateMeta(o,d),g=r.listDayFormat?t.format(o,r.listDayFormat):"",f=r.listDaySideFormat?t.format(o,r.listDaySideFormat):"",v=Object.assign({date:t.toDate(o),view:i,textId:c,text:g,sideText:f,navLinkAttrs:n.buildNavLinkAttrs(this.context,o),sideNavLinkAttrs:n.buildNavLinkAttrs(this.context,o,"day",!1)},m);return a.createElement(n.ContentContainer,{elTag:"tr",elClasses:["fc-list-day",...n.getDayClassNames(m,e)],elAttrs:{"data-date":n.formatDayString(o)},renderProps:v,generatorName:"dayHeaderContent",customGenerator:r.dayHeaderContent,defaultGenerator:s,classNameGenerator:r.dayHeaderClassNames,didMount:r.dayHeaderDidMount,willUnmount:r.dayHeaderWillUnmount},e=>a.createElement(e,{elTag:"th",elAttrs:{id:l,colSpan:3,"aria-labelledby":c},elClasses:["fc-list-day-cell",u?"fc-list-day-cell-sticky":""]}))}}function s(e){return a.createElement("div",{className:"fc-list-day-inner"},e.text&&a.createElement("a",Object.assign({id:e.textId,className:"fc-list-day-text"},e.navLinkAttrs),e.text),e.sideText&&a.createElement("a",Object.assign({"aria-hidden":!0,className:"fc-list-day-side-text"},e.sideNavLinkAttrs),e.sideText))}const i=n.createFormatter({hour:"numeric",minute:"2-digit",meridiem:"short"});class l extends n.BaseComponent{render(){let{props:e,context:t}=this,{options:r}=t,{eventRange:s,timeHeaderId:l,eventHeaderId:d,dateHeaderId:c}=e,u=r.eventTimeFormat||i;return a.createElement(n.EventContainer,Object.assign({},e,{elTag:"tr",elClasses:["fc-list-event",s.def.url&&"fc-event-forced-url"],defaultGenerator:()=>function(e,t){let r=n.getEventRangeAnchorAttrs(e,t);return a.createElement("a",Object.assign({},r),e.def.title)}(s,t),eventRange:s,timeText:"",disableDragging:!0,disableResizing:!0}),(r,i)=>a.createElement(a.Fragment,null,function(e,t,r,s,i,l,d,c,u){let{options:m}=d;if(!1!==m.displayEventTime){let g,f=e.def,v=e.instance,y=!1;if(f.allDay?y=!0:n.isMultiDayRange(e.range)?t?g=n.buildEventRangeTimeText(e,l,d,null,null,v.range.start,i):r?g=n.buildEventRangeTimeText(e,l,d,null,null,s,v.range.end):y=!0:g=n.buildEventRangeTimeText(e,l,d,null,null,s,i),y){let e={text:d.options.allDayText,view:d.viewApi};return a.createElement(n.ContentContainer,{elTag:"td",elClasses:["fc-list-event-time"],elAttrs:{headers:`${c} ${u}`},renderProps:e,generatorName:"allDayContent",customGenerator:m.allDayContent,defaultGenerator:o,classNameGenerator:m.allDayClassNames,didMount:m.allDayDidMount,willUnmount:m.allDayWillUnmount})}return a.createElement("td",{className:"fc-list-event-time"},g)}return null}(s,e.isStart,e.isEnd,e.segStart,e.segEnd,u,t,l,c),a.createElement("td",{"aria-hidden":!0,className:"fc-list-event-dot-cell"},a.createElement("span",{className:"fc-list-event-dot",style:{borderColor:i.borderColor||i.backgroundColor}})),a.createElement(r,{elTag:"td",elClasses:["fc-list-event-title"],elAttrs:{headers:`${d} ${c}`}})))}}function o(e){return e.text}class d extends n.DateComponent{constructor(){super(...arguments),this.computeDateVars=n.memoize(u),this.eventStoreToSegs=n.memoize(this._eventStoreToSegs),this.state={timeHeaderId:n.getUniqueDomId(),eventHeaderId:n.getUniqueDomId(),dateHeaderIdRoot:n.getUniqueDomId()},this.setRootEl=e=>{e?this.context.registerInteractiveComponent(this,{el:e}):this.context.unregisterInteractiveComponent(this)}}render(){let{props:e,context:t}=this,{options:r}=t,{dayDates:s,dayRanges:i}=this.computeDateVars(e.dateProfile),l=this.eventStoreToSegs(e.eventStore,e.eventUiBases,i),o=!e.forPrint&&!n.getIsHeightAuto(r);return a.createElement(n.ViewContainer,{elRef:this.setRootEl,elClasses:["fc-list-view","fc-flex-column","fc-border"],viewSpec:t.viewSpec},a.createElement(n.Scroller,{vertical:o,elClassNames:[o?"fc-liquid":""]},l.length>0?this.renderSegList(l,s):this.renderEmptyMessage()))}renderEmptyMessage(){let{options:e,viewApi:t}=this.context,r={text:e.noEventsText,view:t};return a.createElement(n.ContentContainer,{elTag:"div",elClasses:["fc-list-empty"],renderProps:r,generatorName:"noEventsContent",customGenerator:e.noEventsContent,defaultGenerator:c,classNameGenerator:e.noEventsClassNames,didMount:e.noEventsDidMount,willUnmount:e.noEventsWillUnmount},e=>a.createElement(e,{elTag:"div",elClasses:["fc-list-empty-inner"]}))}renderSegList(e,t){let{options:s}=this.context,{timeHeaderId:i,eventHeaderId:o,dateHeaderIdRoot:d}=this.state,c=function(e){let t,n,a=[];for(t=0;t<e.length;t+=1)n=e[t],(a[n.dayIndex]||(a[n.dayIndex]=[])).push(n);return a}(e);return a.createElement(n.NowTimer,{unit:"day"},(e,u)=>{let m=[];for(let g=0;g<c.length;g+=1){let f=c[g];if(f){let c=n.formatDayString(t[g]),v=d+"-"+c;m.push(a.createElement(r,{key:c,forPrint:this.props.forPrint,cellId:v,dayDate:t[g],todayRange:u})),f=n.sortEventSegs(f,s.eventOrder);for(let t of f)m.push(a.createElement(l,Object.assign({key:c+":"+t.eventRange.instance.instanceId,eventRange:t.eventRange,isStart:t.isStart,isEnd:t.isEnd,segStart:t.start,segEnd:t.end,isDragging:!1,isResizing:!1,isDateSelecting:!1,isSelected:!1,timeHeaderId:i,eventHeaderId:o,dateHeaderId:v},n.getEventRangeMeta(t.eventRange,u,e))))}}return a.createElement("table",{className:"fc-table"},a.createElement("thead",{className:"fc-offscreen"},a.createElement("tr",null,a.createElement("th",{scope:"col",id:i},s.timeHint),a.createElement("th",{scope:"col","aria-hidden":!0}),a.createElement("th",{scope:"col",id:o},s.eventHint))),a.createElement("tbody",null,m))})}_eventStoreToSegs(e,t,a){return this.eventRangesToSegs(n.sliceEventStore(e,t,this.props.dateProfile.activeRange,this.context.options.nextDayThreshold).fg,a)}eventRangesToSegs(e,t){let n=[];for(let a of e)n.push(...this.eventRangeToSegs(a,t));return n}eventRangeToSegs(e,t){let a,r,s,{dateEnv:i}=this.context,{nextDayThreshold:l}=this.context.options,o=e.range,d=e.def.allDay,c=[];for(a=0;a<t.length;a+=1)if(r=n.intersectRanges(o,t[a]),r&&(s={eventRange:e,start:r.start,end:r.end,isStart:e.isStart&&r.start.valueOf()===o.start.valueOf(),isEnd:e.isEnd&&r.end.valueOf()===o.end.valueOf(),dayIndex:a},c.push(s),!s.isEnd&&!d&&a+1<t.length&&o.end<i.add(t[a+1].start,l))){s.end=o.end,s.isEnd=!0;break}return c}}function c(e){return e.text}function u(e){let t=n.startOfDay(e.renderRange.start),a=e.renderRange.end,r=[],s=[];for(;t<a;)r.push(t),s.push({start:t,end:n.addDays(t,1)}),t=n.addDays(t,1);return{dayDates:r,dayRanges:s}}const m={listDayFormat:g,listDaySideFormat:g,noEventsClassNames:n.identity,noEventsContent:n.identity,noEventsDidMount:n.identity,noEventsWillUnmount:n.identity};function g(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-table{border-spacing:0;width:100%}.fc-table>*>*>*{border-color:var(--fc-border-color);border-style:solid;border-width:0 0 1px;padding:0}.fc-table>:last-child>:last-child>*{border-bottom-width:0}.fc-list-day-inner,.fc-list-event-dot-cell,.fc-list-event-time,.fc-list-event-title{padding:8px 14px}.fc-direction-ltr .fc-list-event-dot-cell{padding-right:0}.fc-direction-rtl .fc-list-event-dot-cell{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-cell-sticky{background:var(--fc-page-bg-color);position:sticky;top:0}.fc-list-day-inner{background:var(--fc-neutral-bg-color);display:flex;justify-content:space-between}.fc-list-event.fc-event-forced-url{cursor:pointer}.fc-list-event:hover td{background-color:var(--fc-list-event-hover-bg-color)}.fc-list-event-dot-cell,.fc-list-event-time{white-space:nowrap;width:1px}.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}.fc-list-event-title a{color:inherit;text-decoration:none}.fc-list-event.fc-event-forced-url:hover a{text-decoration:underline}");var f=t.createPlugin({name:"@fullcalendar/list",optionRefiners:m,views:{list:{component:d,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"}}}}),v={__proto__:null,ListView:d};return t.globalPlugins.push(f),e.Internal=v,e.default=f,Object.defineProperty(e,"__esModule",{value:!0}),e}({},FullCalendar,FullCalendar.Internal,FullCalendar.Preact);
|
package/internal-common.d.ts
CHANGED
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
import { ViewApi, EventRenderRange } from '@fullcalendar/core';
|
|
2
|
-
import { MountArg, DateComponent, ViewProps,
|
|
2
|
+
import { MountArg, DateComponent, ViewProps, DateMarker, EventStore, EventUiHash, DateRange, Seg } from '@fullcalendar/core/internal';
|
|
3
3
|
import { createElement } from '@fullcalendar/core/preact';
|
|
4
4
|
|
|
5
5
|
interface NoEventsContentArg {
|
|
6
6
|
text: string;
|
|
7
7
|
view: ViewApi;
|
|
8
8
|
}
|
|
9
|
+
interface ListSeg extends Seg {
|
|
10
|
+
start: DateMarker;
|
|
11
|
+
end: DateMarker;
|
|
12
|
+
dayIndex: number;
|
|
13
|
+
}
|
|
9
14
|
type NoEventsMountArg = MountArg<NoEventsContentArg>;
|
|
10
15
|
declare class ListView extends DateComponent<ViewProps> {
|
|
11
16
|
private computeDateVars;
|
|
@@ -18,10 +23,10 @@ declare class ListView extends DateComponent<ViewProps> {
|
|
|
18
23
|
render(): createElement.JSX.Element;
|
|
19
24
|
setRootEl: (rootEl: HTMLElement | null) => void;
|
|
20
25
|
renderEmptyMessage(): createElement.JSX.Element;
|
|
21
|
-
renderSegList(allSegs:
|
|
22
|
-
_eventStoreToSegs(eventStore: EventStore, eventUiBases: EventUiHash, dayRanges: DateRange[]):
|
|
23
|
-
eventRangesToSegs(eventRanges: EventRenderRange[], dayRanges: DateRange[]):
|
|
24
|
-
eventRangeToSegs(eventRange: EventRenderRange, dayRanges: DateRange[]):
|
|
26
|
+
renderSegList(allSegs: ListSeg[], dayDates: DateMarker[]): createElement.JSX.Element;
|
|
27
|
+
_eventStoreToSegs(eventStore: EventStore, eventUiBases: EventUiHash, dayRanges: DateRange[]): ListSeg[];
|
|
28
|
+
eventRangesToSegs(eventRanges: EventRenderRange[], dayRanges: DateRange[]): ListSeg[];
|
|
29
|
+
eventRangeToSegs(eventRange: EventRenderRange, dayRanges: DateRange[]): ListSeg[];
|
|
25
30
|
}
|
|
26
31
|
|
|
27
32
|
export { ListView as L, NoEventsContentArg as N, NoEventsMountArg as a };
|
package/internal.cjs
CHANGED
|
@@ -5,6 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var internal_cjs = require('@fullcalendar/core/internal.cjs');
|
|
6
6
|
var preact_cjs = require('@fullcalendar/core/preact.cjs');
|
|
7
7
|
|
|
8
|
+
var css_248z = ":root{--fc-list-event-dot-width:10px;--fc-list-event-hover-bg-color:#f5f5f5}.fc-table{border-spacing:0;width:100%}.fc-table>*>*>*{border-color:var(--fc-border-color);border-style:solid;border-width:0 0 1px;padding:0}.fc-table>:last-child>:last-child>*{border-bottom-width:0}.fc-list-day-inner,.fc-list-event-dot-cell,.fc-list-event-time,.fc-list-event-title{padding:8px 14px}.fc-direction-ltr .fc-list-event-dot-cell{padding-right:0}.fc-direction-rtl .fc-list-event-dot-cell{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-cell-sticky{background:var(--fc-page-bg-color);position:sticky;top:0}.fc-list-day-inner{background:var(--fc-neutral-bg-color);display:flex;justify-content:space-between}.fc-list-event.fc-event-forced-url{cursor:pointer}.fc-list-event:hover td{background-color:var(--fc-list-event-hover-bg-color)}.fc-list-event-dot-cell,.fc-list-event-time{white-space:nowrap;width:1px}.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}.fc-list-event-title a{color:inherit;text-decoration:none}.fc-list-event.fc-event-forced-url:hover a{text-decoration:underline}";
|
|
9
|
+
internal_cjs.injectStyles(css_248z);
|
|
10
|
+
|
|
8
11
|
class ListViewHeaderRow extends internal_cjs.BaseComponent {
|
|
9
12
|
constructor() {
|
|
10
13
|
super(...arguments);
|
|
@@ -16,6 +19,7 @@ class ListViewHeaderRow extends internal_cjs.BaseComponent {
|
|
|
16
19
|
let { theme, dateEnv, options, viewApi } = this.context;
|
|
17
20
|
let { cellId, dayDate, todayRange } = this.props;
|
|
18
21
|
let { textId } = this.state;
|
|
22
|
+
let stickyHeaderDates = !this.props.forPrint && internal_cjs.getStickyHeaderDates(options);
|
|
19
23
|
let dayMeta = internal_cjs.getDateMeta(dayDate, todayRange);
|
|
20
24
|
// will ever be falsy?
|
|
21
25
|
let text = options.listDayFormat ? dateEnv.format(dayDate, options.listDayFormat) : '';
|
|
@@ -30,16 +34,18 @@ class ListViewHeaderRow extends internal_cjs.BaseComponent {
|
|
|
30
34
|
...internal_cjs.getDayClassNames(dayMeta, theme),
|
|
31
35
|
], elAttrs: {
|
|
32
36
|
'data-date': internal_cjs.formatDayString(dayDate),
|
|
33
|
-
}, renderProps: renderProps, generatorName: "dayHeaderContent", customGenerator: options.dayHeaderContent, defaultGenerator: renderInnerContent, classNameGenerator: options.dayHeaderClassNames, didMount: options.dayHeaderDidMount, willUnmount: options.dayHeaderWillUnmount }, (InnerContent) => (
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
}, renderProps: renderProps, generatorName: "dayHeaderContent", customGenerator: options.dayHeaderContent, defaultGenerator: renderInnerContent, classNameGenerator: options.dayHeaderClassNames, didMount: options.dayHeaderDidMount, willUnmount: options.dayHeaderWillUnmount }, (InnerContent) => (preact_cjs.createElement(InnerContent, { elTag: "th", elAttrs: {
|
|
38
|
+
id: cellId,
|
|
39
|
+
colSpan: 3,
|
|
40
|
+
'aria-labelledby': textId,
|
|
41
|
+
}, elClasses: [
|
|
42
|
+
'fc-list-day-cell',
|
|
43
|
+
stickyHeaderDates ? 'fc-list-day-cell-sticky' : '',
|
|
44
|
+
] }))));
|
|
39
45
|
}
|
|
40
46
|
}
|
|
41
47
|
function renderInnerContent(props) {
|
|
42
|
-
return (preact_cjs.createElement(
|
|
48
|
+
return (preact_cjs.createElement("div", { className: 'fc-list-day-inner' },
|
|
43
49
|
props.text && (preact_cjs.createElement("a", Object.assign({ id: props.textId, className: "fc-list-day-text" }, props.navLinkAttrs), props.text)),
|
|
44
50
|
props.sideText && ( /* not keyboard tabbable */preact_cjs.createElement("a", Object.assign({ "aria-hidden": true, className: "fc-list-day-side-text" }, props.sideNavLinkAttrs), props.sideText))));
|
|
45
51
|
}
|
|
@@ -53,47 +59,47 @@ class ListViewEventRow extends internal_cjs.BaseComponent {
|
|
|
53
59
|
render() {
|
|
54
60
|
let { props, context } = this;
|
|
55
61
|
let { options } = context;
|
|
56
|
-
let {
|
|
62
|
+
let { eventRange, timeHeaderId, eventHeaderId, dateHeaderId } = props;
|
|
57
63
|
let timeFormat = options.eventTimeFormat || DEFAULT_TIME_FORMAT;
|
|
58
64
|
return (preact_cjs.createElement(internal_cjs.EventContainer, Object.assign({}, props, { elTag: "tr", elClasses: [
|
|
59
65
|
'fc-list-event',
|
|
60
|
-
|
|
61
|
-
], defaultGenerator: () => renderEventInnerContent(
|
|
62
|
-
buildTimeContent(
|
|
63
|
-
preact_cjs.createElement("td", { "aria-hidden": true, className: "fc-list-event-
|
|
66
|
+
eventRange.def.url && 'fc-event-forced-url',
|
|
67
|
+
], defaultGenerator: () => renderEventInnerContent(eventRange, context) /* weird */, eventRange: eventRange, timeText: "", disableDragging: true, disableResizing: true }), (InnerContent, eventContentArg) => (preact_cjs.createElement(preact_cjs.Fragment, null,
|
|
68
|
+
buildTimeContent(eventRange, props.isStart, props.isEnd, props.segStart, props.segEnd, timeFormat, context, timeHeaderId, dateHeaderId),
|
|
69
|
+
preact_cjs.createElement("td", { "aria-hidden": true, className: "fc-list-event-dot-cell" },
|
|
64
70
|
preact_cjs.createElement("span", { className: "fc-list-event-dot", style: {
|
|
65
71
|
borderColor: eventContentArg.borderColor || eventContentArg.backgroundColor,
|
|
66
72
|
} })),
|
|
67
73
|
preact_cjs.createElement(InnerContent, { elTag: "td", elClasses: ['fc-list-event-title'], elAttrs: { headers: `${eventHeaderId} ${dateHeaderId}` } })))));
|
|
68
74
|
}
|
|
69
75
|
}
|
|
70
|
-
function renderEventInnerContent(
|
|
71
|
-
let interactiveAttrs = internal_cjs.
|
|
72
|
-
return (preact_cjs.createElement("a", Object.assign({}, interactiveAttrs),
|
|
76
|
+
function renderEventInnerContent(eventRange, context) {
|
|
77
|
+
let interactiveAttrs = internal_cjs.getEventRangeAnchorAttrs(eventRange, context);
|
|
78
|
+
return (preact_cjs.createElement("a", Object.assign({}, interactiveAttrs), eventRange.def.title));
|
|
73
79
|
}
|
|
74
|
-
function buildTimeContent(
|
|
80
|
+
function buildTimeContent(eventRange, isStart, isEnd, segStart, segEnd, timeFormat, context, timeHeaderId, dateHeaderId) {
|
|
75
81
|
let { options } = context;
|
|
76
82
|
if (options.displayEventTime !== false) {
|
|
77
|
-
let eventDef =
|
|
78
|
-
let eventInstance =
|
|
83
|
+
let eventDef = eventRange.def;
|
|
84
|
+
let eventInstance = eventRange.instance;
|
|
79
85
|
let doAllDay = false;
|
|
80
86
|
let timeText;
|
|
81
87
|
if (eventDef.allDay) {
|
|
82
88
|
doAllDay = true;
|
|
83
89
|
}
|
|
84
|
-
else if (internal_cjs.isMultiDayRange(
|
|
85
|
-
if (
|
|
86
|
-
timeText = internal_cjs.
|
|
90
|
+
else if (internal_cjs.isMultiDayRange(eventRange.range)) { // TODO: use (!isStart || !isEnd) instead?
|
|
91
|
+
if (isStart) {
|
|
92
|
+
timeText = internal_cjs.buildEventRangeTimeText(eventRange, timeFormat, context, null, null, eventInstance.range.start, segEnd);
|
|
87
93
|
}
|
|
88
|
-
else if (
|
|
89
|
-
timeText = internal_cjs.
|
|
94
|
+
else if (isEnd) {
|
|
95
|
+
timeText = internal_cjs.buildEventRangeTimeText(eventRange, timeFormat, context, null, null, segStart, eventInstance.range.end);
|
|
90
96
|
}
|
|
91
97
|
else {
|
|
92
98
|
doAllDay = true;
|
|
93
99
|
}
|
|
94
100
|
}
|
|
95
101
|
else {
|
|
96
|
-
timeText = internal_cjs.
|
|
102
|
+
timeText = internal_cjs.buildEventRangeTimeText(eventRange, timeFormat, context, null, null, segStart, segEnd);
|
|
97
103
|
}
|
|
98
104
|
if (doAllDay) {
|
|
99
105
|
let renderProps = {
|
|
@@ -138,16 +144,17 @@ class ListView extends internal_cjs.DateComponent {
|
|
|
138
144
|
}
|
|
139
145
|
render() {
|
|
140
146
|
let { props, context } = this;
|
|
147
|
+
let { options } = context;
|
|
141
148
|
let { dayDates, dayRanges } = this.computeDateVars(props.dateProfile);
|
|
142
149
|
let eventSegs = this.eventStoreToSegs(props.eventStore, props.eventUiBases, dayRanges);
|
|
150
|
+
let verticalScrolling = !props.forPrint && !internal_cjs.getIsHeightAuto(options);
|
|
143
151
|
return (preact_cjs.createElement(internal_cjs.ViewContainer, { elRef: this.setRootEl, elClasses: [
|
|
144
|
-
'fc-list',
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
'fc-list-sticky' :
|
|
148
|
-
'',
|
|
152
|
+
'fc-list-view',
|
|
153
|
+
'fc-flex-column',
|
|
154
|
+
'fc-border',
|
|
149
155
|
], viewSpec: context.viewSpec },
|
|
150
|
-
preact_cjs.createElement(internal_cjs.Scroller
|
|
156
|
+
preact_cjs.createElement(internal_cjs.Scroller // TODO: don't need heavyweight component
|
|
157
|
+
, { vertical: verticalScrolling, elClassNames: [verticalScrolling ? 'fc-liquid' : ''] }, eventSegs.length > 0 ?
|
|
151
158
|
this.renderSegList(eventSegs, dayDates) :
|
|
152
159
|
this.renderEmptyMessage())));
|
|
153
160
|
}
|
|
@@ -157,10 +164,10 @@ class ListView extends internal_cjs.DateComponent {
|
|
|
157
164
|
text: options.noEventsText,
|
|
158
165
|
view: viewApi,
|
|
159
166
|
};
|
|
160
|
-
return (preact_cjs.createElement(internal_cjs.ContentContainer, { elTag: "div", elClasses: ['fc-list-empty'], renderProps: renderProps, generatorName: "noEventsContent", customGenerator: options.noEventsContent, defaultGenerator: renderNoEventsInner, classNameGenerator: options.noEventsClassNames, didMount: options.noEventsDidMount, willUnmount: options.noEventsWillUnmount }, (InnerContent) => (preact_cjs.createElement(InnerContent, { elTag: "div", elClasses: ['fc-list-empty-
|
|
167
|
+
return (preact_cjs.createElement(internal_cjs.ContentContainer, { elTag: "div", elClasses: ['fc-list-empty'], renderProps: renderProps, generatorName: "noEventsContent", customGenerator: options.noEventsContent, defaultGenerator: renderNoEventsInner, classNameGenerator: options.noEventsClassNames, didMount: options.noEventsDidMount, willUnmount: options.noEventsWillUnmount }, (InnerContent) => (preact_cjs.createElement(InnerContent, { elTag: "div", elClasses: ['fc-list-empty-inner'] }))));
|
|
161
168
|
}
|
|
162
169
|
renderSegList(allSegs, dayDates) {
|
|
163
|
-
let {
|
|
170
|
+
let { options } = this.context;
|
|
164
171
|
let { timeHeaderId, eventHeaderId, dateHeaderIdRoot } = this.state;
|
|
165
172
|
let segsByDay = groupSegsByDay(allSegs); // sparse array
|
|
166
173
|
return (preact_cjs.createElement(internal_cjs.NowTimer, { unit: "day" }, (nowDate, todayRange) => {
|
|
@@ -171,15 +178,15 @@ class ListView extends internal_cjs.DateComponent {
|
|
|
171
178
|
let dayStr = internal_cjs.formatDayString(dayDates[dayIndex]);
|
|
172
179
|
let dateHeaderId = dateHeaderIdRoot + '-' + dayStr;
|
|
173
180
|
// append a day header
|
|
174
|
-
innerNodes.push(preact_cjs.createElement(ListViewHeaderRow, { key: dayStr, cellId: dateHeaderId, dayDate: dayDates[dayIndex], todayRange: todayRange }));
|
|
181
|
+
innerNodes.push(preact_cjs.createElement(ListViewHeaderRow, { key: dayStr, forPrint: this.props.forPrint, cellId: dateHeaderId, dayDate: dayDates[dayIndex], todayRange: todayRange }));
|
|
175
182
|
daySegs = internal_cjs.sortEventSegs(daySegs, options.eventOrder);
|
|
176
183
|
for (let seg of daySegs) {
|
|
177
|
-
innerNodes.push(preact_cjs.createElement(ListViewEventRow, Object.assign({ key: dayStr + ':' + seg.eventRange.instance.instanceId /* are multiple segs for an instanceId */, seg: seg, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: false, timeHeaderId: timeHeaderId, eventHeaderId: eventHeaderId, dateHeaderId: dateHeaderId }, internal_cjs.
|
|
184
|
+
innerNodes.push(preact_cjs.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_cjs.getEventRangeMeta(seg.eventRange, todayRange, nowDate))));
|
|
178
185
|
}
|
|
179
186
|
}
|
|
180
187
|
}
|
|
181
|
-
return (preact_cjs.createElement("table", { className: 'fc-
|
|
182
|
-
preact_cjs.createElement("thead",
|
|
188
|
+
return (preact_cjs.createElement("table", { className: 'fc-table' },
|
|
189
|
+
preact_cjs.createElement("thead", { className: 'fc-offscreen' },
|
|
183
190
|
preact_cjs.createElement("tr", null,
|
|
184
191
|
preact_cjs.createElement("th", { scope: "col", id: timeHeaderId }, options.timeHint),
|
|
185
192
|
preact_cjs.createElement("th", { scope: "col", "aria-hidden": true }),
|
|
@@ -210,7 +217,6 @@ class ListView extends internal_cjs.DateComponent {
|
|
|
210
217
|
segRange = internal_cjs.intersectRanges(range, dayRanges[dayIndex]);
|
|
211
218
|
if (segRange) {
|
|
212
219
|
seg = {
|
|
213
|
-
component: this,
|
|
214
220
|
eventRange,
|
|
215
221
|
start: segRange.start,
|
|
216
222
|
end: segRange.end,
|
|
@@ -265,7 +271,4 @@ function groupSegsByDay(segs) {
|
|
|
265
271
|
return segsByDay;
|
|
266
272
|
}
|
|
267
273
|
|
|
268
|
-
var css_248z = ":root{--fc-list-event-dot-width:10px;--fc-list-event-hover-bg-color:#f5f5f5}.fc-theme-standard .fc-list{border:1px solid var(--fc-border-color)}.fc .fc-list-empty{align-items:center;background-color:var(--fc-neutral-bg-color);display:flex;height:100%;justify-content:center}.fc .fc-list-empty-cushion{margin:5em 0}.fc .fc-list-table{border-style:hidden;width:100%}.fc .fc-list-table tr>*{border-left:0;border-right:0}.fc .fc-list-sticky .fc-list-day>*{background:var(--fc-page-bg-color);position:sticky;top:0}.fc .fc-list-table thead{left:-10000px;position:absolute}.fc .fc-list-table tbody>tr:first-child th{border-top:0}.fc .fc-list-table th{padding:0}.fc .fc-list-day-cushion,.fc .fc-list-table td{padding:8px 14px}.fc .fc-list-day-cushion:after{clear:both;content:\"\";display:table}.fc-theme-standard .fc-list-day-cushion{background-color:var(--fc-neutral-bg-color)}.fc-direction-ltr .fc-list-day-text,.fc-direction-rtl .fc-list-day-side-text{float:left}.fc-direction-ltr .fc-list-day-side-text,.fc-direction-rtl .fc-list-day-text{float:right}.fc-direction-ltr .fc-list-table .fc-list-event-graphic{padding-right:0}.fc-direction-rtl .fc-list-table .fc-list-event-graphic{padding-left:0}.fc .fc-list-event.fc-event-forced-url{cursor:pointer}.fc .fc-list-event:hover td{background-color:var(--fc-list-event-hover-bg-color)}.fc .fc-list-event-graphic,.fc .fc-list-event-time{white-space:nowrap;width:1px}.fc .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}.fc .fc-list-event-title a{color:inherit;text-decoration:none}.fc .fc-list-event.fc-event-forced-url:hover a{text-decoration:underline}";
|
|
269
|
-
internal_cjs.injectStyles(css_248z);
|
|
270
|
-
|
|
271
274
|
exports.ListView = ListView;
|
package/internal.js
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
import { BaseComponent, getUniqueDomId, getDateMeta, buildNavLinkAttrs, ContentContainer, getDayClassNames, formatDayString, createFormatter, EventContainer,
|
|
1
|
+
import { injectStyles, BaseComponent, getUniqueDomId, getStickyHeaderDates, getDateMeta, buildNavLinkAttrs, ContentContainer, getDayClassNames, formatDayString, createFormatter, EventContainer, getEventRangeAnchorAttrs, isMultiDayRange, buildEventRangeTimeText, DateComponent, memoize, getIsHeightAuto, ViewContainer, Scroller, NowTimer, sortEventSegs, getEventRangeMeta, sliceEventStore, intersectRanges, startOfDay, addDays } from '@fullcalendar/core/internal.js';
|
|
2
2
|
import { createElement, Fragment } from '@fullcalendar/core/preact.js';
|
|
3
3
|
|
|
4
|
+
var css_248z = ":root{--fc-list-event-dot-width:10px;--fc-list-event-hover-bg-color:#f5f5f5}.fc-table{border-spacing:0;width:100%}.fc-table>*>*>*{border-color:var(--fc-border-color);border-style:solid;border-width:0 0 1px;padding:0}.fc-table>:last-child>:last-child>*{border-bottom-width:0}.fc-list-day-inner,.fc-list-event-dot-cell,.fc-list-event-time,.fc-list-event-title{padding:8px 14px}.fc-direction-ltr .fc-list-event-dot-cell{padding-right:0}.fc-direction-rtl .fc-list-event-dot-cell{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-cell-sticky{background:var(--fc-page-bg-color);position:sticky;top:0}.fc-list-day-inner{background:var(--fc-neutral-bg-color);display:flex;justify-content:space-between}.fc-list-event.fc-event-forced-url{cursor:pointer}.fc-list-event:hover td{background-color:var(--fc-list-event-hover-bg-color)}.fc-list-event-dot-cell,.fc-list-event-time{white-space:nowrap;width:1px}.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}.fc-list-event-title a{color:inherit;text-decoration:none}.fc-list-event.fc-event-forced-url:hover a{text-decoration:underline}";
|
|
5
|
+
injectStyles(css_248z);
|
|
6
|
+
|
|
4
7
|
class ListViewHeaderRow extends BaseComponent {
|
|
5
8
|
constructor() {
|
|
6
9
|
super(...arguments);
|
|
@@ -12,6 +15,7 @@ class ListViewHeaderRow extends BaseComponent {
|
|
|
12
15
|
let { theme, dateEnv, options, viewApi } = this.context;
|
|
13
16
|
let { cellId, dayDate, todayRange } = this.props;
|
|
14
17
|
let { textId } = this.state;
|
|
18
|
+
let stickyHeaderDates = !this.props.forPrint && getStickyHeaderDates(options);
|
|
15
19
|
let dayMeta = getDateMeta(dayDate, todayRange);
|
|
16
20
|
// will ever be falsy?
|
|
17
21
|
let text = options.listDayFormat ? dateEnv.format(dayDate, options.listDayFormat) : '';
|
|
@@ -26,16 +30,18 @@ class ListViewHeaderRow extends BaseComponent {
|
|
|
26
30
|
...getDayClassNames(dayMeta, theme),
|
|
27
31
|
], elAttrs: {
|
|
28
32
|
'data-date': formatDayString(dayDate),
|
|
29
|
-
}, renderProps: renderProps, generatorName: "dayHeaderContent", customGenerator: options.dayHeaderContent, defaultGenerator: renderInnerContent, classNameGenerator: options.dayHeaderClassNames, didMount: options.dayHeaderDidMount, willUnmount: options.dayHeaderWillUnmount }, (InnerContent) => (
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
}, renderProps: renderProps, generatorName: "dayHeaderContent", customGenerator: options.dayHeaderContent, defaultGenerator: renderInnerContent, classNameGenerator: options.dayHeaderClassNames, didMount: options.dayHeaderDidMount, willUnmount: options.dayHeaderWillUnmount }, (InnerContent) => (createElement(InnerContent, { elTag: "th", elAttrs: {
|
|
34
|
+
id: cellId,
|
|
35
|
+
colSpan: 3,
|
|
36
|
+
'aria-labelledby': textId,
|
|
37
|
+
}, elClasses: [
|
|
38
|
+
'fc-list-day-cell',
|
|
39
|
+
stickyHeaderDates ? 'fc-list-day-cell-sticky' : '',
|
|
40
|
+
] }))));
|
|
35
41
|
}
|
|
36
42
|
}
|
|
37
43
|
function renderInnerContent(props) {
|
|
38
|
-
return (createElement(
|
|
44
|
+
return (createElement("div", { className: 'fc-list-day-inner' },
|
|
39
45
|
props.text && (createElement("a", Object.assign({ id: props.textId, className: "fc-list-day-text" }, props.navLinkAttrs), props.text)),
|
|
40
46
|
props.sideText && ( /* not keyboard tabbable */createElement("a", Object.assign({ "aria-hidden": true, className: "fc-list-day-side-text" }, props.sideNavLinkAttrs), props.sideText))));
|
|
41
47
|
}
|
|
@@ -49,47 +55,47 @@ class ListViewEventRow extends BaseComponent {
|
|
|
49
55
|
render() {
|
|
50
56
|
let { props, context } = this;
|
|
51
57
|
let { options } = context;
|
|
52
|
-
let {
|
|
58
|
+
let { eventRange, timeHeaderId, eventHeaderId, dateHeaderId } = props;
|
|
53
59
|
let timeFormat = options.eventTimeFormat || DEFAULT_TIME_FORMAT;
|
|
54
60
|
return (createElement(EventContainer, Object.assign({}, props, { elTag: "tr", elClasses: [
|
|
55
61
|
'fc-list-event',
|
|
56
|
-
|
|
57
|
-
], defaultGenerator: () => renderEventInnerContent(
|
|
58
|
-
buildTimeContent(
|
|
59
|
-
createElement("td", { "aria-hidden": true, className: "fc-list-event-
|
|
62
|
+
eventRange.def.url && 'fc-event-forced-url',
|
|
63
|
+
], defaultGenerator: () => renderEventInnerContent(eventRange, context) /* weird */, eventRange: eventRange, timeText: "", disableDragging: true, disableResizing: true }), (InnerContent, eventContentArg) => (createElement(Fragment, null,
|
|
64
|
+
buildTimeContent(eventRange, props.isStart, props.isEnd, props.segStart, props.segEnd, timeFormat, context, timeHeaderId, dateHeaderId),
|
|
65
|
+
createElement("td", { "aria-hidden": true, className: "fc-list-event-dot-cell" },
|
|
60
66
|
createElement("span", { className: "fc-list-event-dot", style: {
|
|
61
67
|
borderColor: eventContentArg.borderColor || eventContentArg.backgroundColor,
|
|
62
68
|
} })),
|
|
63
69
|
createElement(InnerContent, { elTag: "td", elClasses: ['fc-list-event-title'], elAttrs: { headers: `${eventHeaderId} ${dateHeaderId}` } })))));
|
|
64
70
|
}
|
|
65
71
|
}
|
|
66
|
-
function renderEventInnerContent(
|
|
67
|
-
let interactiveAttrs =
|
|
68
|
-
return (createElement("a", Object.assign({}, interactiveAttrs),
|
|
72
|
+
function renderEventInnerContent(eventRange, context) {
|
|
73
|
+
let interactiveAttrs = getEventRangeAnchorAttrs(eventRange, context);
|
|
74
|
+
return (createElement("a", Object.assign({}, interactiveAttrs), eventRange.def.title));
|
|
69
75
|
}
|
|
70
|
-
function buildTimeContent(
|
|
76
|
+
function buildTimeContent(eventRange, isStart, isEnd, segStart, segEnd, timeFormat, context, timeHeaderId, dateHeaderId) {
|
|
71
77
|
let { options } = context;
|
|
72
78
|
if (options.displayEventTime !== false) {
|
|
73
|
-
let eventDef =
|
|
74
|
-
let eventInstance =
|
|
79
|
+
let eventDef = eventRange.def;
|
|
80
|
+
let eventInstance = eventRange.instance;
|
|
75
81
|
let doAllDay = false;
|
|
76
82
|
let timeText;
|
|
77
83
|
if (eventDef.allDay) {
|
|
78
84
|
doAllDay = true;
|
|
79
85
|
}
|
|
80
|
-
else if (isMultiDayRange(
|
|
81
|
-
if (
|
|
82
|
-
timeText =
|
|
86
|
+
else if (isMultiDayRange(eventRange.range)) { // TODO: use (!isStart || !isEnd) instead?
|
|
87
|
+
if (isStart) {
|
|
88
|
+
timeText = buildEventRangeTimeText(eventRange, timeFormat, context, null, null, eventInstance.range.start, segEnd);
|
|
83
89
|
}
|
|
84
|
-
else if (
|
|
85
|
-
timeText =
|
|
90
|
+
else if (isEnd) {
|
|
91
|
+
timeText = buildEventRangeTimeText(eventRange, timeFormat, context, null, null, segStart, eventInstance.range.end);
|
|
86
92
|
}
|
|
87
93
|
else {
|
|
88
94
|
doAllDay = true;
|
|
89
95
|
}
|
|
90
96
|
}
|
|
91
97
|
else {
|
|
92
|
-
timeText =
|
|
98
|
+
timeText = buildEventRangeTimeText(eventRange, timeFormat, context, null, null, segStart, segEnd);
|
|
93
99
|
}
|
|
94
100
|
if (doAllDay) {
|
|
95
101
|
let renderProps = {
|
|
@@ -134,16 +140,17 @@ class ListView extends DateComponent {
|
|
|
134
140
|
}
|
|
135
141
|
render() {
|
|
136
142
|
let { props, context } = this;
|
|
143
|
+
let { options } = context;
|
|
137
144
|
let { dayDates, dayRanges } = this.computeDateVars(props.dateProfile);
|
|
138
145
|
let eventSegs = this.eventStoreToSegs(props.eventStore, props.eventUiBases, dayRanges);
|
|
146
|
+
let verticalScrolling = !props.forPrint && !getIsHeightAuto(options);
|
|
139
147
|
return (createElement(ViewContainer, { elRef: this.setRootEl, elClasses: [
|
|
140
|
-
'fc-list',
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
'fc-list-sticky' :
|
|
144
|
-
'',
|
|
148
|
+
'fc-list-view',
|
|
149
|
+
'fc-flex-column',
|
|
150
|
+
'fc-border',
|
|
145
151
|
], viewSpec: context.viewSpec },
|
|
146
|
-
createElement(Scroller
|
|
152
|
+
createElement(Scroller // TODO: don't need heavyweight component
|
|
153
|
+
, { vertical: verticalScrolling, elClassNames: [verticalScrolling ? 'fc-liquid' : ''] }, eventSegs.length > 0 ?
|
|
147
154
|
this.renderSegList(eventSegs, dayDates) :
|
|
148
155
|
this.renderEmptyMessage())));
|
|
149
156
|
}
|
|
@@ -153,10 +160,10 @@ class ListView extends DateComponent {
|
|
|
153
160
|
text: options.noEventsText,
|
|
154
161
|
view: viewApi,
|
|
155
162
|
};
|
|
156
|
-
return (createElement(ContentContainer, { elTag: "div", elClasses: ['fc-list-empty'], renderProps: renderProps, generatorName: "noEventsContent", customGenerator: options.noEventsContent, defaultGenerator: renderNoEventsInner, classNameGenerator: options.noEventsClassNames, didMount: options.noEventsDidMount, willUnmount: options.noEventsWillUnmount }, (InnerContent) => (createElement(InnerContent, { elTag: "div", elClasses: ['fc-list-empty-
|
|
163
|
+
return (createElement(ContentContainer, { elTag: "div", elClasses: ['fc-list-empty'], renderProps: renderProps, generatorName: "noEventsContent", customGenerator: options.noEventsContent, defaultGenerator: renderNoEventsInner, classNameGenerator: options.noEventsClassNames, didMount: options.noEventsDidMount, willUnmount: options.noEventsWillUnmount }, (InnerContent) => (createElement(InnerContent, { elTag: "div", elClasses: ['fc-list-empty-inner'] }))));
|
|
157
164
|
}
|
|
158
165
|
renderSegList(allSegs, dayDates) {
|
|
159
|
-
let {
|
|
166
|
+
let { options } = this.context;
|
|
160
167
|
let { timeHeaderId, eventHeaderId, dateHeaderIdRoot } = this.state;
|
|
161
168
|
let segsByDay = groupSegsByDay(allSegs); // sparse array
|
|
162
169
|
return (createElement(NowTimer, { unit: "day" }, (nowDate, todayRange) => {
|
|
@@ -167,15 +174,15 @@ class ListView extends DateComponent {
|
|
|
167
174
|
let dayStr = formatDayString(dayDates[dayIndex]);
|
|
168
175
|
let dateHeaderId = dateHeaderIdRoot + '-' + dayStr;
|
|
169
176
|
// append a day header
|
|
170
|
-
innerNodes.push(createElement(ListViewHeaderRow, { key: dayStr, cellId: dateHeaderId, dayDate: dayDates[dayIndex], todayRange: todayRange }));
|
|
177
|
+
innerNodes.push(createElement(ListViewHeaderRow, { key: dayStr, forPrint: this.props.forPrint, cellId: dateHeaderId, dayDate: dayDates[dayIndex], todayRange: todayRange }));
|
|
171
178
|
daySegs = sortEventSegs(daySegs, options.eventOrder);
|
|
172
179
|
for (let seg of daySegs) {
|
|
173
|
-
innerNodes.push(createElement(ListViewEventRow, Object.assign({ key: dayStr + ':' + seg.eventRange.instance.instanceId /* are multiple segs for an instanceId */, seg: seg, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: false, timeHeaderId: timeHeaderId, eventHeaderId: eventHeaderId, dateHeaderId: dateHeaderId },
|
|
180
|
+
innerNodes.push(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 }, getEventRangeMeta(seg.eventRange, todayRange, nowDate))));
|
|
174
181
|
}
|
|
175
182
|
}
|
|
176
183
|
}
|
|
177
|
-
return (createElement("table", { className: 'fc-
|
|
178
|
-
createElement("thead",
|
|
184
|
+
return (createElement("table", { className: 'fc-table' },
|
|
185
|
+
createElement("thead", { className: 'fc-offscreen' },
|
|
179
186
|
createElement("tr", null,
|
|
180
187
|
createElement("th", { scope: "col", id: timeHeaderId }, options.timeHint),
|
|
181
188
|
createElement("th", { scope: "col", "aria-hidden": true }),
|
|
@@ -206,7 +213,6 @@ class ListView extends DateComponent {
|
|
|
206
213
|
segRange = intersectRanges(range, dayRanges[dayIndex]);
|
|
207
214
|
if (segRange) {
|
|
208
215
|
seg = {
|
|
209
|
-
component: this,
|
|
210
216
|
eventRange,
|
|
211
217
|
start: segRange.start,
|
|
212
218
|
end: segRange.end,
|
|
@@ -261,7 +267,4 @@ function groupSegsByDay(segs) {
|
|
|
261
267
|
return segsByDay;
|
|
262
268
|
}
|
|
263
269
|
|
|
264
|
-
var css_248z = ":root{--fc-list-event-dot-width:10px;--fc-list-event-hover-bg-color:#f5f5f5}.fc-theme-standard .fc-list{border:1px solid var(--fc-border-color)}.fc .fc-list-empty{align-items:center;background-color:var(--fc-neutral-bg-color);display:flex;height:100%;justify-content:center}.fc .fc-list-empty-cushion{margin:5em 0}.fc .fc-list-table{border-style:hidden;width:100%}.fc .fc-list-table tr>*{border-left:0;border-right:0}.fc .fc-list-sticky .fc-list-day>*{background:var(--fc-page-bg-color);position:sticky;top:0}.fc .fc-list-table thead{left:-10000px;position:absolute}.fc .fc-list-table tbody>tr:first-child th{border-top:0}.fc .fc-list-table th{padding:0}.fc .fc-list-day-cushion,.fc .fc-list-table td{padding:8px 14px}.fc .fc-list-day-cushion:after{clear:both;content:\"\";display:table}.fc-theme-standard .fc-list-day-cushion{background-color:var(--fc-neutral-bg-color)}.fc-direction-ltr .fc-list-day-text,.fc-direction-rtl .fc-list-day-side-text{float:left}.fc-direction-ltr .fc-list-day-side-text,.fc-direction-rtl .fc-list-day-text{float:right}.fc-direction-ltr .fc-list-table .fc-list-event-graphic{padding-right:0}.fc-direction-rtl .fc-list-table .fc-list-event-graphic{padding-left:0}.fc .fc-list-event.fc-event-forced-url{cursor:pointer}.fc .fc-list-event:hover td{background-color:var(--fc-list-event-hover-bg-color)}.fc .fc-list-event-graphic,.fc .fc-list-event-time{white-space:nowrap;width:1px}.fc .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}.fc .fc-list-event-title a{color:inherit;text-decoration:none}.fc .fc-list-event.fc-event-forced-url:hover a{text-decoration:underline}";
|
|
265
|
-
injectStyles(css_248z);
|
|
266
|
-
|
|
267
270
|
export { ListView };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fullcalendar/list",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "7.0.0-beta.1",
|
|
4
4
|
"title": "FullCalendar List View Plugin",
|
|
5
5
|
"description": "Display events on a calendar view that looks like a bulleted list",
|
|
6
6
|
"keywords": [
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
],
|
|
13
13
|
"homepage": "https://fullcalendar.io/docs/list-view",
|
|
14
14
|
"peerDependencies": {
|
|
15
|
-
"@fullcalendar/core": "
|
|
15
|
+
"@fullcalendar/core": "7.0.0-beta.1"
|
|
16
16
|
},
|
|
17
17
|
"type": "module",
|
|
18
18
|
"bugs": "https://fullcalendar.io/reporting-bugs",
|