@fullcalendar/list 5.11.3 → 6.0.0-beta.2

package/index.cjs

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index_cjs = require('@fullcalendar/core/index.cjs');
+var internalCommon = require('./internal.cjs');
+var internal_cjs = require('@fullcalendar/core/internal.cjs');
+require('@fullcalendar/core/preact.cjs');
+
+const OPTION_REFINERS = {
+    listDayFormat: createFalsableFormatter,
+    listDaySideFormat: createFalsableFormatter,
+    noEventsClassNames: internal_cjs.identity,
+    noEventsContent: internal_cjs.identity,
+    noEventsDidMount: internal_cjs.identity,
+    noEventsWillUnmount: internal_cjs.identity,
+    // noEventsText is defined in base options
+};
+function createFalsableFormatter(input) {
+    return input === false ? null : internal_cjs.createFormatter(input);
+}
+
+var css_248z = "\n:root {\n  --fc-list-event-dot-width: 10px;\n  --fc-list-event-hover-bg-color: #f5f5f5;\n}\n\n.fc-theme-standard .fc-list {\n    border: 1px solid var(--fc-border-color);\n  }\n\n.fc {\n\n  /* message when no events */\n\n}\n\n.fc .fc-list-empty {\n    background-color: var(--fc-neutral-bg-color);\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center; /* vertically aligns fc-list-empty-inner */\n  }\n\n.fc .fc-list-empty-cushion {\n    margin: 5em 0;\n  }\n.fc {\n\n  /* table within the scroller */\n  /* ---------------------------------------------------------------------------------------------------- */\n\n}\n.fc .fc-list-table {\n    width: 100%;\n    border-style: hidden; /* kill outer border on theme */\n  }\n.fc .fc-list-table tr > * {\n    border-left: 0;\n    border-right: 0;\n  }\n.fc .fc-list-sticky .fc-list-day > * { /* the cells */\n      position: sticky;\n      top: 0;\n      background: var(--fc-page-bg-color); /* for when headers are styled to be transparent and sticky */\n    }\n.fc {\n\n  /* only exists for aria reasons, hide for non-screen-readers */\n\n}\n.fc .fc-list-table thead {\n    position: absolute;\n    left: -10000px;\n  }\n.fc {\n\n  /* the table's border-style:hidden gets confused by hidden thead. force-hide top border of first cell */\n\n}\n.fc .fc-list-table tbody > tr:first-child th {\n    border-top: 0;\n  }\n.fc .fc-list-table th {\n    padding: 0; /* uses an inner-wrapper instead... */\n  }\n.fc .fc-list-table td,\n  .fc .fc-list-day-cushion {\n    padding: 8px 14px;\n  }\n.fc {\n\n\n  /* date heading rows */\n  /* ---------------------------------------------------------------------------------------------------- */\n\n}\n.fc .fc-list-day-cushion:after {\n  content: \"\";\n  clear: both;\n  display: table; /* clear floating */\n    }\n.fc-theme-standard .fc-list-day-cushion {\n    background-color: var(--fc-neutral-bg-color);\n  }\n.fc-direction-ltr .fc-list-day-text,\n.fc-direction-rtl .fc-list-day-side-text {\n  float: left;\n}\n.fc-direction-ltr .fc-list-day-side-text,\n.fc-direction-rtl .fc-list-day-text {\n  float: right;\n}\n/* make the dot closer to the event title */\n.fc-direction-ltr .fc-list-table .fc-list-event-graphic { padding-right: 0 }\n.fc-direction-rtl .fc-list-table .fc-list-event-graphic { padding-left: 0 }\n.fc .fc-list-event.fc-event-forced-url {\n    cursor: pointer; /* whole row will seem clickable */\n  }\n.fc .fc-list-event:hover td {\n    background-color: var(--fc-list-event-hover-bg-color);\n  }\n.fc {\n\n  /* shrink certain cols */\n\n}\n.fc .fc-list-event-graphic,\n  .fc .fc-list-event-time {\n    white-space: nowrap;\n    width: 1px;\n  }\n.fc .fc-list-event-dot {\n    display: inline-block;\n    box-sizing: content-box;\n    width: 0;\n    height: 0;\n    border: calc(var(--fc-list-event-dot-width) / 2) solid var(--fc-event-border-color);\n    border-radius: calc(var(--fc-list-event-dot-width) / 2);\n  }\n.fc {\n\n  /* reset <a> styling */\n\n}\n.fc .fc-list-event-title a {\n    color: inherit;\n    text-decoration: none;\n  }\n.fc {\n\n  /* underline link when hovering over any part of row */\n\n}\n.fc .fc-list-event.fc-event-forced-url:hover a {\n    text-decoration: underline;\n  }\n";
+internal_cjs.injectStyles(css_248z);
+
+var index = index_cjs.createPlugin({
+    name: '@fullcalendar/list',
+    optionRefiners: OPTION_REFINERS,
+    views: {
+        list: {
+            component: internalCommon.ListView,
+            buttonTextKey: 'list',
+            listDayFormat: { month: 'long', day: 'numeric', year: 'numeric' }, // like "January 1, 2016"
+        },
+        listDay: {
+            type: 'list',
+            duration: { days: 1 },
+            listDayFormat: { weekday: 'long' }, // day-of-week is all we need. full date is probably in headerToolbar
+        },
+        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' }, // day-of-week is nice-to-have
+        },
+        listYear: {
+            type: 'list',
+            duration: { year: 1 },
+            listDaySideFormat: { weekday: 'long' }, // day-of-week is nice-to-have
+        },
+    },
+});
+
+exports["default"] = index;

package/index.d.ts

