@fullcalendar/list 6.1.15 → 7.0.0-beta.0
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 +25 -21
- package/index.global.min.js +2 -2
- package/internal.cjs +24 -20
- package/internal.js +25 -21
- 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.0
|
|
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
|
}
|
|
@@ -61,7 +64,7 @@ FullCalendar.List = (function (exports, core, internal$1, preact) {
|
|
|
61
64
|
seg.eventRange.def.url && 'fc-event-forced-url',
|
|
62
65
|
], defaultGenerator: () => renderEventInnerContent(seg, context) /* weird */, seg: seg, timeText: "", disableDragging: true, disableResizing: true }), (InnerContent, eventContentArg) => (preact.createElement(preact.Fragment, null,
|
|
63
66
|
buildTimeContent(seg, timeFormat, context, timeHeaderId, dateHeaderId),
|
|
64
|
-
preact.createElement("td", { "aria-hidden": true, className: "fc-list-event-
|
|
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
|
} })),
|
|
@@ -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
182
|
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.getSegMeta(seg, 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 }),
|
|
@@ -279,7 +283,7 @@ FullCalendar.List = (function (exports, core, internal$1, preact) {
|
|
|
279
283
|
return input === false ? null : internal$1.createFormatter(input);
|
|
280
284
|
}
|
|
281
285
|
|
|
282
|
-
var css_248z = ":root{--fc-list-event-dot-width:10px;--fc-list-event-hover-bg-color:#f5f5f5}.fc-
|
|
286
|
+
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
287
|
internal$1.injectStyles(css_248z);
|
|
284
288
|
|
|
285
289
|
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.0
|
|
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,m=!this.props.forPrint&&n.getStickyHeaderDates(r),u=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)},u);return a.createElement(n.ContentContainer,{elTag:"tr",elClasses:["fc-list-day",...n.getDayClassNames(u,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",m?"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,{seg:s,timeHeaderId:l,eventHeaderId:d,dateHeaderId:c}=e,m=r.eventTimeFormat||i;return a.createElement(n.EventContainer,Object.assign({},e,{elTag:"tr",elClasses:["fc-list-event",s.eventRange.def.url&&"fc-event-forced-url"],defaultGenerator:()=>function(e,t){let r=n.getSegAnchorAttrs(e,t);return a.createElement("a",Object.assign({},r),e.eventRange.def.title)}(s,t),seg:s,timeText:"",disableDragging:!0,disableResizing:!0}),(e,r)=>a.createElement(a.Fragment,null,function(e,t,r,s,i){let{options:l}=r;if(!1!==l.displayEventTime){let d,c=e.eventRange.def,m=e.eventRange.instance,u=!1;if(c.allDay?u=!0:n.isMultiDayRange(e.eventRange.range)?e.isStart?d=n.buildSegTimeText(e,t,r,null,null,m.range.start,e.end):e.isEnd?d=n.buildSegTimeText(e,t,r,null,null,e.start,m.range.end):u=!0:d=n.buildSegTimeText(e,t,r),u){let e={text:r.options.allDayText,view:r.viewApi};return a.createElement(n.ContentContainer,{elTag:"td",elClasses:["fc-list-event-time"],elAttrs:{headers:`${s} ${i}`},renderProps:e,generatorName:"allDayContent",customGenerator:l.allDayContent,defaultGenerator:o,classNameGenerator:l.allDayClassNames,didMount:l.allDayDidMount,willUnmount:l.allDayWillUnmount})}return a.createElement("td",{className:"fc-list-event-time"},d)}return null}(s,m,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:r.borderColor||r.backgroundColor}})),a.createElement(e,{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(m),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,m)=>{let u=[];for(let g=0;g<c.length;g+=1){let f=c[g];if(f){let c=n.formatDayString(t[g]),v=d+"-"+c;u.push(a.createElement(r,{key:c,forPrint:this.props.forPrint,cellId:v,dayDate:t[g],todayRange:m})),f=n.sortEventSegs(f,s.eventOrder);for(let t of f)u.push(a.createElement(l,Object.assign({key:c+":"+t.eventRange.instance.instanceId,seg:t,isDragging:!1,isResizing:!1,isDateSelecting:!1,isSelected:!1,timeHeaderId:i,eventHeaderId:o,dateHeaderId:v},n.getSegMeta(t,m,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,u))})}_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={component:this,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 m(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 u={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:u,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.cjs
CHANGED
|
@@ -16,6 +16,7 @@ class ListViewHeaderRow extends internal_cjs.BaseComponent {
|
|
|
16
16
|
let { theme, dateEnv, options, viewApi } = this.context;
|
|
17
17
|
let { cellId, dayDate, todayRange } = this.props;
|
|
18
18
|
let { textId } = this.state;
|
|
19
|
+
let stickyHeaderDates = !this.props.forPrint && internal_cjs.getStickyHeaderDates(options);
|
|
19
20
|
let dayMeta = internal_cjs.getDateMeta(dayDate, todayRange);
|
|
20
21
|
// will ever be falsy?
|
|
21
22
|
let text = options.listDayFormat ? dateEnv.format(dayDate, options.listDayFormat) : '';
|
|
@@ -30,16 +31,18 @@ class ListViewHeaderRow extends internal_cjs.BaseComponent {
|
|
|
30
31
|
...internal_cjs.getDayClassNames(dayMeta, theme),
|
|
31
32
|
], elAttrs: {
|
|
32
33
|
'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
|
-
|
|
34
|
+
}, 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: {
|
|
35
|
+
id: cellId,
|
|
36
|
+
colSpan: 3,
|
|
37
|
+
'aria-labelledby': textId,
|
|
38
|
+
}, elClasses: [
|
|
39
|
+
'fc-list-day-cell',
|
|
40
|
+
stickyHeaderDates ? 'fc-list-day-cell-sticky' : '',
|
|
41
|
+
] }))));
|
|
39
42
|
}
|
|
40
43
|
}
|
|
41
44
|
function renderInnerContent(props) {
|
|
42
|
-
return (preact_cjs.createElement(
|
|
45
|
+
return (preact_cjs.createElement("div", { className: 'fc-list-day-inner' },
|
|
43
46
|
props.text && (preact_cjs.createElement("a", Object.assign({ id: props.textId, className: "fc-list-day-text" }, props.navLinkAttrs), props.text)),
|
|
44
47
|
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
48
|
}
|
|
@@ -60,7 +63,7 @@ class ListViewEventRow extends internal_cjs.BaseComponent {
|
|
|
60
63
|
seg.eventRange.def.url && 'fc-event-forced-url',
|
|
61
64
|
], defaultGenerator: () => renderEventInnerContent(seg, context) /* weird */, seg: seg, timeText: "", disableDragging: true, disableResizing: true }), (InnerContent, eventContentArg) => (preact_cjs.createElement(preact_cjs.Fragment, null,
|
|
62
65
|
buildTimeContent(seg, timeFormat, context, timeHeaderId, dateHeaderId),
|
|
63
|
-
preact_cjs.createElement("td", { "aria-hidden": true, className: "fc-list-event-
|
|
66
|
+
preact_cjs.createElement("td", { "aria-hidden": true, className: "fc-list-event-dot-cell" },
|
|
64
67
|
preact_cjs.createElement("span", { className: "fc-list-event-dot", style: {
|
|
65
68
|
borderColor: eventContentArg.borderColor || eventContentArg.backgroundColor,
|
|
66
69
|
} })),
|
|
@@ -138,16 +141,17 @@ class ListView extends internal_cjs.DateComponent {
|
|
|
138
141
|
}
|
|
139
142
|
render() {
|
|
140
143
|
let { props, context } = this;
|
|
144
|
+
let { options } = context;
|
|
141
145
|
let { dayDates, dayRanges } = this.computeDateVars(props.dateProfile);
|
|
142
146
|
let eventSegs = this.eventStoreToSegs(props.eventStore, props.eventUiBases, dayRanges);
|
|
147
|
+
let verticalScrolling = !props.forPrint && !internal_cjs.getIsHeightAuto(options);
|
|
143
148
|
return (preact_cjs.createElement(internal_cjs.ViewContainer, { elRef: this.setRootEl, elClasses: [
|
|
144
|
-
'fc-list',
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
'fc-list-sticky' :
|
|
148
|
-
'',
|
|
149
|
+
'fc-list-view',
|
|
150
|
+
'fc-flex-column',
|
|
151
|
+
'fc-border',
|
|
149
152
|
], viewSpec: context.viewSpec },
|
|
150
|
-
preact_cjs.createElement(internal_cjs.Scroller
|
|
153
|
+
preact_cjs.createElement(internal_cjs.Scroller // TODO: don't need heavyweight component
|
|
154
|
+
, { vertical: verticalScrolling, elClassNames: [verticalScrolling ? 'fc-liquid' : ''] }, eventSegs.length > 0 ?
|
|
151
155
|
this.renderSegList(eventSegs, dayDates) :
|
|
152
156
|
this.renderEmptyMessage())));
|
|
153
157
|
}
|
|
@@ -157,10 +161,10 @@ class ListView extends internal_cjs.DateComponent {
|
|
|
157
161
|
text: options.noEventsText,
|
|
158
162
|
view: viewApi,
|
|
159
163
|
};
|
|
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-
|
|
164
|
+
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
165
|
}
|
|
162
166
|
renderSegList(allSegs, dayDates) {
|
|
163
|
-
let {
|
|
167
|
+
let { options } = this.context;
|
|
164
168
|
let { timeHeaderId, eventHeaderId, dateHeaderIdRoot } = this.state;
|
|
165
169
|
let segsByDay = groupSegsByDay(allSegs); // sparse array
|
|
166
170
|
return (preact_cjs.createElement(internal_cjs.NowTimer, { unit: "day" }, (nowDate, todayRange) => {
|
|
@@ -171,15 +175,15 @@ class ListView extends internal_cjs.DateComponent {
|
|
|
171
175
|
let dayStr = internal_cjs.formatDayString(dayDates[dayIndex]);
|
|
172
176
|
let dateHeaderId = dateHeaderIdRoot + '-' + dayStr;
|
|
173
177
|
// append a day header
|
|
174
|
-
innerNodes.push(preact_cjs.createElement(ListViewHeaderRow, { key: dayStr, cellId: dateHeaderId, dayDate: dayDates[dayIndex], todayRange: todayRange }));
|
|
178
|
+
innerNodes.push(preact_cjs.createElement(ListViewHeaderRow, { key: dayStr, forPrint: this.props.forPrint, cellId: dateHeaderId, dayDate: dayDates[dayIndex], todayRange: todayRange }));
|
|
175
179
|
daySegs = internal_cjs.sortEventSegs(daySegs, options.eventOrder);
|
|
176
180
|
for (let seg of daySegs) {
|
|
177
181
|
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.getSegMeta(seg, todayRange, nowDate))));
|
|
178
182
|
}
|
|
179
183
|
}
|
|
180
184
|
}
|
|
181
|
-
return (preact_cjs.createElement("table", { className: 'fc-
|
|
182
|
-
preact_cjs.createElement("thead",
|
|
185
|
+
return (preact_cjs.createElement("table", { className: 'fc-table' },
|
|
186
|
+
preact_cjs.createElement("thead", { className: 'fc-offscreen' },
|
|
183
187
|
preact_cjs.createElement("tr", null,
|
|
184
188
|
preact_cjs.createElement("th", { scope: "col", id: timeHeaderId }, options.timeHint),
|
|
185
189
|
preact_cjs.createElement("th", { scope: "col", "aria-hidden": true }),
|
|
@@ -265,7 +269,7 @@ function groupSegsByDay(segs) {
|
|
|
265
269
|
return segsByDay;
|
|
266
270
|
}
|
|
267
271
|
|
|
268
|
-
var css_248z = ":root{--fc-list-event-dot-width:10px;--fc-list-event-hover-bg-color:#f5f5f5}.fc-
|
|
272
|
+
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}";
|
|
269
273
|
internal_cjs.injectStyles(css_248z);
|
|
270
274
|
|
|
271
275
|
exports.ListView = ListView;
|
package/internal.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BaseComponent, getUniqueDomId, getDateMeta, buildNavLinkAttrs, ContentContainer, getDayClassNames, formatDayString, createFormatter, EventContainer, getSegAnchorAttrs, isMultiDayRange, buildSegTimeText, DateComponent, memoize, ViewContainer, Scroller, NowTimer, sortEventSegs, getSegMeta, sliceEventStore, intersectRanges, startOfDay, addDays, injectStyles } from '@fullcalendar/core/internal.js';
|
|
1
|
+
import { BaseComponent, getUniqueDomId, getStickyHeaderDates, getDateMeta, buildNavLinkAttrs, ContentContainer, getDayClassNames, formatDayString, createFormatter, EventContainer, getSegAnchorAttrs, isMultiDayRange, buildSegTimeText, DateComponent, memoize, getIsHeightAuto, ViewContainer, Scroller, NowTimer, sortEventSegs, getSegMeta, sliceEventStore, intersectRanges, startOfDay, addDays, injectStyles } from '@fullcalendar/core/internal.js';
|
|
2
2
|
import { createElement, Fragment } from '@fullcalendar/core/preact.js';
|
|
3
3
|
|
|
4
4
|
class ListViewHeaderRow extends BaseComponent {
|
|
@@ -12,6 +12,7 @@ class ListViewHeaderRow extends BaseComponent {
|
|
|
12
12
|
let { theme, dateEnv, options, viewApi } = this.context;
|
|
13
13
|
let { cellId, dayDate, todayRange } = this.props;
|
|
14
14
|
let { textId } = this.state;
|
|
15
|
+
let stickyHeaderDates = !this.props.forPrint && getStickyHeaderDates(options);
|
|
15
16
|
let dayMeta = getDateMeta(dayDate, todayRange);
|
|
16
17
|
// will ever be falsy?
|
|
17
18
|
let text = options.listDayFormat ? dateEnv.format(dayDate, options.listDayFormat) : '';
|
|
@@ -26,16 +27,18 @@ class ListViewHeaderRow extends BaseComponent {
|
|
|
26
27
|
...getDayClassNames(dayMeta, theme),
|
|
27
28
|
], elAttrs: {
|
|
28
29
|
'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
|
-
|
|
30
|
+
}, renderProps: renderProps, generatorName: "dayHeaderContent", customGenerator: options.dayHeaderContent, defaultGenerator: renderInnerContent, classNameGenerator: options.dayHeaderClassNames, didMount: options.dayHeaderDidMount, willUnmount: options.dayHeaderWillUnmount }, (InnerContent) => (createElement(InnerContent, { elTag: "th", elAttrs: {
|
|
31
|
+
id: cellId,
|
|
32
|
+
colSpan: 3,
|
|
33
|
+
'aria-labelledby': textId,
|
|
34
|
+
}, elClasses: [
|
|
35
|
+
'fc-list-day-cell',
|
|
36
|
+
stickyHeaderDates ? 'fc-list-day-cell-sticky' : '',
|
|
37
|
+
] }))));
|
|
35
38
|
}
|
|
36
39
|
}
|
|
37
40
|
function renderInnerContent(props) {
|
|
38
|
-
return (createElement(
|
|
41
|
+
return (createElement("div", { className: 'fc-list-day-inner' },
|
|
39
42
|
props.text && (createElement("a", Object.assign({ id: props.textId, className: "fc-list-day-text" }, props.navLinkAttrs), props.text)),
|
|
40
43
|
props.sideText && ( /* not keyboard tabbable */createElement("a", Object.assign({ "aria-hidden": true, className: "fc-list-day-side-text" }, props.sideNavLinkAttrs), props.sideText))));
|
|
41
44
|
}
|
|
@@ -56,7 +59,7 @@ class ListViewEventRow extends BaseComponent {
|
|
|
56
59
|
seg.eventRange.def.url && 'fc-event-forced-url',
|
|
57
60
|
], defaultGenerator: () => renderEventInnerContent(seg, context) /* weird */, seg: seg, timeText: "", disableDragging: true, disableResizing: true }), (InnerContent, eventContentArg) => (createElement(Fragment, null,
|
|
58
61
|
buildTimeContent(seg, timeFormat, context, timeHeaderId, dateHeaderId),
|
|
59
|
-
createElement("td", { "aria-hidden": true, className: "fc-list-event-
|
|
62
|
+
createElement("td", { "aria-hidden": true, className: "fc-list-event-dot-cell" },
|
|
60
63
|
createElement("span", { className: "fc-list-event-dot", style: {
|
|
61
64
|
borderColor: eventContentArg.borderColor || eventContentArg.backgroundColor,
|
|
62
65
|
} })),
|
|
@@ -134,16 +137,17 @@ class ListView extends DateComponent {
|
|
|
134
137
|
}
|
|
135
138
|
render() {
|
|
136
139
|
let { props, context } = this;
|
|
140
|
+
let { options } = context;
|
|
137
141
|
let { dayDates, dayRanges } = this.computeDateVars(props.dateProfile);
|
|
138
142
|
let eventSegs = this.eventStoreToSegs(props.eventStore, props.eventUiBases, dayRanges);
|
|
143
|
+
let verticalScrolling = !props.forPrint && !getIsHeightAuto(options);
|
|
139
144
|
return (createElement(ViewContainer, { elRef: this.setRootEl, elClasses: [
|
|
140
|
-
'fc-list',
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
'fc-list-sticky' :
|
|
144
|
-
'',
|
|
145
|
+
'fc-list-view',
|
|
146
|
+
'fc-flex-column',
|
|
147
|
+
'fc-border',
|
|
145
148
|
], viewSpec: context.viewSpec },
|
|
146
|
-
createElement(Scroller
|
|
149
|
+
createElement(Scroller // TODO: don't need heavyweight component
|
|
150
|
+
, { vertical: verticalScrolling, elClassNames: [verticalScrolling ? 'fc-liquid' : ''] }, eventSegs.length > 0 ?
|
|
147
151
|
this.renderSegList(eventSegs, dayDates) :
|
|
148
152
|
this.renderEmptyMessage())));
|
|
149
153
|
}
|
|
@@ -153,10 +157,10 @@ class ListView extends DateComponent {
|
|
|
153
157
|
text: options.noEventsText,
|
|
154
158
|
view: viewApi,
|
|
155
159
|
};
|
|
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-
|
|
160
|
+
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
161
|
}
|
|
158
162
|
renderSegList(allSegs, dayDates) {
|
|
159
|
-
let {
|
|
163
|
+
let { options } = this.context;
|
|
160
164
|
let { timeHeaderId, eventHeaderId, dateHeaderIdRoot } = this.state;
|
|
161
165
|
let segsByDay = groupSegsByDay(allSegs); // sparse array
|
|
162
166
|
return (createElement(NowTimer, { unit: "day" }, (nowDate, todayRange) => {
|
|
@@ -167,15 +171,15 @@ class ListView extends DateComponent {
|
|
|
167
171
|
let dayStr = formatDayString(dayDates[dayIndex]);
|
|
168
172
|
let dateHeaderId = dateHeaderIdRoot + '-' + dayStr;
|
|
169
173
|
// append a day header
|
|
170
|
-
innerNodes.push(createElement(ListViewHeaderRow, { key: dayStr, cellId: dateHeaderId, dayDate: dayDates[dayIndex], todayRange: todayRange }));
|
|
174
|
+
innerNodes.push(createElement(ListViewHeaderRow, { key: dayStr, forPrint: this.props.forPrint, cellId: dateHeaderId, dayDate: dayDates[dayIndex], todayRange: todayRange }));
|
|
171
175
|
daySegs = sortEventSegs(daySegs, options.eventOrder);
|
|
172
176
|
for (let seg of daySegs) {
|
|
173
177
|
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 }, getSegMeta(seg, todayRange, nowDate))));
|
|
174
178
|
}
|
|
175
179
|
}
|
|
176
180
|
}
|
|
177
|
-
return (createElement("table", { className: 'fc-
|
|
178
|
-
createElement("thead",
|
|
181
|
+
return (createElement("table", { className: 'fc-table' },
|
|
182
|
+
createElement("thead", { className: 'fc-offscreen' },
|
|
179
183
|
createElement("tr", null,
|
|
180
184
|
createElement("th", { scope: "col", id: timeHeaderId }, options.timeHint),
|
|
181
185
|
createElement("th", { scope: "col", "aria-hidden": true }),
|
|
@@ -261,7 +265,7 @@ function groupSegsByDay(segs) {
|
|
|
261
265
|
return segsByDay;
|
|
262
266
|
}
|
|
263
267
|
|
|
264
|
-
var css_248z = ":root{--fc-list-event-dot-width:10px;--fc-list-event-hover-bg-color:#f5f5f5}.fc-
|
|
268
|
+
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}";
|
|
265
269
|
injectStyles(css_248z);
|
|
266
270
|
|
|
267
271
|
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.0",
|
|
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.0"
|
|
16
16
|
},
|
|
17
17
|
"type": "module",
|
|
18
18
|
"bugs": "https://fullcalendar.io/reporting-bugs",
|