@fullcalendar/list 7.0.0-beta.0 → 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 +18 -19
- package/index.global.min.js +2 -2
- package/internal-common.d.ts +10 -5
- package/internal.cjs +20 -21
- package/internal.js +21 -22
- package/package.json +2 -2
package/index.global.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
FullCalendar List View Plugin v7.0.0-beta.
|
|
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
|
*/
|
|
@@ -57,13 +57,13 @@ FullCalendar.List = (function (exports, core, internal$1, preact) {
|
|
|
57
57
|
render() {
|
|
58
58
|
let { props, context } = this;
|
|
59
59
|
let { options } = context;
|
|
60
|
-
let {
|
|
60
|
+
let { eventRange, timeHeaderId, eventHeaderId, dateHeaderId } = props;
|
|
61
61
|
let timeFormat = options.eventTimeFormat || DEFAULT_TIME_FORMAT;
|
|
62
62
|
return (preact.createElement(internal$1.EventContainer, Object.assign({}, props, { elTag: "tr", elClasses: [
|
|
63
63
|
'fc-list-event',
|
|
64
|
-
|
|
65
|
-
], defaultGenerator: () => renderEventInnerContent(
|
|
66
|
-
buildTimeContent(
|
|
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
67
|
preact.createElement("td", { "aria-hidden": true, className: "fc-list-event-dot-cell" },
|
|
68
68
|
preact.createElement("span", { className: "fc-list-event-dot", style: {
|
|
69
69
|
borderColor: eventContentArg.borderColor || eventContentArg.backgroundColor,
|
|
@@ -71,33 +71,33 @@ FullCalendar.List = (function (exports, core, internal$1, preact) {
|
|
|
71
71
|
preact.createElement(InnerContent, { elTag: "td", elClasses: ['fc-list-event-title'], elAttrs: { headers: `${eventHeaderId} ${dateHeaderId}` } })))));
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
|
-
function renderEventInnerContent(
|
|
75
|
-
let interactiveAttrs = internal$1.
|
|
76
|
-
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));
|
|
77
77
|
}
|
|
78
|
-
function buildTimeContent(
|
|
78
|
+
function buildTimeContent(eventRange, isStart, isEnd, segStart, segEnd, timeFormat, context, timeHeaderId, dateHeaderId) {
|
|
79
79
|
let { options } = context;
|
|
80
80
|
if (options.displayEventTime !== false) {
|
|
81
|
-
let eventDef =
|
|
82
|
-
let eventInstance =
|
|
81
|
+
let eventDef = eventRange.def;
|
|
82
|
+
let eventInstance = eventRange.instance;
|
|
83
83
|
let doAllDay = false;
|
|
84
84
|
let timeText;
|
|
85
85
|
if (eventDef.allDay) {
|
|
86
86
|
doAllDay = true;
|
|
87
87
|
}
|
|
88
|
-
else if (internal$1.isMultiDayRange(
|
|
89
|
-
if (
|
|
90
|
-
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);
|
|
91
91
|
}
|
|
92
|
-
else if (
|
|
93
|
-
timeText = internal$1.
|
|
92
|
+
else if (isEnd) {
|
|
93
|
+
timeText = internal$1.buildEventRangeTimeText(eventRange, timeFormat, context, null, null, segStart, eventInstance.range.end);
|
|
94
94
|
}
|
|
95
95
|
else {
|
|
96
96
|
doAllDay = true;
|
|
97
97
|
}
|
|
98
98
|
}
|
|
99
99
|
else {
|
|
100
|
-
timeText = internal$1.
|
|
100
|
+
timeText = internal$1.buildEventRangeTimeText(eventRange, timeFormat, context, null, null, segStart, segEnd);
|
|
101
101
|
}
|
|
102
102
|
if (doAllDay) {
|
|
103
103
|
let renderProps = {
|
|
@@ -179,7 +179,7 @@ FullCalendar.List = (function (exports, core, internal$1, preact) {
|
|
|
179
179
|
innerNodes.push(preact.createElement(ListViewHeaderRow, { key: dayStr, forPrint: this.props.forPrint, cellId: dateHeaderId, dayDate: dayDates[dayIndex], todayRange: todayRange }));
|
|
180
180
|
daySegs = internal$1.sortEventSegs(daySegs, options.eventOrder);
|
|
181
181
|
for (let seg of daySegs) {
|
|
182
|
-
innerNodes.push(preact.createElement(ListViewEventRow, Object.assign({ key: dayStr + ':' + seg.eventRange.instance.instanceId /* are multiple segs for an instanceId */, 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))));
|
|
183
183
|
}
|
|
184
184
|
}
|
|
185
185
|
}
|
|
@@ -215,7 +215,6 @@ FullCalendar.List = (function (exports, core, internal$1, preact) {
|
|
|
215
215
|
segRange = internal$1.intersectRanges(range, dayRanges[dayIndex]);
|
|
216
216
|
if (segRange) {
|
|
217
217
|
seg = {
|
|
218
|
-
component: this,
|
|
219
218
|
eventRange,
|
|
220
219
|
start: segRange.start,
|
|
221
220
|
end: segRange.end,
|
package/index.global.min.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
FullCalendar List View Plugin v7.0.0-beta.
|
|
2
|
+
FullCalendar List View Plugin v7.0.0-beta.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:i}=this.context,{cellId:l,dayDate:o,todayRange:d}=this.props,{textId:c}=this.state,
|
|
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);
|
|
@@ -56,13 +59,13 @@ class ListViewEventRow extends internal_cjs.BaseComponent {
|
|
|
56
59
|
render() {
|
|
57
60
|
let { props, context } = this;
|
|
58
61
|
let { options } = context;
|
|
59
|
-
let {
|
|
62
|
+
let { eventRange, timeHeaderId, eventHeaderId, dateHeaderId } = props;
|
|
60
63
|
let timeFormat = options.eventTimeFormat || DEFAULT_TIME_FORMAT;
|
|
61
64
|
return (preact_cjs.createElement(internal_cjs.EventContainer, Object.assign({}, props, { elTag: "tr", elClasses: [
|
|
62
65
|
'fc-list-event',
|
|
63
|
-
|
|
64
|
-
], defaultGenerator: () => renderEventInnerContent(
|
|
65
|
-
buildTimeContent(
|
|
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),
|
|
66
69
|
preact_cjs.createElement("td", { "aria-hidden": true, className: "fc-list-event-dot-cell" },
|
|
67
70
|
preact_cjs.createElement("span", { className: "fc-list-event-dot", style: {
|
|
68
71
|
borderColor: eventContentArg.borderColor || eventContentArg.backgroundColor,
|
|
@@ -70,33 +73,33 @@ class ListViewEventRow extends internal_cjs.BaseComponent {
|
|
|
70
73
|
preact_cjs.createElement(InnerContent, { elTag: "td", elClasses: ['fc-list-event-title'], elAttrs: { headers: `${eventHeaderId} ${dateHeaderId}` } })))));
|
|
71
74
|
}
|
|
72
75
|
}
|
|
73
|
-
function renderEventInnerContent(
|
|
74
|
-
let interactiveAttrs = internal_cjs.
|
|
75
|
-
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));
|
|
76
79
|
}
|
|
77
|
-
function buildTimeContent(
|
|
80
|
+
function buildTimeContent(eventRange, isStart, isEnd, segStart, segEnd, timeFormat, context, timeHeaderId, dateHeaderId) {
|
|
78
81
|
let { options } = context;
|
|
79
82
|
if (options.displayEventTime !== false) {
|
|
80
|
-
let eventDef =
|
|
81
|
-
let eventInstance =
|
|
83
|
+
let eventDef = eventRange.def;
|
|
84
|
+
let eventInstance = eventRange.instance;
|
|
82
85
|
let doAllDay = false;
|
|
83
86
|
let timeText;
|
|
84
87
|
if (eventDef.allDay) {
|
|
85
88
|
doAllDay = true;
|
|
86
89
|
}
|
|
87
|
-
else if (internal_cjs.isMultiDayRange(
|
|
88
|
-
if (
|
|
89
|
-
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);
|
|
90
93
|
}
|
|
91
|
-
else if (
|
|
92
|
-
timeText = internal_cjs.
|
|
94
|
+
else if (isEnd) {
|
|
95
|
+
timeText = internal_cjs.buildEventRangeTimeText(eventRange, timeFormat, context, null, null, segStart, eventInstance.range.end);
|
|
93
96
|
}
|
|
94
97
|
else {
|
|
95
98
|
doAllDay = true;
|
|
96
99
|
}
|
|
97
100
|
}
|
|
98
101
|
else {
|
|
99
|
-
timeText = internal_cjs.
|
|
102
|
+
timeText = internal_cjs.buildEventRangeTimeText(eventRange, timeFormat, context, null, null, segStart, segEnd);
|
|
100
103
|
}
|
|
101
104
|
if (doAllDay) {
|
|
102
105
|
let renderProps = {
|
|
@@ -178,7 +181,7 @@ class ListView extends internal_cjs.DateComponent {
|
|
|
178
181
|
innerNodes.push(preact_cjs.createElement(ListViewHeaderRow, { key: dayStr, forPrint: this.props.forPrint, cellId: dateHeaderId, dayDate: dayDates[dayIndex], todayRange: todayRange }));
|
|
179
182
|
daySegs = internal_cjs.sortEventSegs(daySegs, options.eventOrder);
|
|
180
183
|
for (let seg of daySegs) {
|
|
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.
|
|
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))));
|
|
182
185
|
}
|
|
183
186
|
}
|
|
184
187
|
}
|
|
@@ -214,7 +217,6 @@ class ListView extends internal_cjs.DateComponent {
|
|
|
214
217
|
segRange = internal_cjs.intersectRanges(range, dayRanges[dayIndex]);
|
|
215
218
|
if (segRange) {
|
|
216
219
|
seg = {
|
|
217
|
-
component: this,
|
|
218
220
|
eventRange,
|
|
219
221
|
start: segRange.start,
|
|
220
222
|
end: segRange.end,
|
|
@@ -269,7 +271,4 @@ function groupSegsByDay(segs) {
|
|
|
269
271
|
return segsByDay;
|
|
270
272
|
}
|
|
271
273
|
|
|
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}";
|
|
273
|
-
internal_cjs.injectStyles(css_248z);
|
|
274
|
-
|
|
275
274
|
exports.ListView = ListView;
|
package/internal.js
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
import { BaseComponent, getUniqueDomId, getStickyHeaderDates, 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);
|
|
@@ -52,13 +55,13 @@ class ListViewEventRow extends BaseComponent {
|
|
|
52
55
|
render() {
|
|
53
56
|
let { props, context } = this;
|
|
54
57
|
let { options } = context;
|
|
55
|
-
let {
|
|
58
|
+
let { eventRange, timeHeaderId, eventHeaderId, dateHeaderId } = props;
|
|
56
59
|
let timeFormat = options.eventTimeFormat || DEFAULT_TIME_FORMAT;
|
|
57
60
|
return (createElement(EventContainer, Object.assign({}, props, { elTag: "tr", elClasses: [
|
|
58
61
|
'fc-list-event',
|
|
59
|
-
|
|
60
|
-
], defaultGenerator: () => renderEventInnerContent(
|
|
61
|
-
buildTimeContent(
|
|
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),
|
|
62
65
|
createElement("td", { "aria-hidden": true, className: "fc-list-event-dot-cell" },
|
|
63
66
|
createElement("span", { className: "fc-list-event-dot", style: {
|
|
64
67
|
borderColor: eventContentArg.borderColor || eventContentArg.backgroundColor,
|
|
@@ -66,33 +69,33 @@ class ListViewEventRow extends BaseComponent {
|
|
|
66
69
|
createElement(InnerContent, { elTag: "td", elClasses: ['fc-list-event-title'], elAttrs: { headers: `${eventHeaderId} ${dateHeaderId}` } })))));
|
|
67
70
|
}
|
|
68
71
|
}
|
|
69
|
-
function renderEventInnerContent(
|
|
70
|
-
let interactiveAttrs =
|
|
71
|
-
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));
|
|
72
75
|
}
|
|
73
|
-
function buildTimeContent(
|
|
76
|
+
function buildTimeContent(eventRange, isStart, isEnd, segStart, segEnd, timeFormat, context, timeHeaderId, dateHeaderId) {
|
|
74
77
|
let { options } = context;
|
|
75
78
|
if (options.displayEventTime !== false) {
|
|
76
|
-
let eventDef =
|
|
77
|
-
let eventInstance =
|
|
79
|
+
let eventDef = eventRange.def;
|
|
80
|
+
let eventInstance = eventRange.instance;
|
|
78
81
|
let doAllDay = false;
|
|
79
82
|
let timeText;
|
|
80
83
|
if (eventDef.allDay) {
|
|
81
84
|
doAllDay = true;
|
|
82
85
|
}
|
|
83
|
-
else if (isMultiDayRange(
|
|
84
|
-
if (
|
|
85
|
-
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);
|
|
86
89
|
}
|
|
87
|
-
else if (
|
|
88
|
-
timeText =
|
|
90
|
+
else if (isEnd) {
|
|
91
|
+
timeText = buildEventRangeTimeText(eventRange, timeFormat, context, null, null, segStart, eventInstance.range.end);
|
|
89
92
|
}
|
|
90
93
|
else {
|
|
91
94
|
doAllDay = true;
|
|
92
95
|
}
|
|
93
96
|
}
|
|
94
97
|
else {
|
|
95
|
-
timeText =
|
|
98
|
+
timeText = buildEventRangeTimeText(eventRange, timeFormat, context, null, null, segStart, segEnd);
|
|
96
99
|
}
|
|
97
100
|
if (doAllDay) {
|
|
98
101
|
let renderProps = {
|
|
@@ -174,7 +177,7 @@ class ListView extends DateComponent {
|
|
|
174
177
|
innerNodes.push(createElement(ListViewHeaderRow, { key: dayStr, forPrint: this.props.forPrint, cellId: dateHeaderId, dayDate: dayDates[dayIndex], todayRange: todayRange }));
|
|
175
178
|
daySegs = sortEventSegs(daySegs, options.eventOrder);
|
|
176
179
|
for (let seg of daySegs) {
|
|
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 },
|
|
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))));
|
|
178
181
|
}
|
|
179
182
|
}
|
|
180
183
|
}
|
|
@@ -210,7 +213,6 @@ class ListView extends DateComponent {
|
|
|
210
213
|
segRange = intersectRanges(range, dayRanges[dayIndex]);
|
|
211
214
|
if (segRange) {
|
|
212
215
|
seg = {
|
|
213
|
-
component: this,
|
|
214
216
|
eventRange,
|
|
215
217
|
start: segRange.start,
|
|
216
218
|
end: segRange.end,
|
|
@@ -265,7 +267,4 @@ function groupSegsByDay(segs) {
|
|
|
265
267
|
return segsByDay;
|
|
266
268
|
}
|
|
267
269
|
|
|
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}";
|
|
269
|
-
injectStyles(css_248z);
|
|
270
|
-
|
|
271
270
|
export { ListView };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fullcalendar/list",
|
|
3
|
-
"version": "7.0.0-beta.
|
|
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": "7.0.0-beta.
|
|
15
|
+
"@fullcalendar/core": "7.0.0-beta.1"
|
|
16
16
|
},
|
|
17
17
|
"type": "module",
|
|
18
18
|
"bugs": "https://fullcalendar.io/reporting-bugs",
|