@@ -0,0 +1,27 @@
+import { ClassNamesGenerator, FormatterInput, PluginDef } from '@fullcalendar/core';
+import { Identity, CustomContentGenerator, DidMountHandler, WillUnmountHandler, DateFormatter } from '@fullcalendar/core/internal';
+import { N as NoEventsContentArg, a as NoEventsMountArg } from './internal-common.js';
+export { N as NoEventsContentArg, a as NoEventsMountArg } from './internal-common.js';
+import '@fullcalendar/core/preact';
+
+declare const OPTION_REFINERS: {
+    listDayFormat: typeof createFalsableFormatter;
+    listDaySideFormat: typeof createFalsableFormatter;
+    noEventsClassNames: Identity<ClassNamesGenerator<NoEventsContentArg>>;
+    noEventsContent: Identity<CustomContentGenerator<NoEventsContentArg>>;
+    noEventsDidMount: Identity<DidMountHandler<NoEventsMountArg>>;
+    noEventsWillUnmount: Identity<WillUnmountHandler<NoEventsMountArg>>;
+};
+declare function createFalsableFormatter(input: FormatterInput | false): DateFormatter;
+
+type ExtraOptionRefiners = typeof OPTION_REFINERS;
+declare module '@fullcalendar/core/internal' {
+    interface BaseOptionRefiners extends ExtraOptionRefiners {
+    }
+}
+//# sourceMappingURL=augment.d.ts.map
+
+declare const _default: PluginDef;
+//# sourceMappingURL=index.d.ts.map
+
+export { _default as default };

package/index.global.js

