react-big-schedule 8.1.0 → 9.0.1

package/dist/calendar/utils.d.ts

@@ -0,0 +1,38 @@
+import type { Dayjs } from 'dayjs';
+import type { LocaleDayjs } from '../types';
+import type { CalendarEvent, CalendarViewName, DateLike, DateRange } from './types';
+/** An event with parsed dates. `end` is exclusive (an all-day event on Mar 3 ends Mar 4 00:00). */
+export interface NormalizedEvent {
+    source: CalendarEvent;
+    id: CalendarEvent['id'];
+    start: Dayjs;
+    end: Dayjs;
+    allDay: boolean;
+}
+export declare const toDayjs: (dayjs: LocaleDayjs, value: DateLike) => Dayjs;
+export declare function normalizeEvent(dayjs: LocaleDayjs, event: CalendarEvent): NormalizedEvent;
+/** Events that overlap [range.start, range.end). */
+export declare function eventsInRange(events: NormalizedEvent[], range: DateRange): NormalizedEvent[];
+export declare function getViewRange(view: CalendarViewName, date: Dayjs, firstDay?: number): DateRange;
+/** Step used by prev/next for a given view. */
+export declare function stepDate(view: CalendarViewName, date: Dayjs, dir: 1 | -1): Dayjs;
+export declare function getViewTitle(view: CalendarViewName, date: Dayjs, range: DateRange): string;
+/** Parse 'HH:mm' (or 'HH:mm:ss') into minutes since midnight. */
+export declare function parseTime(value: string): number;
+export declare const isSameDay: (a: Dayjs, b: Dayjs) => boolean;
+/** Days of a range, optionally dropping weekends. */
+export declare function listDays(range: DateRange, weekends?: boolean): Dayjs[];
+/**
+ * Stack events into columns so overlapping ones sit side by side (time grid) or on separate rows (day grid).
+ * Returns, for each event, its lane index and the number of lanes in its overlap cluster.
+ */
+export declare function layoutLanes<T extends {
+    start: Dayjs;
+    end: Dayjs;
+}>(items: T[]): {
+    item: T;
+    lane: number;
+    lanes: number;
+}[];
+/** Hover-card text for an event: the title, then when it happens (shown by the Calendar's delegated tooltip). */
+export declare function tipText(e: NormalizedEvent): string;

package/dist/calendar/utils.js

