@fullcalendar/list 7.0.0-beta.3 → 7.0.0-beta.5

package/LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Adam Shaw
+Copyright (c) 2025 Adam Shaw
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

package/README.md

@@ -18,10 +18,15 @@ Instantiate a Calendar with the necessary plugin:
 ```js
 import { Calendar } from '@fullcalendar/core'
 import listPlugin from '@fullcalendar/list'
+import classicThemePlugin from '@fullcalendar/theme-classic'
+
+import '@fullcalendar/core/skeleton.css'
+import '@fullcalendar/theme-classic/theme.css'
+import '@fullcalendar/theme-classic/palette.css'
 
 const calendarEl = document.getElementById('calendar')
 const calendar = new Calendar(calendarEl, {
-  plugins: [listPlugin],
+  plugins: [listPlugin, classicThemePlugin],
   initialView: 'listWeek',
   events: [
     { title: 'Meeting', start: new Date() }

package/cjs/index.cjs

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@fullcalendar/core');
+var internalCommon = require('./internal.cjs');
+var internal = require('@fullcalendar/core/internal');
+require('@fullcalendar/core/internal-classnames');
+require('@fullcalendar/core/preact');
+
+const OPTION_REFINERS = {
+    listDaysClass: internal.identity,
+    listDayClass: internal.identity,
+    listDayFormat: createFalsableFormatter,
+    listDaySideFormat: createFalsableFormatter,
+    listDayHeaderDidMount: internal.identity,
+    listDayHeaderWillUnmount: internal.identity,
+    listDayHeaderClass: internal.identity,
+    listDayHeaderInnerClass: internal.identity,
+    listDayHeaderContent: internal.identity,
+    listDayEventsClass: internal.identity,
+    noEventsClass: internal.identity,
+    noEventsInnerClass: internal.identity,
+    noEventsContent: internal.identity,
+    noEventsDidMount: internal.identity,
+    noEventsWillUnmount: internal.identity,
+    // noEventsText is defined in base options
+};
+function createFalsableFormatter(input) {
+    return input === false ? null : internal.createFormatter(input);
+}
+
+var index = core.createPlugin({
+    name: '@fullcalendar/list',
+    optionRefiners: OPTION_REFINERS,
+    views: {
+        list: {
+            component: internalCommon.ListView,
+            buttonTextKey: 'listText', // what to lookup in locale files
+        },
+        listDay: {
+            type: 'list',
+            duration: { days: 1 },
+        },
+        listWeek: {
+            type: 'list',
+            duration: { weeks: 1 },
+        },
+        listMonth: {
+            type: 'list',
+            duration: { month: 1 },
+        },
+        listYear: {
+            type: 'list',
+            duration: { year: 1 },
+        },
+    },
+});
+
+exports["default"] = index;

package/cjs/internal.cjs

@@ -0,0 +1,228 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@fullcalendar/core');
+var internal = require('@fullcalendar/core/internal');
+var classNames = require('@fullcalendar/core/internal-classnames');
+var preact = require('@fullcalendar/core/preact');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+
+class ListDayHeaderInner extends internal.BaseComponent {
+    render() {
+        const { props, context } = this;
+        const { options } = context;
+        const [text, textParts] = context.dateEnv.format(props.dayDate, props.dayFormat);
+        const hasNavLink = options.navLinks;
+        const renderProps = Object.assign(Object.assign({}, props.dateMeta), { view: context.viewApi, text,
+            textParts,
+            get dayNumberText() { return internal.findDayNumberText(textParts); },
+            hasNavLink, level: props.level });
+        const navLinkAttrs = hasNavLink
+            ? internal.buildNavLinkAttrs(this.context, props.dayDate, undefined, text, this.props.isTabbable)
+            : {};
+        return (preact.createElement(internal.ContentContainer, { tag: "div", attrs: navLinkAttrs, renderProps: renderProps, generatorName: "listDayHeaderContent", customGenerator: options.listDayHeaderContent, defaultGenerator: internal.renderText, classNameGenerator: options.listDayHeaderInnerClass }));
+    }
+}
+
+class ListDayHeader extends internal.BaseComponent {
+    render() {
+        var _a, _b;
+        let { options, viewApi, viewSpec } = this.context;
+        let { dayDate, dateMeta } = this.props;
+        let stickyHeaderDates = !this.props.forPrint;
+        const listDayFormat = (_a = options.listDayFormat) !== null && _a !== void 0 ? _a : createDefaultListDayFormat(viewSpec);
+        const listDaySideFormat = (_b = options.listDaySideFormat) !== null && _b !== void 0 ? _b : createDefaultListDaySideFormat(viewSpec);
+        let renderProps = Object.assign(Object.assign({}, dateMeta), { view: viewApi });
+        return (preact.createElement(internal.ContentContainer, { tag: "div", attrs: Object.assign({ 'data-date': internal.formatDayString(dayDate) }, (dateMeta.isToday ? { 'aria-current': 'date' } : {})), className: stickyHeaderDates ? classNames__default["default"].stickyT : '', renderProps: renderProps, generatorName: undefined, classNameGenerator: options.listDayHeaderClass, didMount: options.listDayHeaderDidMount, willUnmount: options.listDayHeaderWillUnmount }, () => (preact.createElement(preact.Fragment, null,
+            Boolean(listDayFormat) && (preact.createElement(ListDayHeaderInner, { dayDate: dayDate, dayFormat: listDayFormat, isTabbable: true, dateMeta: dateMeta, level: 0 })),
+            Boolean(listDaySideFormat) && (preact.createElement(ListDayHeaderInner, { dayDate: dayDate, dayFormat: listDaySideFormat, isTabbable: false, dateMeta: dateMeta, level: 1 }))))));
+    }
+}
+function createDefaultListDayFormat({ durationUnit, singleUnit }) {
+    if (singleUnit === 'day') {
+        return internal.WEEKDAY_ONLY_FORMAT;
+    }
+    else if (durationUnit === 'day' || singleUnit === 'week') {
+        return internal.WEEKDAY_ONLY_FORMAT;
+    }
+    else {
+        return internal.FULL_DATE_FORMAT;
+    }
+}
+function createDefaultListDaySideFormat({ durationUnit, singleUnit }) {
+    if (singleUnit === 'day') ;
+    else if (durationUnit === 'day' || singleUnit === 'week') {
+        return internal.FULL_DATE_FORMAT;
+    }
+    else {
+        return internal.WEEKDAY_ONLY_FORMAT;
+    }
+}
+
+const DEFAULT_TIME_FORMAT = internal.createFormatter({
+    hour: 'numeric',
+    minute: '2-digit',
+    meridiem: 'short',
+});
+class ListEvent extends internal.BaseComponent {
+    render() {
+        let { props, context } = this;
+        let { eventRange } = props;
+        let forcedTimeText = (eventRange.def.allDay || (!props.isStart && !props.isEnd))
+            ? context.options.allDayText
+            : undefined;
+        return (preact.createElement(internal.StandardEvent, Object.assign({}, props, { attrs: {
+                role: 'listitem',
+            }, forcedTimeText: forcedTimeText, defaultTimeFormat: DEFAULT_TIME_FORMAT, disableDragging: true, disableResizing: true, disableZindexes // because conflicts with sticky list headers
+            : true, display: 'list-item' })));
+    }
+}
+
+class ListDay extends internal.BaseComponent {
+    constructor() {
+        super(...arguments);
+        // memo
+        this.getDateMeta = internal.memoize(internal.getDateMeta);
+        this.sortEventSegs = internal.memoize(internal.sortEventSegs);
+    }
+    render() {
+        const { props, context } = this;
+        const { nowDate, todayRange } = props;
+        const { options } = context;
+        const dateMeta = this.getDateMeta(props.dayDate, context.dateEnv, undefined, todayRange);
+        const segs = this.sortEventSegs(props.segs, options.eventOrder);
+        const fullDateStr = internal.buildDateStr(this.context, props.dayDate);
+        return (preact.createElement("div", { role: 'listitem', "aria-label": fullDateStr, className: internal.generateClassName(options.listDayClass, Object.assign(Object.assign({}, dateMeta), { view: context.viewApi })) },
+            preact.createElement(ListDayHeader, { dayDate: props.dayDate, dateMeta: dateMeta, forPrint: props.forPrint }),
+            preact.createElement("div", { role: 'list', "aria-label": options.eventsHint, className: core.joinClassNames(internal.generateClassName(options.listDayEventsClass, dateMeta), classNames__default["default"].flexCol) }, segs.map((seg) => {
+                const key = internal.getEventKey(seg);
+                return (preact.createElement(ListEvent, Object.assign({ key: key, eventRange: seg.eventRange, slicedStart: seg.slicedStart, slicedEnd: seg.slicedEnd, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: false, isResizing: false, isMirror: false, isSelected: false }, internal.getEventRangeMeta(seg.eventRange, todayRange, nowDate))));
+            }))));
+    }
+}
+
+/*
+Responsible for the scroller, and forwarding event-related actions into the "grid".
+*/
+class ListView extends internal.DateComponent {
+    constructor() {
+        super(...arguments);
+        // memo
+        this.computeDateVars = internal.memoize(computeDateVars);
+        this.eventStoreToSegs = internal.memoize(this._eventStoreToSegs);
+        this.setRootEl = (rootEl) => {
+            if (rootEl) {
+                this.context.registerInteractiveComponent(this, {
+                    el: rootEl,
+                    disableHits: true, // HACK to not do date-clicking/selecting
+                });
+            }
+            else {
+                this.context.unregisterInteractiveComponent(this);
+            }
+        };
+    }
+    render() {
+        let { props, context } = this;
+        let { options } = context;
+        let { dayDates, dayRanges } = this.computeDateVars(props.dateProfile);
+        let eventSegs = this.eventStoreToSegs(props.eventStore, props.eventUiBases, dayRanges);
+        let verticalScrolling = !props.forPrint && !internal.getIsHeightAuto(options);
+        return (preact.createElement(internal.ViewContainer, { viewSpec: context.viewSpec, className: core.joinClassNames(props.className, classNames__default["default"].flexCol), elRef: this.setRootEl, borderlessX: props.borderlessX, borderlessTop: props.borderlessTop, borderlessBottom: props.borderlessBottom, noEdgeEffects: props.noEdgeEffects }, eventSegs.length ? (preact.createElement(internal.Scroller // TODO: don't need heavyweight component
+        , { vertical: verticalScrolling, className: core.joinClassNames(classNames__default["default"].flexCol, verticalScrolling ? classNames__default["default"].liquid : '') }, this.renderSegList(eventSegs, dayDates))) : this.renderEmptyMessage()));
+    }
+    renderEmptyMessage() {
+        let { options, viewApi } = this.context;
+        let renderProps = {
+            text: options.noEventsText,
+            view: viewApi,
+        };
+        return (preact.createElement(internal.ContentContainer, { tag: "div", attrs: {
+                role: 'status', // does a polite announcement
+            }, renderProps: renderProps, generatorName: "noEventsContent", customGenerator: options.noEventsContent, defaultGenerator: renderNoEventsInner, classNameGenerator: options.noEventsClass, className: classNames__default["default"].grow, didMount: options.noEventsDidMount, willUnmount: options.noEventsWillUnmount }, (InnerContent) => (preact.createElement(InnerContent, { tag: "div", className: internal.generateClassName(options.noEventsInnerClass, renderProps) }))));
+    }
+    renderSegList(allSegs, dayDates) {
+        let { options } = this.context;
+        let segsByDay = groupSegsByDay(allSegs); // sparse array
+        return (preact.createElement("div", { role: "list", "aria-labelledby": this.props.labelId, "aria-label": this.props.labelStr, className: core.joinClassNames(classNames__default["default"].flexCol, internal.joinArrayishClassNames(options.listDaysClass)) },
+            preact.createElement(internal.NowTimer, { unit: "day" }, (nowDate, todayRange) => {
+                const dayNodes = [];
+                for (let dayIndex = 0; dayIndex < segsByDay.length; dayIndex += 1) {
+                    let daySegs = segsByDay[dayIndex];
+                    if (daySegs) { // sparse array, so might be undefined
+                        const dayDate = dayDates[dayIndex];
+                        const key = internal.formatDayString(dayDate);
+                        dayNodes.push(preact.createElement(ListDay, { key: key, dayDate: dayDate, nowDate: nowDate, todayRange: todayRange, segs: daySegs, forPrint: this.props.forPrint }));
+                    }
+                }
+                return (preact.createElement(preact.Fragment, null, dayNodes));
+            })));
+    }
+    _eventStoreToSegs(eventStore, eventUiBases, dayRanges) {
+        return this.eventRangesToSegs(internal.sliceEventStore(eventStore, eventUiBases, 
+        // HACKY to reference internal state...
+        this.props.dateProfile.activeRange, this.context.options.nextDayThreshold).fg, dayRanges);
+    }
+    eventRangesToSegs(fullDayEventRanges, dayRanges) {
+        let segs = [];
+        for (let fullDayEventRange of fullDayEventRanges) {
+            segs.push(...this.eventRangeToSegs(fullDayEventRange, dayRanges));
+        }
+        return segs;
+    }
+    eventRangeToSegs(fullDayEventRange, dayRanges) {
+        let fullDayRange = fullDayEventRange.range;
+        let dayIndex;
+        let segs = [];
+        for (dayIndex = 0; dayIndex < dayRanges.length; dayIndex += 1) {
+            const slicedFullDayRange = internal.intersectRanges(fullDayRange, dayRanges[dayIndex]);
+            if (slicedFullDayRange) {
+                segs.push({
+                    eventRange: fullDayEventRange,
+                    slicedStart: slicedFullDayRange.start,
+                    slicedEnd: slicedFullDayRange.end,
+                    isStart: fullDayEventRange.isStart && fullDayRange.start.valueOf() === slicedFullDayRange.start.valueOf(),
+                    isEnd: fullDayEventRange.isEnd && fullDayRange.end.valueOf() === slicedFullDayRange.end.valueOf(),
+                    dayIndex,
+                });
+            }
+        }
+        return segs;
+    }
+}
+function renderNoEventsInner(renderProps) {
+    return renderProps.text;
+}
+function computeDateVars(dateProfile) {
+    let dayStart = internal.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.addDays(dayStart, 1),
+        });
+        dayStart = internal.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;
+}
+
+exports.ListView = ListView;

package/esm/index.d.ts

@@ -0,0 +1,54 @@
+import { ViewApi, ClassNameGenerator, FormatterInput, PluginDef } from '@fullcalendar/core';
+import { DateMeta, MountData, RawOptionsFromRefiners, RefinedOptionsFromRefiners, Identity, DidMountHandler, WillUnmountHandler, CustomContentGenerator, DateFormatter } from '@fullcalendar/core/internal';
+import { N as NoEventsData, a as NoEventsMountData } from './internal-common.js';
+export { N as NoEventsData, a as NoEventsMountData } from './internal-common.js';
+import '@fullcalendar/core/preact';
+
+interface ListDayData extends DateMeta {
+    view: ViewApi;
+}
+interface ListDayHeaderData extends ListDayData {
+}
+type ListDayHeaderMountData = MountData<ListDayHeaderData>;
+interface ListDayHeaderInnerData extends ListDayData {
+    text: string;
+    textParts: Intl.DateTimeFormatPart[];
+    dayNumberText: string;
+    hasNavLink: boolean;
+    level: number;
+}
+
+declare const OPTION_REFINERS: {
+    listDaysClass: Identity<string>;
+    listDayClass: Identity<ClassNameGenerator<ListDayData>>;
+    listDayFormat: typeof createFalsableFormatter;
+    listDaySideFormat: typeof createFalsableFormatter;
+    listDayHeaderDidMount: Identity<DidMountHandler<ListDayHeaderMountData>>;
+    listDayHeaderWillUnmount: Identity<WillUnmountHandler<ListDayHeaderMountData>>;
+    listDayHeaderClass: Identity<ClassNameGenerator<ListDayHeaderData>>;
+    listDayHeaderInnerClass: Identity<ClassNameGenerator<ListDayHeaderInnerData>>;
+    listDayHeaderContent: Identity<CustomContentGenerator<ListDayHeaderInnerData>>;
+    listDayEventsClass: Identity<ClassNameGenerator<ListDayData>>;
+    noEventsClass: Identity<ClassNameGenerator<NoEventsData>>;
+    noEventsInnerClass: Identity<ClassNameGenerator<NoEventsData>>;
+    noEventsContent: Identity<CustomContentGenerator<NoEventsData>>;
+    noEventsDidMount: Identity<DidMountHandler<NoEventsMountData>>;
+    noEventsWillUnmount: Identity<WillUnmountHandler<NoEventsMountData>>;
+};
+type ListOptionRefiners = typeof OPTION_REFINERS;
+type ListOptions = RawOptionsFromRefiners<ListOptionRefiners>;
+type ListOptionsRefined = RefinedOptionsFromRefiners<ListOptionRefiners>;
+declare function createFalsableFormatter(input: FormatterInput | false): DateFormatter;
+
+declare module '@fullcalendar/core/internal' {
+    interface BaseOptions extends ListOptions {
+    }
+    interface BaseOptionsRefined extends ListOptionsRefined {
+    }
+}
+//# sourceMappingURL=ambient.d.ts.map
+
+declare const _default: PluginDef;
+//# sourceMappingURL=index.d.ts.map
+
+export { ListDayData, ListDayHeaderData, ListDayHeaderInnerData, ListDayHeaderMountData, ListOptions, _default as default };

package/{index.js → esm/index.js}

@@ -1,12 +1,22 @@
-import { createPlugin } from '@fullcalendar/core/index.js';
+import { createPlugin } from '@fullcalendar/core';
 import { ListView } from './internal.js';
-import { identity, createFormatter } from '@fullcalendar/core/internal.js';
-import '@fullcalendar/core/preact.js';
+import { identity, createFormatter } from '@fullcalendar/core/internal';
+import '@fullcalendar/core/internal-classnames';
+import '@fullcalendar/core/preact';
 
 const OPTION_REFINERS = {
+    listDaysClass: identity,
+    listDayClass: identity,
     listDayFormat: createFalsableFormatter,
     listDaySideFormat: createFalsableFormatter,
-    noEventsClassNames: identity,
+    listDayHeaderDidMount: identity,
+    listDayHeaderWillUnmount: identity,
+    listDayHeaderClass: identity,
+    listDayHeaderInnerClass: identity,
+    listDayHeaderContent: identity,
+    listDayEventsClass: identity,
+    noEventsClass: identity,
+    noEventsInnerClass: identity,
     noEventsContent: identity,
     noEventsDidMount: identity,
     noEventsWillUnmount: identity,
@@ -22,29 +32,23 @@ var index = createPlugin({
     views: {
         list: {
             component: ListView,
-            buttonTextKey: 'list',
-            listDayFormat: { month: 'long', day: 'numeric', year: 'numeric' }, // like "January 1, 2016"
+            buttonTextKey: 'listText', // what to lookup in locale files
         },
         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
         },
     },
 });

package/{internal-common.d.ts → esm/internal-common.d.ts}

@@ -1,5 +1,5 @@
 import { ViewApi, EventRenderRange } from '@fullcalendar/core';
-import { DateMarker, MountArg, DateComponent, ViewProps, EventRangeProps, EventStore, EventUiHash, DateRange } from '@fullcalendar/core/internal';
+import { DateMarker, MountData, DateComponent, ViewProps, EventRangeProps, EventStore, EventUiHash, DateRange } from '@fullcalendar/core/internal';
 import { createElement } from '@fullcalendar/core/preact';
 
 interface ListSeg {
@@ -10,18 +10,14 @@ interface ListSeg {
     dayIndex: number;
 }
 
-interface NoEventsContentArg {
+interface NoEventsData {
     text: string;
     view: ViewApi;
 }
-type NoEventsMountArg = MountArg<NoEventsContentArg>;
-interface ListViewState {
-    timeOuterWidth?: number;
-}
-declare class ListView extends DateComponent<ViewProps, ListViewState> {
+type NoEventsMountData = MountData<NoEventsData>;
+declare class ListView extends DateComponent<ViewProps> {
     private computeDateVars;
     private eventStoreToSegs;
-    private timeWidthRefMap;
     render(): createElement.JSX.Element;
     setRootEl: (rootEl: HTMLElement | null) => void;
     renderEmptyMessage(): createElement.JSX.Element;
@@ -29,7 +25,6 @@ declare class ListView extends DateComponent<ViewProps, ListViewState> {
     _eventStoreToSegs(eventStore: EventStore, eventUiBases: EventUiHash, dayRanges: DateRange[]): (ListSeg & EventRangeProps)[];
     eventRangesToSegs(fullDayEventRanges: EventRenderRange[], dayRanges: DateRange[]): (ListSeg & EventRangeProps)[];
     eventRangeToSegs(fullDayEventRange: EventRenderRange, dayRanges: DateRange[]): (ListSeg & EventRangeProps)[];
-    handleTimeWidths: () => void;
 }
 
-export { ListView as L, NoEventsContentArg as N, NoEventsMountArg as a };
+export { ListView as L, NoEventsData as N, NoEventsMountData as a };