@@ -0,0 +1,332 @@
+/*!
+FullCalendar List View Plugin v6.0.0-beta.2
+Docs & License: https://fullcalendar.io/
+(c) 2022 Adam Shaw
+*/
+FullCalendar.List = (function (exports, internal$1, core, preact) {
+    'use strict';
+
+    class ListViewHeaderRow extends internal$1.BaseComponent {
+        constructor() {
+            super(...arguments);
+            this.state = {
+                textId: internal$1.getUniqueDomId(),
+            };
+        }
+        render() {
+            let { theme, dateEnv, options, viewApi } = this.context;
+            let { cellId, dayDate, todayRange } = this.props;
+            let { textId } = this.state;
+            let dayMeta = internal$1.getDateMeta(dayDate, todayRange);
+            // will ever be falsy?
+            let text = options.listDayFormat ? dateEnv.format(dayDate, options.listDayFormat) : '';
+            // will ever be falsy? also, BAD NAME "alt"
+            let sideText = options.listDaySideFormat ? dateEnv.format(dayDate, options.listDaySideFormat) : '';
+            let renderProps = Object.assign({ date: dateEnv.toDate(dayDate), view: viewApi, textId,
+                text,
+                sideText, navLinkAttrs: internal$1.buildNavLinkAttrs(this.context, dayDate), sideNavLinkAttrs: internal$1.buildNavLinkAttrs(this.context, dayDate, 'day', false) }, dayMeta);
+            // TODO: make a reusable HOC for dayHeader (used in daygrid/timegrid too)
+            return (preact.createElement(internal$1.ContentContainer, { elTag: "tr", elClasses: [
+                    'fc-list-day',
+                    ...internal$1.getDayClassNames(dayMeta, theme),
+                ], elAttrs: {
+                    'data-date': internal$1.formatDayString(dayDate),
+                }, renderProps: renderProps, generatorName: "dayHeaderContent", generator: options.dayHeaderContent || renderInnerContent, classNameGenerator: options.dayHeaderClassNames, didMount: options.dayHeaderDidMount, willUnmount: options.dayHeaderWillUnmount }, (InnerContent) => ( // TODO: force-hide top border based on :first-child
+            preact.createElement("th", { scope: "colgroup", colSpan: 3, id: cellId, "aria-labelledby": textId },
+                preact.createElement(InnerContent, { elTag: "div", elClasses: [
+                        'fc-list-day-cushion',
+                        theme.getClass('tableCellShaded'),
+                    ] })))));
+        }
+    }
+    function renderInnerContent(props) {
+        return (preact.createElement(preact.Fragment, null,
+            props.text && (preact.createElement("a", Object.assign({ id: props.textId, className: "fc-list-day-text" }, props.navLinkAttrs), props.text)),
+            props.sideText && ( /* not keyboard tabbable */preact.createElement("a", Object.assign({ "aria-hidden": true, className: "fc-list-day-side-text" }, props.sideNavLinkAttrs), props.sideText))));
+    }
+
+    const DEFAULT_TIME_FORMAT = internal$1.createFormatter({
+        hour: 'numeric',
+        minute: '2-digit',
+        meridiem: 'short',
+    });
+    class ListViewEventRow extends internal$1.BaseComponent {
+        render() {
+            let { props, context } = this;
+            let { options } = context;
+            let { seg, timeHeaderId, eventHeaderId, dateHeaderId } = props;
+            let timeFormat = options.eventTimeFormat || DEFAULT_TIME_FORMAT;
+            return (preact.createElement(internal$1.EventContainer, Object.assign({}, props, { elTag: "tr", elClasses: [
+                    'fc-list-event',
+                    seg.eventRange.def.url && 'fc-event-forced-url',
+                ], defaultGenerator: () => renderEventInnerContent(seg, context) /* weird */, seg: seg, timeText: "", disableDragging: true, disableResizing: true }), (InnerContent, eventContentArg) => (preact.createElement(preact.Fragment, null,
+                buildTimeContent(seg, timeFormat, context, timeHeaderId, dateHeaderId),
+                preact.createElement("td", { "aria-hidden": true, className: "fc-list-event-graphic" },
+                    preact.createElement("span", { className: "fc-list-event-dot", style: {
+                            borderColor: eventContentArg.borderColor || eventContentArg.backgroundColor,
+                        } })),
+                preact.createElement(InnerContent, { elTag: "td", elClasses: ['fc-list-event-title'], elAttrs: { headers: `${eventHeaderId} ${dateHeaderId}` } })))));
+        }
+    }
+    function renderEventInnerContent(seg, context) {
+        let interactiveAttrs = internal$1.getSegAnchorAttrs(seg, context);
+        return (preact.createElement("a", Object.assign({}, interactiveAttrs), seg.eventRange.def.title));
+    }
+    function buildTimeContent(seg, timeFormat, context, timeHeaderId, dateHeaderId) {
+        let { options } = context;
+        if (options.displayEventTime !== false) {
+            let eventDef = seg.eventRange.def;
+            let eventInstance = seg.eventRange.instance;
+            let doAllDay = false;
+            let timeText;
+            if (eventDef.allDay) {
+                doAllDay = true;
+            }
+            else if (internal$1.isMultiDayRange(seg.eventRange.range)) { // TODO: use (!isStart || !isEnd) instead?
+                if (seg.isStart) {
+                    timeText = internal$1.buildSegTimeText(seg, timeFormat, context, null, null, eventInstance.range.start, seg.end);
+                }
+                else if (seg.isEnd) {
+                    timeText = internal$1.buildSegTimeText(seg, timeFormat, context, null, null, seg.start, eventInstance.range.end);
+                }
+                else {
+                    doAllDay = true;
+                }
+            }
+            else {
+                timeText = internal$1.buildSegTimeText(seg, timeFormat, context);
+            }
+            if (doAllDay) {
+                let renderProps = {
+                    text: context.options.allDayText,
+                    view: context.viewApi,
+                };
+                return (preact.createElement(internal$1.ContentContainer, { elTag: "td", elClasses: ['fc-list-event-time'], elAttrs: {
+                        headers: `${timeHeaderId} ${dateHeaderId}`,
+                    }, renderProps: renderProps, generatorName: "allDayContent", generator: options.allDayContent || renderAllDayInner, classNameGenerator: options.allDayClassNames, didMount: options.allDayDidMount, willUnmount: options.allDayWillUnmount }));
+            }
+            return (preact.createElement("td", { className: "fc-list-event-time" }, timeText));
+        }
+        return null;
+    }
+    function renderAllDayInner(renderProps) {
+        return renderProps.text;
+    }
+
+    /*
+    Responsible for the scroller, and forwarding event-related actions into the "grid".
+    */
+    class ListView extends internal$1.DateComponent {
+        constructor() {
+            super(...arguments);
+            this.computeDateVars = internal$1.memoize(computeDateVars);
+            this.eventStoreToSegs = internal$1.memoize(this._eventStoreToSegs);
+            this.state = {
+                timeHeaderId: internal$1.getUniqueDomId(),
+                eventHeaderId: internal$1.getUniqueDomId(),
+                dateHeaderIdRoot: internal$1.getUniqueDomId(),
+            };
+            this.setRootEl = (rootEl) => {
+                if (rootEl) {
+                    this.context.registerInteractiveComponent(this, {
+                        el: rootEl,
+                    });
+                }
+                else {
+                    this.context.unregisterInteractiveComponent(this);
+                }
+            };
+        }
+        render() {
+            let { props, context } = this;
+            let { dayDates, dayRanges } = this.computeDateVars(props.dateProfile);
+            let eventSegs = this.eventStoreToSegs(props.eventStore, props.eventUiBases, dayRanges);
+            return (preact.createElement(internal$1.ViewContainer, { elRef: this.setRootEl, elClasses: [
+                    'fc-list',
+                    context.theme.getClass('table'),
+                    context.options.stickyHeaderDates !== false ?
+                        'fc-list-sticky' :
+                        '',
+                ], viewSpec: context.viewSpec },
+                preact.createElement(internal$1.Scroller, { liquid: !props.isHeightAuto, overflowX: props.isHeightAuto ? 'visible' : 'hidden', overflowY: props.isHeightAuto ? 'visible' : 'auto' }, eventSegs.length > 0 ?
+                    this.renderSegList(eventSegs, dayDates) :
+                    this.renderEmptyMessage())));
+        }
+        renderEmptyMessage() {
+            let { options, viewApi } = this.context;
+            let renderProps = {
+                text: options.noEventsText,
+                view: viewApi,
+            };
+            return (preact.createElement(internal$1.ContentContainer, { elTag: "div", elClasses: ['fc-list-empty'], renderProps: renderProps, generatorName: "noEventsContent", generator: options.noEventsContent || renderNoEventsInner, classNameGenerator: options.noEventsClassNames, didMount: options.noEventsDidMount, willUnmount: options.noEventsWillUnmount }, (InnerContent) => (preact.createElement(InnerContent, { elTag: "div", elClasses: ['fc-list-empty-cushion'] }))));
+        }
+        renderSegList(allSegs, dayDates) {
+            let { theme, options } = this.context;
+            let { timeHeaderId, eventHeaderId, dateHeaderIdRoot } = this.state;
+            let segsByDay = groupSegsByDay(allSegs); // sparse array
+            return (preact.createElement(internal$1.NowTimer, { unit: "day" }, (nowDate, todayRange) => {
+                let innerNodes = [];
+                for (let dayIndex = 0; dayIndex < segsByDay.length; dayIndex += 1) {
+                    let daySegs = segsByDay[dayIndex];
+                    if (daySegs) { // sparse array, so might be undefined
+                        let dayStr = internal$1.formatDayString(dayDates[dayIndex]);
+                        let dateHeaderId = dateHeaderIdRoot + '-' + dayStr;
+                        // append a day header
+                        innerNodes.push(preact.createElement(ListViewHeaderRow, { key: dayStr, cellId: dateHeaderId, dayDate: dayDates[dayIndex], todayRange: todayRange }));
+                        daySegs = internal$1.sortEventSegs(daySegs, options.eventOrder);
+                        for (let seg of daySegs) {
+                            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))));
+                        }
+                    }
+                }
+                return (preact.createElement("table", { className: 'fc-list-table ' + theme.getClass('table') },
+                    preact.createElement("thead", null,
+                        preact.createElement("tr", null,
+                            preact.createElement("th", { scope: "col", id: timeHeaderId }, options.timeHint),
+                            preact.createElement("th", { scope: "col", "aria-hidden": true }),
+                            preact.createElement("th", { scope: "col", id: eventHeaderId }, options.eventHint))),
+                    preact.createElement("tbody", null, innerNodes)));
+            }));
+        }
+        _eventStoreToSegs(eventStore, eventUiBases, dayRanges) {
+            return this.eventRangesToSegs(internal$1.sliceEventStore(eventStore, eventUiBases, this.props.dateProfile.activeRange, this.context.options.nextDayThreshold).fg, dayRanges);
+        }
+        eventRangesToSegs(eventRanges, dayRanges) {
+            let segs = [];
+            for (let eventRange of eventRanges) {
+                segs.push(...this.eventRangeToSegs(eventRange, dayRanges));
+            }
+            return segs;
+        }
+        eventRangeToSegs(eventRange, dayRanges) {
+            let { dateEnv } = this.context;
+            let { nextDayThreshold } = this.context.options;
+            let range = eventRange.range;
+            let allDay = eventRange.def.allDay;
+            let dayIndex;
+            let segRange;
+            let seg;
+            let segs = [];
+            for (dayIndex = 0; dayIndex < dayRanges.length; dayIndex += 1) {
+                segRange = internal$1.intersectRanges(range, dayRanges[dayIndex]);
+                if (segRange) {
+                    seg = {
+                        component: this,
+                        eventRange,
+                        start: segRange.start,
+                        end: segRange.end,
+                        isStart: eventRange.isStart && segRange.start.valueOf() === range.start.valueOf(),
+                        isEnd: eventRange.isEnd && segRange.end.valueOf() === range.end.valueOf(),
+                        dayIndex,
+                    };
+                    segs.push(seg);
+                    // detect when range won't go fully into the next day,
+                    // and mutate the latest seg to the be the end.
+                    if (!seg.isEnd && !allDay &&
+                        dayIndex + 1 < dayRanges.length &&
+                        range.end <
+                            dateEnv.add(dayRanges[dayIndex + 1].start, nextDayThreshold)) {
+                        seg.end = range.end;
+                        seg.isEnd = true;
+                        break;
+                    }
+                }
+            }
+            return segs;
+        }
+    }
+    function renderNoEventsInner(renderProps) {
+        return renderProps.text;
+    }
+    function computeDateVars(dateProfile) {
+        let dayStart = internal$1.startOfDay(dateProfile.renderRange.start);
+        let viewEnd = dateProfile.renderRange.end;
+        let dayDates = [];
+        let dayRanges = [];
+        while (dayStart < viewEnd) {
+            dayDates.push(dayStart);
+            dayRanges.push({
+                start: dayStart,
+                end: internal$1.addDays(dayStart, 1),
+            });
+            dayStart = internal$1.addDays(dayStart, 1);
+        }
+        return { dayDates, dayRanges };
+    }
+    // Returns a sparse array of arrays, segs grouped by their dayIndex
+    function groupSegsByDay(segs) {
+        let segsByDay = []; // sparse array
+        let i;
+        let seg;
+        for (i = 0; i < segs.length; i += 1) {
+            seg = segs[i];
+            (segsByDay[seg.dayIndex] || (segsByDay[seg.dayIndex] = []))
+                .push(seg);
+        }
+        return segsByDay;
+    }
+
+    const OPTION_REFINERS = {
+        listDayFormat: createFalsableFormatter,
+        listDaySideFormat: createFalsableFormatter,
+        noEventsClassNames: internal$1.identity,
+        noEventsContent: internal$1.identity,
+        noEventsDidMount: internal$1.identity,
+        noEventsWillUnmount: internal$1.identity,
+        // noEventsText is defined in base options
+    };
+    function createFalsableFormatter(input) {
+        return input === false ? null : internal$1.createFormatter(input);
+    }
+
+    var css_248z = "\n:root {\n  --fc-list-event-dot-width: 10px;\n  --fc-list-event-hover-bg-color: #f5f5f5;\n}\n\n.fc-theme-standard .fc-list {\n    border: 1px solid var(--fc-border-color);\n  }\n\n.fc {\n\n  /* message when no events */\n\n}\n\n.fc .fc-list-empty {\n    background-color: var(--fc-neutral-bg-color);\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center; /* vertically aligns fc-list-empty-inner */\n  }\n\n.fc .fc-list-empty-cushion {\n    margin: 5em 0;\n  }\n.fc {\n\n  /* table within the scroller */\n  /* ---------------------------------------------------------------------------------------------------- */\n\n}\n.fc .fc-list-table {\n    width: 100%;\n    border-style: hidden; /* kill outer border on theme */\n  }\n.fc .fc-list-table tr > * {\n    border-left: 0;\n    border-right: 0;\n  }\n.fc .fc-list-sticky .fc-list-day > * { /* the cells */\n      position: sticky;\n      top: 0;\n      background: var(--fc-page-bg-color); /* for when headers are styled to be transparent and sticky */\n    }\n.fc {\n\n  /* only exists for aria reasons, hide for non-screen-readers */\n\n}\n.fc .fc-list-table thead {\n    position: absolute;\n    left: -10000px;\n  }\n.fc {\n\n  /* the table's border-style:hidden gets confused by hidden thead. force-hide top border of first cell */\n\n}\n.fc .fc-list-table tbody > tr:first-child th {\n    border-top: 0;\n  }\n.fc .fc-list-table th {\n    padding: 0; /* uses an inner-wrapper instead... */\n  }\n.fc .fc-list-table td,\n  .fc .fc-list-day-cushion {\n    padding: 8px 14px;\n  }\n.fc {\n\n\n  /* date heading rows */\n  /* ---------------------------------------------------------------------------------------------------- */\n\n}\n.fc .fc-list-day-cushion:after {\n  content: \"\";\n  clear: both;\n  display: table; /* clear floating */\n    }\n.fc-theme-standard .fc-list-day-cushion {\n    background-color: var(--fc-neutral-bg-color);\n  }\n.fc-direction-ltr .fc-list-day-text,\n.fc-direction-rtl .fc-list-day-side-text {\n  float: left;\n}\n.fc-direction-ltr .fc-list-day-side-text,\n.fc-direction-rtl .fc-list-day-text {\n  float: right;\n}\n/* make the dot closer to the event title */\n.fc-direction-ltr .fc-list-table .fc-list-event-graphic { padding-right: 0 }\n.fc-direction-rtl .fc-list-table .fc-list-event-graphic { padding-left: 0 }\n.fc .fc-list-event.fc-event-forced-url {\n    cursor: pointer; /* whole row will seem clickable */\n  }\n.fc .fc-list-event:hover td {\n    background-color: var(--fc-list-event-hover-bg-color);\n  }\n.fc {\n\n  /* shrink certain cols */\n\n}\n.fc .fc-list-event-graphic,\n  .fc .fc-list-event-time {\n    white-space: nowrap;\n    width: 1px;\n  }\n.fc .fc-list-event-dot {\n    display: inline-block;\n    box-sizing: content-box;\n    width: 0;\n    height: 0;\n    border: calc(var(--fc-list-event-dot-width) / 2) solid var(--fc-event-border-color);\n    border-radius: calc(var(--fc-list-event-dot-width) / 2);\n  }\n.fc {\n\n  /* reset <a> styling */\n\n}\n.fc .fc-list-event-title a {\n    color: inherit;\n    text-decoration: none;\n  }\n.fc {\n\n  /* underline link when hovering over any part of row */\n\n}\n.fc .fc-list-event.fc-event-forced-url:hover a {\n    text-decoration: underline;\n  }\n";
+    internal$1.injectStyles(css_248z);
+
+    var plugin = core.createPlugin({
+        name: '@fullcalendar/list',
+        optionRefiners: OPTION_REFINERS,
+        views: {
+            list: {
+                component: ListView,
+                buttonTextKey: 'list',
+                listDayFormat: { month: 'long', day: 'numeric', year: 'numeric' }, // like "January 1, 2016"
+            },
+            listDay: {
+                type: 'list',
+                duration: { days: 1 },
+                listDayFormat: { weekday: 'long' }, // day-of-week is all we need. full date is probably in headerToolbar
+            },
+            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' }, // day-of-week is nice-to-have
+            },
+            listYear: {
+                type: 'list',
+                duration: { year: 1 },
+                listDaySideFormat: { weekday: 'long' }, // day-of-week is nice-to-have
+            },
+        },
+    });
+
+    var internal = {
+        __proto__: null,
+        ListView: ListView
+    };
+
+    internal$1.globalPlugins.push(plugin);
+
+    exports.Internal = internal;
+    exports["default"] = plugin;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+    return exports;
+
+})({}, FullCalendar.Internal, FullCalendar, FullCalendar.Preact);