@@ -0,0 +1,143 @@
+const DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
+export const toDayjs = (dayjs, value) => dayjs(value);
+export function normalizeEvent(dayjs, event) {
+    const allDay = event.allDay ?? (typeof event.start === 'string' && DATE_ONLY.test(event.start));
+    let start = toDayjs(dayjs, event.start);
+    let end = event.end === undefined ? undefined : toDayjs(dayjs, event.end);
+    if (allDay) {
+        start = start.startOf('day');
+        // all-day end is exclusive; a missing end means a single day
+        end = end ? end.startOf('day') : start.add(1, 'day');
+        if (!end.isAfter(start))
+            end = start.add(1, 'day');
+    }
+    else if (!end?.isAfter(start)) {
+        end = start.add(end ? 0 : 1, 'hour');
+    }
+    return { source: event, id: event.id, start, end, allDay };
+}
+/** Events that overlap [range.start, range.end). */
+export function eventsInRange(events, range) {
+    return events.filter(e => e.start.isBefore(range.end) && e.end.isAfter(range.start));
+}
+export function getViewRange(view, date, firstDay = 0) {
+    const weekStart = (d) => d.subtract((d.day() - firstDay + 7) % 7, 'day').startOf('day');
+    switch (view) {
+        case 'dayGridMonth': {
+            const first = weekStart(date.startOf('month'));
+            const last = weekStart(date.endOf('month')).add(7, 'day');
+            return { start: first, end: last };
+        }
+        case 'dayGridWeek':
+        case 'timeGridWeek':
+        case 'listWeek':
+            return { start: weekStart(date), end: weekStart(date).add(7, 'day') };
+        case 'dayGridDay':
+        case 'timeGridDay':
+        case 'listDay':
+            return { start: date.startOf('day'), end: date.startOf('day').add(1, 'day') };
+        case 'listMonth':
+            return { start: date.startOf('month'), end: date.startOf('month').add(1, 'month') };
+        case 'listYear':
+        case 'multiMonthYear':
+        case 'multiMonthStack':
+            return { start: date.startOf('year'), end: date.startOf('year').add(1, 'year') };
+        case 'multiMonthContinuous':
+            return { start: weekStart(date.startOf('year')), end: weekStart(date.endOf('year')).add(7, 'day') };
+    }
+}
+/** Step used by prev/next for a given view. */
+export function stepDate(view, date, dir) {
+    if (view.endsWith('Month') || view === 'dayGridMonth')
+        return date.add(dir, 'month');
+    if (view.endsWith('Week'))
+        return date.add(dir, 'week');
+    if (view.endsWith('Day'))
+        return date.add(dir, 'day');
+    return date.add(dir, 'year');
+}
+export function getViewTitle(view, date, range) {
+    switch (view) {
+        case 'dayGridMonth':
+        case 'listMonth':
+            return date.format('MMMM YYYY');
+        case 'dayGridWeek':
+        case 'timeGridWeek':
+        case 'listWeek': {
+            const s = range.start;
+            const e = range.end.subtract(1, 'day');
+            if (s.year() !== e.year())
+                return `${s.format('MMM D, YYYY')} – ${e.format('MMM D, YYYY')}`;
+            if (s.month() !== e.month())
+                return `${s.format('MMM D')} – ${e.format('MMM D, YYYY')}`;
+            return `${s.format('MMM D')} – ${e.format('D, YYYY')}`;
+        }
+        case 'dayGridDay':
+        case 'timeGridDay':
+        case 'listDay':
+            return date.format('dddd, MMMM D, YYYY');
+        default:
+            return date.format('YYYY');
+    }
+}
+/** Parse 'HH:mm' (or 'HH:mm:ss') into minutes since midnight. */
+export function parseTime(value) {
+    const [h = '0', m = '0'] = value.split(':');
+    return Number(h) * 60 + Number(m);
+}
+export const isSameDay = (a, b) => a.isSame(b, 'day');
+/** Days of a range, optionally dropping weekends. */
+export function listDays(range, weekends = true) {
+    const days = [];
+    for (let d = range.start; d.isBefore(range.end); d = d.add(1, 'day')) {
+        if (weekends || (d.day() !== 0 && d.day() !== 6))
+            days.push(d);
+    }
+    return days;
+}
+/**
+ * Stack events into columns so overlapping ones sit side by side (time grid) or on separate rows (day grid).
+ * Returns, for each event, its lane index and the number of lanes in its overlap cluster.
+ */
+export function layoutLanes(items) {
+    const sorted = [...items].sort((a, b) => a.start.valueOf() - b.start.valueOf() || b.end.valueOf() - a.end.valueOf());
+    const result = [];
+    let cluster = [];
+    let laneEnds = [];
+    let clusterEnd = -Infinity;
+    const flush = () => {
+        for (const r of cluster)
+            r.lanes = laneEnds.length;
+        result.push(...cluster);
+        cluster = [];
+        laneEnds = [];
+    };
+    for (const item of sorted) {
+        if (item.start.valueOf() >= clusterEnd)
+            flush();
+        let lane = laneEnds.findIndex(end => end <= item.start.valueOf());
+        if (lane === -1) {
+            lane = laneEnds.length;
+            laneEnds.push(0);
+        }
+        laneEnds[lane] = item.end.valueOf();
+        clusterEnd = Math.max(clusterEnd, item.end.valueOf());
+        cluster.push({ item, lane, lanes: 0 });
+    }
+    flush();
+    return result;
+}
+/** Hover-card text for an event: the title, then when it happens (shown by the Calendar's delegated tooltip). */
+export function tipText(e) {
+    const last = e.end.subtract(1, 'millisecond');
+    let when;
+    if (e.allDay)
+        when = last.isSame(e.start, 'day')
+            ? `${e.start.format('ddd, MMM D')} · All day`
+            : `${e.start.format('ddd, MMM D')} – ${last.format('ddd, MMM D')}`;
+    else if (e.end.isSame(e.start, 'day'))
+        when = `${e.start.format('ddd, MMM D')} · ${e.start.format('HH:mm')} – ${e.end.format('HH:mm')}`;
+    else
+        when = `${e.start.format('MMM D, HH:mm')} – ${e.end.format('MMM D, HH:mm')}`;
+    return `${e.source.title}\n${when}`;
+}

package/dist/calendar/views/DayGridView.d.ts

@@ -0,0 +1,3 @@
+import type { CalendarViewProps } from '../types';
+declare function DayGridView(props: CalendarViewProps): import("react").JSX.Element;
+export default DayGridView;

package/dist/calendar/views/DayGridView.js

@@ -0,0 +1,375 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import Popover from '../../components/ui/Popover';
+import { eventsInRange, getViewRange, normalizeEvent } from '../utils';
+import DayCell from './daygrid/DayCell';
+import EventChip from './daygrid/EventChip';
+import { DAY, HEAD_H, isoWeek, LANE_H, layoutRow, prepare } from './daygrid/layout';
+const KEY = 'YYYY-MM-DD';
+const EMPTY = [];
+const keyAt = (x, y) => {
+    for (const el of document.elementsFromPoint(x, y)) {
+        if (el instanceof HTMLElement && el.dataset.date)
+            return el.dataset.date;
+    }
+    return undefined;
+};
+/** Write a date back in the same representation the user supplied. */
+function sameKind(orig, d, allDay) {
+    if (allDay)
+        return d.format(KEY);
+    if (orig instanceof Date)
+        return d.toDate();
+    if (typeof orig === 'number')
+        return d.valueOf();
+    if (typeof orig === 'string' || orig === undefined)
+        return d.format();
+    return d;
+}
+function DayGridView(props) {
+    const { view, date, events, dayjs, firstDay = 0, goTo, dayMaxEvents, weekNumbers, selectable, editable } = props;
+    const isMonth = view === 'dayGridMonth';
+    const weekends = props.weekends !== false || view === 'dayGridDay';
+    const showOther = props.showNonCurrentDates !== false;
+    // ---- date grid
+    const range = useMemo(() => getViewRange(view, date, firstDay), [view, date.valueOf(), firstDay]);
+    const grid = useMemo(() => {
+        const rows = [];
+        let row = [];
+        let n = 0;
+        for (let d = range.start; d.isBefore(range.end); d = d.add(1, 'day')) {
+            if (weekends || (d.day() !== 0 && d.day() !== 6))
+                row.push(d);
+            if (++n % 7 === 0 || !d.add(1, 'day').isBefore(range.end)) {
+                if (row.length)
+                    rows.push(row);
+                row = [];
+            }
+        }
+        const byKey = new Map();
+        const valByKey = new Map();
+        const flat = [];
+        for (const r of rows) {
+            for (const d of r) {
+                const k = d.format(KEY);
+                byKey.set(k, d);
+                valByKey.set(k, d.valueOf());
+                flat.push(k);
+            }
+        }
+        return { rows, byKey, valByKey, flat };
+    }, [range, weekends]);
+    const cols = grid.rows[0]?.length ?? 7;
+    const todayKey = useMemo(() => dayjs().format(KEY), [dayjs, range]);
+    const now = useMemo(() => dayjs().valueOf(), [dayjs, events, range]);
+    // ---- events (local overrides keep drops visible until the parent supplies new events)
+    const [overrides, setOverrides] = useState({});
+    useEffect(() => setOverrides(o => (Object.keys(o).length ? {} : o)), [events]);
+    const normalized = useMemo(() => events
+        .filter(e => e.display !== 'none' && e.display !== 'background')
+        .map(e => normalizeEvent(dayjs, overrides[String(e.id)] ?? e)), [events, overrides, dayjs]);
+    // background events tint the day cells they cover
+    const bgByKey = useMemo(() => {
+        const map = new Map();
+        for (const e of events) {
+            if (e.display !== 'background')
+                continue;
+            const n = normalizeEvent(dayjs, e);
+            for (let d = n.start.startOf('day'); d.isBefore(n.end); d = d.add(1, 'day')) {
+                const k = d.format(KEY);
+                if (grid.byKey.has(k) && !map.has(k))
+                    map.set(k, e.color ?? 'var(--rbs-accent)');
+            }
+        }
+        return map;
+    }, [events, dayjs, grid]);
+    const byId = useMemo(() => new Map(normalized.map(n => [String(n.id), prepare(n)])), [normalized]);
+    const visible = useMemo(() => {
+        const inRange = new Set(eventsInRange(normalized, range));
+        return normalized.filter(n => inRange.has(n)).map(n => byId.get(String(n.id)));
+    }, [normalized, range, byId]);
+    // ---- "fit to cell height" measurement
+    const fit = dayMaxEvents === true && grid.rows.length > 1;
+    const firstRow = useRef(null);
+    const [rowH, setRowH] = useState(0);
+    useLayoutEffect(() => {
+        const el = firstRow.current;
+        if (!fit || !el)
+            return undefined;
+        const ro = new ResizeObserver(() => setRowH(Math.round(el.getBoundingClientRect().height)));
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [fit]);
+    const limitFor = useCallback((lanes) => {
+        if (fit) {
+            if (!rowH)
+                return Infinity;
+            const cap = Math.floor((rowH - HEAD_H - 4) / LANE_H);
+            return lanes <= cap ? Infinity : Math.max(0, cap - 1);
+        }
+        return typeof dayMaxEvents === 'number' && lanes > dayMaxEvents ? dayMaxEvents : Infinity;
+    }, [fit, rowH, dayMaxEvents]);
+    const rowLayouts = useMemo(() => grid.rows.map(row => {
+        const vals = row.map(d => d.valueOf());
+        const active = row.map(d => !isMonth || showOther || d.month() === date.month());
+        return { vals, layout: layoutRow(vals, active, visible, limitFor) };
+    }), [grid, visible, limitFor, isMonth, showOther, date]);
+    // ---- interaction state
+    const [focusKey, setFocusKey] = useState();
+    const focusable = focusKey && grid.byKey.has(focusKey)
+        ? focusKey
+        : grid.byKey.has(todayKey)
+            ? todayKey
+            : (grid.flat.find(k => !isMonth || grid.byKey.get(k)?.month() === date.month()) ?? grid.flat[0]);
+    const [mark, setMark] = useState(null);
+    const [moreKey, setMoreKey] = useState(null);
+    const rootRef = useRef(null);
+    const drag = useRef(null);
+    const suppress = useRef(false);
+    // Escape closes the "+N more" popover and hands focus back to its trigger
+    useEffect(() => {
+        if (!moreKey)
+            return undefined;
+        const onKey = (e) => {
+            if (e.key !== 'Escape')
+                return;
+            setMoreKey(null);
+            for (const el of rootRef.current?.querySelectorAll('[data-more]') ?? []) {
+                if (el.dataset.more === moreKey)
+                    el.focus();
+            }
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [moreKey]);
+    const canMove = (e) => e.startEditable ?? e.editable ?? editable ?? false;
+    const canResize = (e) => e.durationEditable ?? e.editable ?? editable ?? false;
+    // always-fresh handles for window-level listeners
+    const latest = useRef({ props, grid, byId });
+    latest.current = { props, grid, byId };
+    const commit = useCallback((d) => {
+        const { props: p, grid: g } = latest.current;
+        const h = g.valByKey.get(d.hover);
+        const a = g.valByKey.get(d.anchor);
+        if (h === undefined || a === undefined)
+            return;
+        if (d.kind === 'select') {
+            const [lo, hi] = h < a ? [h, a] : [a, h];
+            p.onSelect?.({ start: p.dayjs(lo), end: p.dayjs(hi).add(1, 'day'), allDay: true });
+            return;
+        }
+        const ev = d.ev;
+        if (!ev)
+            return;
+        const src = ev.ne.source;
+        const delta = Math.round((d.kind === 'move' ? h - a : Math.max(h, ev.sVal) - ev.eVal) / DAY);
+        if (!delta)
+            return;
+        const oldEvent = src;
+        let start = ev.ne.start;
+        let end = ev.ne.end;
+        if (d.kind === 'move')
+            start = start.add(delta, 'day');
+        end = end.add(delta, 'day');
+        if (!end.isAfter(start))
+            return;
+        const event = {
+            ...src,
+            start: sameKind(src.start, start, ev.ne.allDay),
+            end: sameKind(src.end, end, ev.ne.allDay),
+        };
+        const id = String(src.id);
+        setOverrides(o => ({ ...o, [id]: event }));
+        const revert = () => setOverrides(o => {
+            const next = { ...o };
+            delete next[id];
+            return next;
+        });
+        (d.kind === 'move' ? p.onEventDrop : p.onEventResize)?.({ event, oldEvent, revert });
+    }, []);
+    const onPointerDown = (e) => {
+        if (e.button !== 0)
+            return;
+        const t = e.target;
+        setMark(null);
+        if (t.closest('[data-nav]'))
+            return;
+        let d = null;
+        const chip = t.closest('[data-drag]');
+        const start = keyAt(e.clientX, e.clientY);
+        if (chip) {
+            const ev = byId.get(chip.dataset.eid ?? '');
+            const resize = !!t.closest('[data-resize]');
+            if (ev && start && (resize ? canResize(ev.ne.source) : canMove(ev.ne.source))) {
+                d = {
+                    kind: resize ? 'resize' : 'move',
+                    ev,
+                    anchor: start,
+                    hover: start,
+                    x: e.clientX,
+                    y: e.clientY,
+                    active: false,
+                };
+            }
+        }
+        else if (selectable && t.closest('[data-date]') && start) {
+            d = { kind: 'select', anchor: start, hover: start, x: e.clientX, y: e.clientY, active: true };
+            setMark({ kind: 'sel', a: grid.valByKey.get(start) ?? 0, b: grid.valByKey.get(start) ?? 0 });
+        }
+        if (!d)
+            return;
+        drag.current = d;
+        const preview = (s) => {
+            const g = latest.current.grid;
+            const h = g.valByKey.get(s.hover) ?? 0;
+            const a = g.valByKey.get(s.anchor) ?? 0;
+            if (s.kind === 'select')
+                return setMark({ kind: 'sel', a: Math.min(a, h), b: Math.max(a, h) });
+            const ev = s.ev;
+            const shift = (v, n) => latest.current.props.dayjs(v).add(n, 'day').valueOf();
+            if (s.kind === 'move') {
+                const n = Math.round((h - a) / DAY);
+                return setMark({ kind: 'drop', a: shift(ev.sVal, n), b: shift(ev.eVal, n), id: String(ev.ne.id) });
+            }
+            return setMark({ kind: 'drop', a: ev.sVal, b: Math.max(h, ev.sVal), id: String(ev.ne.id) });
+        };
+        const move = (m) => {
+            const s = drag.current;
+            if (!s)
+                return;
+            if (!s.active) {
+                if (Math.hypot(m.clientX - s.x, m.clientY - s.y) < 4)
+                    return;
+                s.active = true;
+                document.body.style.userSelect = 'none';
+            }
+            const k = keyAt(m.clientX, m.clientY);
+            if (k && k !== s.hover) {
+                s.hover = k;
+                preview(s);
+            }
+        };
+        const end = (m, cancelled = false) => {
+            window.removeEventListener('pointermove', move);
+            window.removeEventListener('pointerup', up);
+            window.removeEventListener('pointercancel', cancel);
+            window.removeEventListener('keydown', esc);
+            document.body.style.userSelect = '';
+            const s = drag.current;
+            drag.current = null;
+            if (s?.active && !cancelled && m) {
+                commit(s);
+                if (s.kind !== 'select') {
+                    suppress.current = true;
+                    setTimeout(() => {
+                        suppress.current = false;
+                    }, 0);
+                }
+            }
+            if (s?.kind !== 'select' || cancelled)
+                setMark(null);
+        };
+        const up = (m) => end(m);
+        const cancel = () => end(undefined, true);
+        const esc = (k) => k.key === 'Escape' && end(undefined, true);
+        window.addEventListener('pointermove', move);
+        window.addEventListener('pointerup', up);
+        window.addEventListener('pointercancel', cancel);
+        window.addEventListener('keydown', esc);
+    };
+    const onClick = (e) => {
+        const t = e.target;
+        if (suppress.current || t.closest('[data-more]'))
+            return;
+        const nav = t.closest('[data-nav]');
+        if (nav) {
+            const d = grid.byKey.get(nav.dataset.nav ?? '');
+            if (d) {
+                setMoreKey(null);
+                if (props.onNavLinkDayClick)
+                    props.onNavLinkDayClick(d);
+                else
+                    goTo('dayGridDay', d);
+            }
+            return;
+        }
+        const chip = t.closest('[data-eid]');
+        if (chip) {
+            const ev = byId.get(chip.dataset.eid ?? '');
+            if (ev)
+                props.onEventClick?.({ event: ev.ne.source, jsEvent: e });
+            setMoreKey(null);
+            return;
+        }
+        const cell = t.closest('[data-date]');
+        const d = cell && grid.byKey.get(cell.dataset.date ?? '');
+        if (d)
+            props.onDateClick?.({ date: d, allDay: true, jsEvent: e });
+    };
+    const onKeyDown = (e) => {
+        const cell = e.target;
+        const k = cell.dataset.date;
+        if (!k)
+            return;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            cell.click();
+            return;
+        }
+        const step = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: cols, ArrowUp: -cols }[e.key];
+        if (!step)
+            return;
+        e.preventDefault();
+        const next = grid.flat[grid.flat.indexOf(k) + step];
+        if (next)
+            rootRef.current?.querySelector(`[data-date="${next}"]`)?.focus();
+    };
+    const onFocus = (e) => {
+        const k = e.target.dataset.date;
+        if (k)
+            setFocusKey(k);
+    };
+    // ---- render
+    const ctx = {
+        eventContent: props.eventContent,
+        eventClassNames: props.eventClassNames,
+        eventTimeFormat: props.eventTimeFormat,
+    };
+    const colTpl = `repeat(${cols}, minmax(0, 1fr))`;
+    const wrapStyle = {
+        '--rbs-dg-head': `${HEAD_H}px`,
+        '--rbs-dg-lane': `${LANE_H}px`,
+        minHeight: fit ? grid.rows.length * 96 : undefined,
+    };
+    const headFmt = view === 'dayGridDay' ? 'dddd' : 'ddd';
+    const dayEvents = (key) => {
+        const v = grid.valByKey.get(key) ?? 0;
+        return visible
+            .filter(p => p.sVal <= v && v <= p.eVal)
+            .sort((a, b) => Number(b.ne.allDay) - Number(a.ne.allDay) || a.ne.start.valueOf() - b.ne.start.valueOf());
+    };
+    return (_jsxs("div", { ref: rootRef, className: `rbs-dg${fit ? ' rbs-dg--fit' : ''}`, style: wrapStyle, role: "grid", "aria-label": date.format('MMMM YYYY'), onPointerDown: onPointerDown, onClick: onClick, onKeyDown: onKeyDown, onFocus: onFocus, children: [_jsxs("div", { className: "rbs-dg-head", role: "row", children: [weekNumbers && _jsx("div", { className: "rbs-dg-wk" }), _jsx("div", { className: "rbs-dg-heads", style: { gridTemplateColumns: colTpl }, children: (grid.rows[0] ?? []).map(d => (_jsx("div", { className: "rbs-dg-hd", role: "columnheader", children: isMonth ? (d.format(headFmt)) : (_jsxs("button", { type: "button", className: "rbs-dg-hlink", "data-nav": d.format(KEY), tabIndex: -1, children: [d.format(headFmt), view === 'dayGridWeek' && _jsxs("span", { className: "rbs-dg-hnum", children: [" ", d.format('D')] })] })) }, d.day()))) })] }), _jsx("div", { className: "rbs-dg-rows", children: grid.rows.map((row, ri) => {
+                    const { vals, layout } = rowLayouts[ri];
+                    const minH = fit ? 64 : Math.max(96, HEAD_H + layout.rows * LANE_H + 8);
+                    return (_jsxs("div", { ref: ri === 0 ? firstRow : undefined, className: "rbs-dg-row", role: "row", style: { minHeight: minH }, children: [weekNumbers && _jsx("div", { className: "rbs-dg-wk", children: isoWeek(vals[Math.min(vals.length - 1, 3)]) }), _jsxs("div", { className: "rbs-dg-body", children: [_jsx("div", { className: "rbs-dg-cells", style: { gridTemplateColumns: colTpl }, children: row.map((d, ci) => {
+                                            const k = d.format(KEY);
+                                            const v = vals[ci];
+                                            const isOther = isMonth && d.month() !== date.month();
+                                            const isToday = k === todayKey;
+                                            const x = props.dayCellClassNames?.({ date: d, isToday, isOther }) ?? EMPTY;
+                                            return (_jsx(DayCell, { dayKey: k, date: d, label: isMonth && d.date() === 1 ? d.format('MMM D') : d.format('D'), title: d.format('dddd, MMMM D, YYYY'), isToday: isToday, isOther: isOther, hidden: isOther && !showOther, focusable: k === focusable, selected: mark?.kind === 'sel' && v >= mark.a && v <= mark.b, dropping: mark?.kind === 'drop' && v >= mark.a && v <= mark.b, bgColor: bgByKey.get(k), className: Array.isArray(x) ? x.join(' ') : x }, k));
+                                        }) }), _jsxs("div", { className: "rbs-dg-layer", style: { gridTemplateColumns: colTpl }, children: [layout.shown.map(s => {
+                                                const id = String(s.ev.ne.id);
+                                                const src = s.ev.ne.source;
+                                                return (_jsx(EventChip, { ev: s.ev, view: view, isStart: s.isStart, isEnd: s.isEnd, col: s.colStart, span: s.colEnd - s.colStart + 1, lane: s.lane, canMove: canMove(src), canResize: canResize(src), dragging: mark?.kind === 'drop' && mark.id === id, now: now, ...ctx }, `${id}:${s.colStart}`));
+                                            }), layout.more.map((count, ci) => {
+                                                if (!count)
+                                                    return null;
+                                                const k = row[ci].format(KEY);
+                                                return (_jsx(Popover
+                                                // biome-ignore lint/suspicious/noArrayIndexKey: column position is the identity
+                                                , { trigger: "click", placement: "bottom", className: "rbs-dg-pop", open: moreKey === k, onOpenChange: o => setMoreKey(o ? k : null), content: moreKey === k ? (_jsxs("div", { className: "rbs-dg-pop-in", children: [_jsx("button", { type: "button", className: "rbs-dg-pop-title", "data-nav": k, children: row[ci].format('dddd, MMM D') }), dayEvents(k).map(p => (_jsx(EventChip, { ev: p, view: view, isStart: true, isEnd: true, now: now, ...ctx }, String(p.ne.id))))] })) : null, children: _jsxs("button", { type: "button", className: "rbs-dg-more", "data-more": k, style: { gridColumn: ci + 1, gridRow: layout.rows }, "aria-haspopup": "dialog", "aria-expanded": moreKey === k, children: ["+", count, " more"] }) }, ci));
+                                            })] })] })] }, vals[0]));
+                }) })] }));
+}
+export default DayGridView;

package/dist/calendar/views/ListView.d.ts

@@ -0,0 +1,4 @@
+import type { CalendarViewProps } from '../types';
+declare function ListView({ view, date, events, dayjs, firstDay, eventTimeFormat, eventContent, eventClassNames, noEventsContent, onEventClick, onNavLinkDayClick, goTo, className, }: CalendarViewProps): import("react").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof ListView>;
+export default _default;

package/dist/calendar/views/ListView.js

@@ -0,0 +1,56 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useMemo } from 'react';
+import { getViewRange, normalizeEvent, tipText } from '../utils';
+import { bucketByDay, dayKey, timeText } from './list/bucket';
+function onListKey(e) {
+    const step = e.key === 'ArrowDown' ? 1 : e.key === 'ArrowUp' ? -1 : 0;
+    if (!step)
+        return;
+    const rows = Array.from(e.currentTarget.querySelectorAll('.rbs-ls-row'));
+    const i = rows.indexOf(document.activeElement);
+    const next = rows[Math.max(0, Math.min(rows.length - 1, i + step))];
+    if (next) {
+        e.preventDefault();
+        next.focus();
+    }
+}
+function ListView({ view, date, events, dayjs, firstDay = 0, eventTimeFormat, eventContent, eventClassNames, noEventsContent, onEventClick, onNavLinkDayClick, goTo, className, }) {
+    const range = useMemo(() => getViewRange(view, date, firstDay), [view, date, firstDay]);
+    const normalized = useMemo(() => events.filter(e => e.display !== 'background' && e.display !== 'none').map(e => normalizeEvent(dayjs, e)), [events, dayjs]);
+    const buckets = useMemo(() => bucketByDay(normalized, range), [normalized, range]);
+    const days = useMemo(() => {
+        const out = [];
+        for (let d = range.start; d.isBefore(range.end); d = d.add(1, 'day'))
+            if (buckets.has(dayKey(d)))
+                out.push(d);
+        return out;
+    }, [range, buckets]);
+    const now = useMemo(() => dayjs(), [dayjs]);
+    const navTo = useCallback((d) => (onNavLinkDayClick ? onNavLinkDayClick(d) : goTo('timeGridDay', d)), [onNavLinkDayClick, goTo]);
+    if (days.length === 0) {
+        return _jsx("div", { className: "rbs-ls rbs-ls-empty", children: noEventsContent ?? 'No events to display' });
+    }
+    return (_jsx("div", { className: `rbs-ls ${className ?? ''}`, role: "list", "aria-label": "Events", onKeyDown: onListKey, children: days.map(day => {
+            const isToday = day.isSame(now, 'day');
+            return (_jsxs("div", { className: "rbs-ls-day", role: "listitem", children: [_jsx("h3", { className: `rbs-ls-heading${isToday ? ' rbs-ls-today' : ''}`, children: _jsx("button", { type: "button", className: "rbs-ls-nav", onClick: () => navTo(day), children: day.format('dddd, MMM D') }) }), _jsx("ul", { className: "rbs-ls-rows", children: (buckets.get(dayKey(day)) ?? []).map(e => {
+                            const isStart = e.start.isSame(day, 'day');
+                            const isEnd = !e.end.isAfter(day.add(1, 'day'));
+                            const isPast = e.end.isBefore(now);
+                            const tt = timeText(e, day, eventTimeFormat);
+                            const arg = {
+                                event: e.source,
+                                view,
+                                timeText: tt,
+                                isStart,
+                                isEnd,
+                                isPast,
+                                isFuture: e.start.isAfter(now),
+                                isToday,
+                            };
+                            const extra = eventClassNames?.(arg);
+                            const cls = [...(e.source.classNames ?? []), ...(Array.isArray(extra) ? extra : extra ? [extra] : [])];
+                            return (_jsx("li", { children: _jsx("button", { type: "button", className: `rbs-ls-row${isPast ? ' rbs-ls-past' : ''} ${cls.join(' ')}`, "data-tip": tipText(e), "data-tip-color": e.source.color, onClick: ev => onEventClick?.({ event: e.source, jsEvent: ev }), children: eventContent ? (eventContent(arg)) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "rbs-ls-time", children: tt }), _jsx("span", { className: "rbs-ls-dot", style: { background: e.source.color ?? 'var(--rbs-accent)' } }), _jsxs("span", { className: "rbs-ls-title", children: [e.source.title, !isStart && _jsx("span", { className: "rbs-ls-cont", children: " (cont.)" })] })] })) }) }, `${e.id}-${dayKey(day)}`));
+                        }) })] }, dayKey(day)));
+        }) }));
+}
+export default memo(ListView);