package/index.global.min.js

@@ -0,0 +1,6 @@
+/*!
+FullCalendar List View Plugin v6.0.0-beta.2
+Docs & License: https://fullcalendar.io/
+(c) 2022 Adam Shaw
+*/
+FullCalendar.List=function(e,t,n,a){"use strict";class r extends t.BaseComponent{constructor(){super(...arguments),this.state={textId:t.getUniqueDomId()}}render(){let{theme:e,dateEnv:n,options:r,viewApi:s}=this.context,{cellId:l,dayDate:o,todayRange:d}=this.props,{textId:c}=this.state,f=t.getDateMeta(o,d),g=r.listDayFormat?n.format(o,r.listDayFormat):"",u=r.listDaySideFormat?n.format(o,r.listDaySideFormat):"",m=Object.assign({date:n.toDate(o),view:s,textId:c,text:g,sideText:u,navLinkAttrs:t.buildNavLinkAttrs(this.context,o),sideNavLinkAttrs:t.buildNavLinkAttrs(this.context,o,"day",!1)},f);return a.createElement(t.ContentContainer,{elTag:"tr",elClasses:["fc-list-day",...t.getDayClassNames(f,e)],elAttrs:{"data-date":t.formatDayString(o)},renderProps:m,generatorName:"dayHeaderContent",generator:r.dayHeaderContent||i,classNameGenerator:r.dayHeaderClassNames,didMount:r.dayHeaderDidMount,willUnmount:r.dayHeaderWillUnmount},t=>a.createElement("th",{scope:"colgroup",colSpan:3,id:l,"aria-labelledby":c},a.createElement(t,{elTag:"div",elClasses:["fc-list-day-cushion",e.getClass("tableCellShaded")]})))}}function i(e){return a.createElement(a.Fragment,null,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 s=t.createFormatter({hour:"numeric",minute:"2-digit",meridiem:"short"});class l extends t.BaseComponent{render(){let{props:e,context:n}=this,{options:r}=n,{seg:i,timeHeaderId:l,eventHeaderId:d,dateHeaderId:c}=e,f=r.eventTimeFormat||s;return a.createElement(t.EventContainer,Object.assign({},e,{elTag:"tr",elClasses:["fc-list-event",i.eventRange.def.url&&"fc-event-forced-url"],defaultGenerator:()=>function(e,n){let r=t.getSegAnchorAttrs(e,n);return a.createElement("a",Object.assign({},r),e.eventRange.def.title)}(i,n),seg:i,timeText:"",disableDragging:!0,disableResizing:!0}),(e,r)=>a.createElement(a.Fragment,null,function(e,n,r,i,s){let{options:l}=r;if(!1!==l.displayEventTime){let d,c=e.eventRange.def,f=e.eventRange.instance,g=!1;if(c.allDay?g=!0:t.isMultiDayRange(e.eventRange.range)?e.isStart?d=t.buildSegTimeText(e,n,r,null,null,f.range.start,e.end):e.isEnd?d=t.buildSegTimeText(e,n,r,null,null,e.start,f.range.end):g=!0:d=t.buildSegTimeText(e,n,r),g){let e={text:r.options.allDayText,view:r.viewApi};return a.createElement(t.ContentContainer,{elTag:"td",elClasses:["fc-list-event-time"],elAttrs:{headers:`${i} ${s}`},renderProps:e,generatorName:"allDayContent",generator:l.allDayContent||o,classNameGenerator:l.allDayClassNames,didMount:l.allDayDidMount,willUnmount:l.allDayWillUnmount})}return a.createElement("td",{className:"fc-list-event-time"},d)}return null}(i,f,n,l,c),a.createElement("td",{"aria-hidden":!0,className:"fc-list-event-graphic"},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 t.DateComponent{constructor(){super(...arguments),this.computeDateVars=t.memoize(f),this.eventStoreToSegs=t.memoize(this._eventStoreToSegs),this.state={timeHeaderId:t.getUniqueDomId(),eventHeaderId:t.getUniqueDomId(),dateHeaderIdRoot:t.getUniqueDomId()},this.setRootEl=e=>{e?this.context.registerInteractiveComponent(this,{el:e}):this.context.unregisterInteractiveComponent(this)}}render(){let{props:e,context:n}=this,{dayDates:r,dayRanges:i}=this.computeDateVars(e.dateProfile),s=this.eventStoreToSegs(e.eventStore,e.eventUiBases,i);return a.createElement(t.ViewContainer,{elRef:this.setRootEl,elClasses:["fc-list",n.theme.getClass("table"),!1!==n.options.stickyHeaderDates?"fc-list-sticky":""],viewSpec:n.viewSpec},a.createElement(t.Scroller,{liquid:!e.isHeightAuto,overflowX:e.isHeightAuto?"visible":"hidden",overflowY:e.isHeightAuto?"visible":"auto"},s.length>0?this.renderSegList(s,r):this.renderEmptyMessage()))}renderEmptyMessage(){let{options:e,viewApi:n}=this.context,r={text:e.noEventsText,view:n};return a.createElement(t.ContentContainer,{elTag:"div",elClasses:["fc-list-empty"],renderProps:r,generatorName:"noEventsContent",generator:e.noEventsContent||c,classNameGenerator:e.noEventsClassNames,didMount:e.noEventsDidMount,willUnmount:e.noEventsWillUnmount},e=>a.createElement(e,{elTag:"div",elClasses:["fc-list-empty-cushion"]}))}renderSegList(e,n){let{theme:i,options:s}=this.context,{timeHeaderId:o,eventHeaderId:d,dateHeaderIdRoot:c}=this.state,f=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(t.NowTimer,{unit:"day"},(e,g)=>{let u=[];for(let i=0;i<f.length;i+=1){let m=f[i];if(m){let f=t.formatDayString(n[i]),h=c+"-"+f;u.push(a.createElement(r,{key:f,cellId:h,dayDate:n[i],todayRange:g})),m=t.sortEventSegs(m,s.eventOrder);for(let n of m)u.push(a.createElement(l,Object.assign({key:f+":"+n.eventRange.instance.instanceId,seg:n,isDragging:!1,isResizing:!1,isDateSelecting:!1,isSelected:!1,timeHeaderId:o,eventHeaderId:d,dateHeaderId:h},t.getSegMeta(n,g,e))))}}return a.createElement("table",{className:"fc-list-table "+i.getClass("table")},a.createElement("thead",null,a.createElement("tr",null,a.createElement("th",{scope:"col",id:o},s.timeHint),a.createElement("th",{scope:"col","aria-hidden":!0}),a.createElement("th",{scope:"col",id:d},s.eventHint))),a.createElement("tbody",null,u))})}_eventStoreToSegs(e,n,a){return this.eventRangesToSegs(t.sliceEventStore(e,n,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,n){let a,r,i,{dateEnv:s}=this.context,{nextDayThreshold:l}=this.context.options,o=e.range,d=e.def.allDay,c=[];for(a=0;a<n.length;a+=1)if(r=t.intersectRanges(o,n[a]),r&&(i={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(i),!i.isEnd&&!d&&a+1<n.length&&o.end<s.add(n[a+1].start,l))){i.end=o.end,i.isEnd=!0;break}return c}}function c(e){return e.text}function f(e){let n=t.startOfDay(e.renderRange.start),a=e.renderRange.end,r=[],i=[];for(;n<a;)r.push(n),i.push({start:n,end:t.addDays(n,1)}),n=t.addDays(n,1);return{dayDates:r,dayRanges:i}}const g={listDayFormat:u,listDaySideFormat:u,noEventsClassNames:t.identity,noEventsContent:t.identity,noEventsDidMount:t.identity,noEventsWillUnmount:t.identity};function u(e){return!1===e?null:t.createFormatter(e)}t.injectStyles('\n:root {\n  --fc-list-event-dot-width: 10px;\n  --fc-list-event-hover-bg-color: #f5f5f5;\n}\n\n.fc-theme-standard .fc-list {\n    border: 1px solid var(--fc-border-color);\n  }\n\n.fc {\n\n  /* message when no events */\n\n}\n\n.fc .fc-list-empty {\n    background-color: var(--fc-neutral-bg-color);\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center; /* vertically aligns fc-list-empty-inner */\n  }\n\n.fc .fc-list-empty-cushion {\n    margin: 5em 0;\n  }\n.fc {\n\n  /* table within the scroller */\n  /* ---------------------------------------------------------------------------------------------------- */\n\n}\n.fc .fc-list-table {\n    width: 100%;\n    border-style: hidden; /* kill outer border on theme */\n  }\n.fc .fc-list-table tr > * {\n    border-left: 0;\n    border-right: 0;\n  }\n.fc .fc-list-sticky .fc-list-day > * { /* the cells */\n      position: sticky;\n      top: 0;\n      background: var(--fc-page-bg-color); /* for when headers are styled to be transparent and sticky */\n    }\n.fc {\n\n  /* only exists for aria reasons, hide for non-screen-readers */\n\n}\n.fc .fc-list-table thead {\n    position: absolute;\n    left: -10000px;\n  }\n.fc {\n\n  /* the table\'s border-style:hidden gets confused by hidden thead. force-hide top border of first cell */\n\n}\n.fc .fc-list-table tbody > tr:first-child th {\n    border-top: 0;\n  }\n.fc .fc-list-table th {\n    padding: 0; /* uses an inner-wrapper instead... */\n  }\n.fc .fc-list-table td,\n  .fc .fc-list-day-cushion {\n    padding: 8px 14px;\n  }\n.fc {\n\n\n  /* date heading rows */\n  /* ---------------------------------------------------------------------------------------------------- */\n\n}\n.fc .fc-list-day-cushion:after {\n  content: "";\n  clear: both;\n  display: table; /* clear floating */\n    }\n.fc-theme-standard .fc-list-day-cushion {\n    background-color: var(--fc-neutral-bg-color);\n  }\n.fc-direction-ltr .fc-list-day-text,\n.fc-direction-rtl .fc-list-day-side-text {\n  float: left;\n}\n.fc-direction-ltr .fc-list-day-side-text,\n.fc-direction-rtl .fc-list-day-text {\n  float: right;\n}\n/* make the dot closer to the event title */\n.fc-direction-ltr .fc-list-table .fc-list-event-graphic { padding-right: 0 }\n.fc-direction-rtl .fc-list-table .fc-list-event-graphic { padding-left: 0 }\n.fc .fc-list-event.fc-event-forced-url {\n    cursor: pointer; /* whole row will seem clickable */\n  }\n.fc .fc-list-event:hover td {\n    background-color: var(--fc-list-event-hover-bg-color);\n  }\n.fc {\n\n  /* shrink certain cols */\n\n}\n.fc .fc-list-event-graphic,\n  .fc .fc-list-event-time {\n    white-space: nowrap;\n    width: 1px;\n  }\n.fc .fc-list-event-dot {\n    display: inline-block;\n    box-sizing: content-box;\n    width: 0;\n    height: 0;\n    border: calc(var(--fc-list-event-dot-width) / 2) solid var(--fc-event-border-color);\n    border-radius: calc(var(--fc-list-event-dot-width) / 2);\n  }\n.fc {\n\n  /* reset <a> styling */\n\n}\n.fc .fc-list-event-title a {\n    color: inherit;\n    text-decoration: none;\n  }\n.fc {\n\n  /* underline link when hovering over any part of row */\n\n}\n.fc .fc-list-event.fc-event-forced-url:hover a {\n    text-decoration: underline;\n  }\n');var m=n.createPlugin({name:"@fullcalendar/list",optionRefiners:g,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"}}}}),h={__proto__:null,ListView:d};return t.globalPlugins.push(m),e.Internal=h,e.default=m,Object.defineProperty(e,"__esModule",{value:!0}),e}({},FullCalendar.Internal,FullCalendar,FullCalendar.Preact);

package/index.js

@@ -0,0 +1,55 @@
+import { createPlugin } from '@fullcalendar/core/index.js';
+import { ListView } from './internal.js';
+import { identity, createFormatter, injectStyles } from '@fullcalendar/core/internal.js';
+import '@fullcalendar/core/preact.js';
+
+const OPTION_REFINERS = {
+    listDayFormat: createFalsableFormatter,
+    listDaySideFormat: createFalsableFormatter,
+    noEventsClassNames: identity,
+    noEventsContent: identity,
+    noEventsDidMount: identity,
+    noEventsWillUnmount: identity,
+    // noEventsText is defined in base options
+};
+function createFalsableFormatter(input) {
+    return input === false ? null : createFormatter(input);
+}
+
+var css_248z = "\n:root {\n  --fc-list-event-dot-width: 10px;\n  --fc-list-event-hover-bg-color: #f5f5f5;\n}\n\n.fc-theme-standard .fc-list {\n    border: 1px solid var(--fc-border-color);\n  }\n\n.fc {\n\n  /* message when no events */\n\n}\n\n.fc .fc-list-empty {\n    background-color: var(--fc-neutral-bg-color);\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center; /* vertically aligns fc-list-empty-inner */\n  }\n\n.fc .fc-list-empty-cushion {\n    margin: 5em 0;\n  }\n.fc {\n\n  /* table within the scroller */\n  /* ---------------------------------------------------------------------------------------------------- */\n\n}\n.fc .fc-list-table {\n    width: 100%;\n    border-style: hidden; /* kill outer border on theme */\n  }\n.fc .fc-list-table tr > * {\n    border-left: 0;\n    border-right: 0;\n  }\n.fc .fc-list-sticky .fc-list-day > * { /* the cells */\n      position: sticky;\n      top: 0;\n      background: var(--fc-page-bg-color); /* for when headers are styled to be transparent and sticky */\n    }\n.fc {\n\n  /* only exists for aria reasons, hide for non-screen-readers */\n\n}\n.fc .fc-list-table thead {\n    position: absolute;\n    left: -10000px;\n  }\n.fc {\n\n  /* the table's border-style:hidden gets confused by hidden thead. force-hide top border of first cell */\n\n}\n.fc .fc-list-table tbody > tr:first-child th {\n    border-top: 0;\n  }\n.fc .fc-list-table th {\n    padding: 0; /* uses an inner-wrapper instead... */\n  }\n.fc .fc-list-table td,\n  .fc .fc-list-day-cushion {\n    padding: 8px 14px;\n  }\n.fc {\n\n\n  /* date heading rows */\n  /* ---------------------------------------------------------------------------------------------------- */\n\n}\n.fc .fc-list-day-cushion:after {\n  content: \"\";\n  clear: both;\n  display: table; /* clear floating */\n    }\n.fc-theme-standard .fc-list-day-cushion {\n    background-color: var(--fc-neutral-bg-color);\n  }\n.fc-direction-ltr .fc-list-day-text,\n.fc-direction-rtl .fc-list-day-side-text {\n  float: left;\n}\n.fc-direction-ltr .fc-list-day-side-text,\n.fc-direction-rtl .fc-list-day-text {\n  float: right;\n}\n/* make the dot closer to the event title */\n.fc-direction-ltr .fc-list-table .fc-list-event-graphic { padding-right: 0 }\n.fc-direction-rtl .fc-list-table .fc-list-event-graphic { padding-left: 0 }\n.fc .fc-list-event.fc-event-forced-url {\n    cursor: pointer; /* whole row will seem clickable */\n  }\n.fc .fc-list-event:hover td {\n    background-color: var(--fc-list-event-hover-bg-color);\n  }\n.fc {\n\n  /* shrink certain cols */\n\n}\n.fc .fc-list-event-graphic,\n  .fc .fc-list-event-time {\n    white-space: nowrap;\n    width: 1px;\n  }\n.fc .fc-list-event-dot {\n    display: inline-block;\n    box-sizing: content-box;\n    width: 0;\n    height: 0;\n    border: calc(var(--fc-list-event-dot-width) / 2) solid var(--fc-event-border-color);\n    border-radius: calc(var(--fc-list-event-dot-width) / 2);\n  }\n.fc {\n\n  /* reset <a> styling */\n\n}\n.fc .fc-list-event-title a {\n    color: inherit;\n    text-decoration: none;\n  }\n.fc {\n\n  /* underline link when hovering over any part of row */\n\n}\n.fc .fc-list-event.fc-event-forced-url:hover a {\n    text-decoration: underline;\n  }\n";
+injectStyles(css_248z);
+
+var index = createPlugin({
+    name: '@fullcalendar/list',
+    optionRefiners: OPTION_REFINERS,
+    views: {
+        list: {
+            component: ListView,
+            buttonTextKey: 'list',
+            listDayFormat: { month: 'long', day: 'numeric', year: 'numeric' }, // like "January 1, 2016"
+        },
+        listDay: {
+            type: 'list',
+            duration: { days: 1 },
+            listDayFormat: { weekday: 'long' }, // day-of-week is all we need. full date is probably in headerToolbar
+        },
+        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' }, // day-of-week is nice-to-have
+        },
+        listYear: {
+            type: 'list',
+            duration: { year: 1 },
+            listDaySideFormat: { weekday: 'long' }, // day-of-week is nice-to-have
+        },
+    },
+});
+
+export { index as default };

package/internal-common.d.ts

@@ -0,0 +1,27 @@
+import { ViewApi } from '@fullcalendar/core';
+import { MountArg, DateComponent, ViewProps, Seg, DateMarker, EventStore, EventUiHash, DateRange, EventRenderRange } from '@fullcalendar/core/internal';
+import { createElement } from '@fullcalendar/core/preact';
+
+interface NoEventsContentArg {
+    text: string;
+    view: ViewApi;
+}
+type NoEventsMountArg = MountArg<NoEventsContentArg>;
+declare class ListView extends DateComponent<ViewProps> {
+    private computeDateVars;
+    private eventStoreToSegs;
+    state: {
+        timeHeaderId: string;
+        eventHeaderId: string;
+        dateHeaderIdRoot: string;
+    };
+    render(): createElement.JSX.Element;
+    setRootEl: (rootEl: HTMLElement | null) => void;
+    renderEmptyMessage(): createElement.JSX.Element;
+    renderSegList(allSegs: Seg[], dayDates: DateMarker[]): createElement.JSX.Element;
+    _eventStoreToSegs(eventStore: EventStore, eventUiBases: EventUiHash, dayRanges: DateRange[]): Seg[];
+    eventRangesToSegs(eventRanges: EventRenderRange[], dayRanges: DateRange[]): any[];
+    eventRangeToSegs(eventRange: EventRenderRange, dayRanges: DateRange[]): any[];
+}
+
+export { ListView as L, NoEventsContentArg as N, NoEventsMountArg as a };