package/dist/calendar/views/MultiMonthView.d.ts

@@ -0,0 +1,4 @@
+import type { CalendarViewProps } from '../types';
+declare function MultiMonthView(props: CalendarViewProps): import("react").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof MultiMonthView>;
+export default _default;

package/dist/calendar/views/MultiMonthView.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { getViewRange, normalizeEvent } from '../utils';
+import { bucketByDay } from './list/bucket';
+import Continuous from './multimonth/Continuous';
+import MonthGrid from './multimonth/MonthGrid';
+function MultiMonthView(props) {
+    const { view, date, events, dayjs, firstDay = 0, weekends = true, weekNumbers = false, className } = props;
+    const range = useMemo(() => getViewRange(view, date, firstDay), [view, date, firstDay]);
+    const normalized = useMemo(() => events.map(e => normalizeEvent(dayjs, e)), [events, dayjs]);
+    const buckets = useMemo(() => bucketByDay(normalized, range), [normalized, range]);
+    const bgBuckets = useMemo(() => bucketByDay(events.filter(e => e.display === 'background').map(e => normalizeEvent(dayjs, { ...e, display: 'auto' })), range), [events, dayjs, range]);
+    const today = useMemo(() => dayjs().startOf('day'), [dayjs]);
+    const shared = {
+        buckets,
+        bgBuckets,
+        today,
+        firstDay,
+        weekends,
+        weekNumbers,
+        compact: view === 'multiMonthYear',
+        eventClassNames: props.eventClassNames,
+        eventContent: props.eventContent,
+        view,
+        onDateClick: props.onDateClick,
+        onEventClick: props.onEventClick,
+        goTo: props.goTo,
+        dayCellClassNames: props.dayCellClassNames,
+    };
+    const months = useMemo(() => {
+        const y = date.startOf('year');
+        return Array.from({ length: 12 }, (_, i) => y.add(i, 'month'));
+    }, [date]);
+    return (_jsx("div", { className: `rbs-mm rbs-mm-${view} ${className ?? ''}`, children: view === 'multiMonthContinuous' ? (_jsx(Continuous, { range: range, shared: shared })) : (_jsx("div", { className: "rbs-mm-months", children: months.map(m => (_jsx(MonthGrid, { month: m, shared: shared }, m.valueOf()))) })) }));
+}
+export default memo(MultiMonthView);