react-big-schedule 8.1.0 → 9.0.0

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

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

package/dist/calendar/views/TimeGridView.js

@@ -0,0 +1,334 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { getViewRange, listDays, normalizeEvent, parseTime, tipText } from '../utils';
+import DayColumn, { eventArg, eventStyle, joinClasses } from './timegrid/DayColumn';
+import { buildAllDayBars, buildDays, isoWeek, spanOf } from './timegrid/model';
+const DRAG_THRESHOLD = 4;
+const ALLDAY_LANE_H = 20;
+/** One shared minute timer for the now indicator. */
+function useNow(enabled) {
+    const [tick, setTick] = useState(() => Date.now());
+    useEffect(() => {
+        if (!enabled)
+            return undefined;
+        setTick(Date.now());
+        const id = setInterval(() => setTick(Date.now()), 60_000);
+        return () => clearInterval(id);
+    }, [enabled]);
+    return tick;
+}
+const fmtDate = (d) => d.format('YYYY-MM-DD');
+function TimeGridView(props) {
+    const { view, date, events, dayjs, goTo, editable, firstDay = 0, weekNumbers } = props;
+    const isDay = view === 'timeGridDay';
+    const slotDur = props.slotDuration ?? 30;
+    const slotH = props.slotHeight ?? 28;
+    const minMin = parseTime(props.slotMinTime ?? '00:00');
+    const maxMin = Math.max(parseTime(props.slotMaxTime ?? '24:00'), minMin + slotDur);
+    const ppm = slotH / slotDur;
+    const timeFormat = props.eventTimeFormat ?? 'h:mma';
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    const [overrides, setOverrides] = useState({});
+    // a new events array from the parent is the source of truth again
+    useEffect(() => setOverrides({}), [events]);
+    const days = useMemo(() => listDays(getViewRange(view, date, firstDay), isDay || (props.weekends ?? true)), [view, date, firstDay, isDay, props.weekends]);
+    const range = useMemo(() => ({ start: days[0].startOf('day'), end: days[days.length - 1].add(1, 'day').startOf('day') }), [days]);
+    const normalized = useMemo(() => events
+        .map(e => normalizeEvent(dayjs, overrides[String(e.id)] ?? e))
+        .filter(e => e.start.isBefore(range.end) && e.end.isAfter(range.start)), [events, overrides, dayjs, range]);
+    const dayData = useMemo(() => buildDays(days, normalized, minMin, maxMin, props.businessHours), [days, normalized, minMin, maxMin, props.businessHours]);
+    const { bars, lanes } = useMemo(() => buildAllDayBars(days, normalized), [days, normalized]);
+    const geo = useMemo(() => ({ minMin, maxMin, slotDur, slotH, ppm }), [minMin, maxMin, slotDur, slotH, ppm]);
+    const nowTick = useNow(!!props.nowIndicator);
+    const now = useMemo(() => dayjs(nowTick), [dayjs, nowTick]);
+    const nowMin = now.hour() * 60 + now.minute();
+    const render = useMemo(() => ({ view, timeFormat, eventContent: props.eventContent, eventClassNames: props.eventClassNames, now }), [view, timeFormat, props.eventContent, props.eventClassNames, now]);
+    const canEdit = useCallback((e) => {
+        const base = e.editable ?? editable ?? false;
+        return [e.startEditable ?? base, e.durationEditable ?? base];
+    }, [editable]);
+    const scrollRef = useRef(null);
+    const colsRef = useRef(null);
+    const allDayRef = useRef(null);
+    useEffect(() => {
+        const el = scrollRef.current;
+        if (el)
+            el.scrollTop = Math.max(0, (parseTime(props.scrollTime ?? '08:00') - minMin) * ppm);
+    }, [minMin, ppm]);
+    // ---- interaction state (only the touched column re-renders) ----
+    const [sel, setSel] = useState(null);
+    const [adSel, setAdSel] = useState(null);
+    const [preview, setPreview] = useState(null);
+    const gesture = useRef(null);
+    const last = useRef({});
+    const cleanup = useRef(null);
+    useEffect(() => () => cleanup.current?.(), []);
+    const snap = useCallback((m, mode) => Math[mode](m / slotDur) * slotDur, [slotDur]);
+    const hit = useCallback((x, y) => {
+        const cols = colsRef.current?.getBoundingClientRect();
+        const ad = allDayRef.current?.getBoundingClientRect();
+        if (!cols)
+            return null;
+        const dayIdx = Math.max(0, Math.min(days.length - 1, Math.floor(((x - cols.left) / cols.width) * days.length)));
+        const allDay = !!ad && y >= ad.top && y <= ad.bottom;
+        const minute = Math.max(minMin, Math.min(maxMin, minMin + (y - cols.top) / ppm));
+        return { dayIdx, allDay, minute };
+    }, [days.length, minMin, maxMin, ppm]);
+    const abort = useCallback(() => {
+        cleanup.current?.();
+        cleanup.current = null;
+        gesture.current = null;
+        last.current = {};
+        for (const el of scrollRef.current?.querySelectorAll('.rbs-tg-dragging') ?? [])
+            el.classList.remove('rbs-tg-dragging');
+        setSel(null);
+        setAdSel(null);
+        setPreview(null);
+    }, []);
+    const emitChange = useCallback((kind, p) => {
+        const src = p.ev.source;
+        const next = p.allDay
+            ? { ...src, start: fmtDate(p.start), end: fmtDate(p.end), allDay: true }
+            : { ...src, start: p.start.format(), end: p.end.format(), allDay: false };
+        const key = String(src.id);
+        setOverrides(o => ({ ...o, [key]: next }));
+        const info = {
+            event: next,
+            oldEvent: src,
+            revert: () => setOverrides(o => {
+                const copy = { ...o };
+                delete copy[key];
+                return copy;
+            }),
+        };
+        const cb = kind === 'drop' ? propsRef.current.onEventDrop : propsRef.current.onEventResize;
+        cb?.(info);
+    }, []);
+    const onMove = useCallback((e) => {
+        const g = gesture.current;
+        if (!g)
+            return;
+        if (!g.moved) {
+            if (Math.hypot(e.clientX - g.x, e.clientY - g.y) < DRAG_THRESHOLD)
+                return;
+            g.moved = true;
+        }
+        const h = hit(e.clientX, e.clientY);
+        if (!h)
+            return;
+        if (g.kind === 'slot') {
+            if (!propsRef.current.selectable)
+                return;
+            if (g.allDay) {
+                const s = { from: Math.min(g.dayIdx, h.dayIdx), to: Math.max(g.dayIdx, h.dayIdx) };
+                last.current.adSel = s;
+                setAdSel(s);
+            }
+            else {
+                const start = snap(Math.min(g.min0, h.minute), 'floor');
+                const end = Math.max(snap(Math.max(g.min0, h.minute), 'ceil'), start + slotDur);
+                const s = { dayIdx: g.dayIdx, start, end: Math.min(end, maxMin) };
+                last.current.sel = s;
+                setSel(s);
+            }
+        }
+        else if (g.kind === 'move') {
+            const [startEditable] = canEdit(g.ev.source);
+            if (!startEditable)
+                return;
+            const day = days[h.dayIdx];
+            const ev = g.ev;
+            const ms = ev.end.diff(ev.start);
+            let p;
+            if (h.allDay) {
+                const start = ev.allDay ? ev.start.add(day.diff(g.downDay, 'day'), 'day') : day.startOf('day');
+                const end = ev.allDay ? ev.end.add(day.diff(g.downDay, 'day'), 'day') : start.add(1, 'day');
+                p = { ev, start, end, allDay: true };
+            }
+            else if (ev.allDay) {
+                const start = day.startOf('day').add(snap(h.minute, 'floor'), 'minute');
+                p = { ev, start, end: start.add(1, 'hour'), allDay: false };
+            }
+            else {
+                const raw = day.startOf('day').add(h.minute - g.grab, 'minute');
+                const base = raw.startOf('day');
+                const start = base.add(snap(raw.diff(base, 'minute'), 'round'), 'minute');
+                p = { ev, start, end: start.add(ms, 'millisecond'), allDay: false };
+            }
+            last.current.preview = p;
+            setPreview(p);
+        }
+        else {
+            const [, durationEditable] = canEdit(g.ev.source);
+            if (!durationEditable)
+                return;
+            const day = days[g.dayIdx];
+            const ev = g.ev;
+            const min = snap(h.minute, 'round');
+            const minEnd = ev.start.add(slotDur, 'minute');
+            let end = day.startOf('day').add(min, 'minute');
+            if (end.isBefore(minEnd))
+                end = minEnd;
+            const p = { ev, start: ev.start, end, allDay: false };
+            last.current.preview = p;
+            setPreview(p);
+        }
+    }, [hit, snap, slotDur, maxMin, days, canEdit]);
+    const begin = useCallback((e, g) => {
+        if (e.button !== 0)
+            return;
+        cleanup.current?.();
+        gesture.current = g;
+        last.current = {};
+        const onUp = (ev) => {
+            const cur = gesture.current;
+            const l = last.current;
+            abort();
+            if (!cur)
+                return;
+            const p = propsRef.current;
+            if (cur.kind === 'slot') {
+                const day = days[cur.dayIdx];
+                if (!cur.moved) {
+                    const date = cur.allDay ? day.startOf('day') : day.startOf('day').add(snap(cur.min0, 'floor'), 'minute');
+                    p.onDateClick?.({ date, allDay: cur.allDay, jsEvent: ev });
+                }
+                else if (l.adSel) {
+                    p.onSelect?.({
+                        start: days[l.adSel.from].startOf('day'),
+                        end: days[l.adSel.to].add(1, 'day').startOf('day'),
+                        allDay: true,
+                    });
+                }
+                else if (l.sel) {
+                    const base = days[l.sel.dayIdx].startOf('day');
+                    p.onSelect?.({ start: base.add(l.sel.start, 'minute'), end: base.add(l.sel.end, 'minute'), allDay: false });
+                }
+            }
+            else if (!cur.moved) {
+                if (cur.kind === 'move')
+                    p.onEventClick?.({ event: cur.ev.source, jsEvent: ev });
+            }
+            else if (l.preview &&
+                !(l.preview.start.isSame(cur.ev.start) &&
+                    l.preview.end.isSame(cur.ev.end) &&
+                    l.preview.allDay === cur.ev.allDay)) {
+                emitChange(cur.kind === 'move' ? 'drop' : 'resize', l.preview);
+            }
+        };
+        const onKey = (ev) => ev.key === 'Escape' && abort();
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp, { once: true });
+        window.addEventListener('pointercancel', abort, { once: true });
+        window.addEventListener('keydown', onKey);
+        cleanup.current = () => {
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onUp);
+            window.removeEventListener('pointercancel', abort);
+            window.removeEventListener('keydown', onKey);
+        };
+    }, [abort, onMove, days, snap, emitChange]);
+    const onSlotDown = useCallback((e, dayIdx) => {
+        const h = hit(e.clientX, e.clientY);
+        if (h)
+            begin(e, { kind: 'slot', x: e.clientX, y: e.clientY, moved: false, dayIdx, allDay: false, min0: h.minute });
+    }, [hit, begin]);
+    const onAllDaySlotDown = (e) => {
+        const h = hit(e.clientX, e.clientY);
+        if (h)
+            begin(e, { kind: 'slot', x: e.clientX, y: e.clientY, moved: false, dayIdx: h.dayIdx, allDay: true, min0: 0 });
+    };
+    const onEventDown = useCallback((e, ev, dayIdx) => {
+        e.stopPropagation();
+        const h = hit(e.clientX, e.clientY);
+        if (!h)
+            return;
+        const downDay = days[dayIdx];
+        const grab = ev.allDay ? 0 : downDay.startOf('day').add(h.minute, 'minute').diff(ev.start, 'minute');
+        begin(e, { kind: 'move', x: e.clientX, y: e.clientY, moved: false, ev, downDay, grab });
+        if (canEdit(ev.source)[0])
+            e.currentTarget.classList.add('rbs-tg-dragging');
+    }, [hit, begin, days, canEdit]);
+    const onResizeDown = useCallback((e, ev, dayIdx) => {
+        e.stopPropagation();
+        begin(e, { kind: 'resize', x: e.clientX, y: e.clientY, moved: false, ev, dayIdx });
+    }, [begin]);
+    const onEventActivate = useCallback((e, ev) => {
+        // mouse clicks are handled on pointerup; this is the keyboard path (Enter/Space)
+        if (e.detail === 0)
+            propsRef.current.onEventClick?.({ event: ev.source, jsEvent: e });
+    }, []);
+    const onSlotActivate = useCallback((d) => {
+        propsRef.current.onDateClick?.({ date: d, allDay: false, jsEvent: new MouseEvent('click') });
+    }, []);
+    // ---- all-day row ----
+    const maxLanes = typeof props.dayMaxEvents === 'number' ? props.dayMaxEvents : 3;
+    const overflow = lanes > maxLanes;
+    const visLanes = overflow ? maxLanes - 1 : lanes;
+    const rows = Math.max(1, visLanes + (overflow ? 1 : 0));
+    const hiddenPerDay = useMemo(() => {
+        const counts = days.map(() => 0);
+        for (const b of bars)
+            if (b.lane >= visLanes)
+                for (let i = b.si; i <= b.ei; i++)
+                    counts[i] += 1;
+        return counts;
+    }, [bars, days, visLanes]);
+    const adGhost = preview?.allDay ? spanOf(days, preview) : null;
+    const n = days.length;
+    const showWeek = weekNumbers && !isDay;
+    const weekLabel = `W${isoWeek(days[0])}`;
+    const scrollMax = props.height === undefined ? 700 : undefined;
+    const hours = [];
+    for (let h = Math.ceil(minMin / 60); h * 60 < maxMin; h++)
+        hours.push(h);
+    const today = dayjs();
+    return (_jsx("div", { className: "rbs-tg", "data-view": view, children: _jsxs("div", { ref: scrollRef, className: "rbs-tg-scroll", style: { maxHeight: scrollMax }, children: [_jsxs("div", { className: "rbs-tg-sticky", children: [_jsxs("div", { className: "rbs-tg-row rbs-tg-head", children: [_jsx("div", { className: "rbs-tg-corner", children: showWeek ? weekLabel : '' }), days.map(d => {
+                                    const isToday = d.isSame(today, 'day');
+                                    return (_jsx("div", { className: joinClasses('rbs-tg-hcell', isToday && 'rbs-tg-today'), children: _jsxs("button", { type: "button", className: "rbs-tg-daylink", onClick: () => props.onNavLinkDayClick ? props.onNavLinkDayClick(d) : !isDay && goTo('timeGridDay', d), children: [_jsx("span", { className: "rbs-tg-dow", children: d.format('ddd') }), _jsx("span", { className: "rbs-tg-dom", children: d.format('D') })] }) }, d.valueOf()));
+                                })] }), _jsxs("div", { className: "rbs-tg-row rbs-tg-allday", children: [_jsx("div", { className: "rbs-tg-corner rbs-tg-allday-label", children: "all-day" }), _jsxs("div", { ref: allDayRef, className: "rbs-tg-allday-cols", style: { height: rows * ALLDAY_LANE_H + 6 }, onPointerDown: onAllDaySlotDown, children: [days.map((d, i) => (_jsx("div", { className: joinClasses('rbs-tg-allday-cell', d.isSame(today, 'day') && 'rbs-tg-today'), style: { left: `${(i / n) * 100}%`, width: `${100 / n}%` } }, d.valueOf()))), adSel && (_jsx("div", { className: "rbs-tg-select", style: {
+                                                left: `${(adSel.from / n) * 100}%`,
+                                                width: `${((adSel.to - adSel.from + 1) / n) * 100}%`,
+                                                top: 0,
+                                                bottom: 0,
+                                            } })), bars
+                                            .filter(b => b.lane < visLanes)
+                                            .map(b => {
+                                            const arg = eventArg(render, b.ev, b.isStart, b.isEnd);
+                                            const [startEditable] = canEdit(b.ev.source);
+                                            return (_jsx("button", { type: "button", "aria-label": `${b.ev.source.title}, all day`, "data-tip": tipText(b.ev), "data-tip-color": b.ev.source.color, className: joinClasses('rbs-tg-bar', !b.isStart && 'rbs-tg-bar-cont-start', !b.isEnd && 'rbs-tg-bar-cont-end', startEditable && 'rbs-tg-ev-editable', b.ev.source.classNames, render.eventClassNames?.(arg)), style: {
+                                                    ...eventStyle(b.ev),
+                                                    left: `${(b.si / n) * 100}%`,
+                                                    width: `calc(${((b.ei - b.si + 1) / n) * 100}% - 2px)`,
+                                                    top: b.lane * ALLDAY_LANE_H + 2,
+                                                    height: ALLDAY_LANE_H - 2,
+                                                }, onPointerDown: e => {
+                                                    const idx = Math.max(b.si, Math.min(b.ei, hit(e.clientX, e.clientY)?.dayIdx ?? b.si));
+                                                    onEventDown(e, b.ev, idx);
+                                                }, onClick: e => onEventActivate(e.nativeEvent, b.ev), children: render.eventContent ? (render.eventContent(arg)) : (_jsx("span", { className: "rbs-tg-ev-title", children: b.ev.source.title })) }, `${b.ev.id}-${b.si}`));
+                                        }), overflow &&
+                                            hiddenPerDay.map((count, i) => count > 0 ? (_jsxs("button", { type: "button", className: "rbs-tg-more", style: { left: `${(i / n) * 100}%`, width: `${100 / n}%`, top: visLanes * ALLDAY_LANE_H + 2 }, onPointerDown: e => e.stopPropagation(), onClick: () => goTo('timeGridDay', days[i]), children: ["+", count, " more"] }, days[i].valueOf())) : null), adGhost && preview && (_jsx("div", { className: "rbs-tg-bar rbs-tg-ghost", style: {
+                                                ...eventStyle(preview.ev),
+                                                left: `${(adGhost.si / n) * 100}%`,
+                                                width: `calc(${((adGhost.ei - adGhost.si + 1) / n) * 100}% - 2px)`,
+                                                top: 2,
+                                                height: ALLDAY_LANE_H - 2,
+                                            }, children: _jsx("span", { className: "rbs-tg-ev-title", children: preview.ev.source.title }) }))] })] })] }), _jsxs("div", { className: "rbs-tg-row rbs-tg-body", children: [_jsx("div", { className: "rbs-tg-axis", style: { height: (maxMin - minMin) * ppm }, children: hours.map(h => (_jsx("div", { className: "rbs-tg-hour", style: { top: (h * 60 - minMin) * ppm }, children: h * 60 > minMin ? today.startOf('day').add(h, 'hour').format('h A') : '' }, h))) }), _jsx("div", { ref: colsRef, role: "grid", "aria-label": "Time grid", className: "rbs-tg-cols", children: dayData.map((data, i) => {
+                                const base = data.day.startOf('day');
+                                const winStart = base.add(minMin, 'minute');
+                                const winEnd = base.add(maxMin, 'minute');
+                                const pv = preview && !preview.allDay && preview.start.isBefore(winEnd) && preview.end.isAfter(winStart)
+                                    ? preview
+                                    : null;
+                                const isToday = data.day.isSame(today, 'day');
+                                return (_jsx(DayColumn, { data: data, dayIdx: i, isToday: isToday, geo: geo, render: render, nowMin: props.nowIndicator && isToday ? nowMin : null, selStart: sel?.dayIdx === i ? sel.start : null, selEnd: sel?.dayIdx === i ? sel.end : null, ghost: pv
+                                        ? {
+                                            ev: pv.ev,
+                                            sMin: Math.max(pv.start.diff(base, 'minute'), minMin),
+                                            eMin: Math.min(pv.end.diff(base, 'minute'), maxMin),
+                                        }
+                                        : null, canEdit: canEdit, onSlotDown: onSlotDown, onEventDown: onEventDown, onResizeDown: onResizeDown, onEventActivate: onEventActivate, onSlotActivate: onSlotActivate }, data.day.valueOf()));
+                            }) })] })] }) }));
+}
+export default TimeGridView;

package/dist/calendar/views/daygrid/DayCell.d.ts

@@ -0,0 +1,19 @@
+import type { Dayjs } from 'dayjs';
+export interface DayCellProps {
+    dayKey: string;
+    date: Dayjs;
+    label: string;
+    title: string;
+    isToday: boolean;
+    isOther: boolean;
+    hidden: boolean;
+    focusable: boolean;
+    selected: boolean;
+    dropping: boolean;
+    /** background-event colour tinting this cell */
+    bgColor?: string;
+    className: string;
+}
+declare function DayCell({ dayKey, label, title, isToday, isOther, hidden, focusable, selected, dropping, bgColor, className, }: DayCellProps): import("react").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof DayCell>;
+export default _default;

package/dist/calendar/views/daygrid/DayCell.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+function DayCell({ dayKey, label, title, isToday, isOther, hidden, focusable, selected, dropping, bgColor, className, }) {
+    const cls = [
+        'rbs-dg-cell',
+        isToday && 'rbs-dg-today',
+        isOther && 'rbs-dg-other',
+        selected && 'rbs-dg-selected',
+        dropping && 'rbs-dg-drop',
+        bgColor && 'rbs-dg-bg',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("div", { className: cls, role: "gridcell", "data-date": dayKey, tabIndex: focusable ? 0 : -1, "aria-label": title, style: bgColor ? { '--rbs-bg': bgColor } : undefined, children: !hidden && (_jsx("button", { type: "button", className: "rbs-dg-num", "data-nav": dayKey, tabIndex: -1, "aria-hidden": "true", children: label })) }));
+}
+export default memo(DayCell);

package/dist/calendar/views/daygrid/EventChip.d.ts

@@ -0,0 +1,19 @@
+import type { CalendarOptions, CalendarViewName } from '../../types';
+import type { PEvent } from './layout';
+export interface ChipProps extends Pick<CalendarOptions, 'eventContent' | 'eventClassNames' | 'eventTimeFormat'> {
+    ev: PEvent;
+    view: CalendarViewName;
+    isStart: boolean;
+    isEnd: boolean;
+    /** Grid placement inside the week layer; omitted in the "+N more" popover. */
+    col?: number;
+    span?: number;
+    lane?: number;
+    canMove?: boolean;
+    canResize?: boolean;
+    dragging?: boolean;
+    now: number;
+}
+declare function EventChip({ ev, view, isStart, isEnd, col, span, lane, canMove, canResize, dragging, now, eventContent, eventClassNames, eventTimeFormat, }: ChipProps): import("react").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof EventChip>;
+export default _default;

package/dist/calendar/views/daygrid/EventChip.js

@@ -0,0 +1,40 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { tipText } from '../../utils';
+function EventChip({ ev, view, isStart, isEnd, col, span = 1, lane = 0, canMove, canResize, dragging, now, eventContent, eventClassNames, eventTimeFormat, }) {
+    const { ne } = ev;
+    const src = ne.source;
+    const block = src.display !== 'list-item' && (src.display === 'block' || ne.allDay || ev.sVal !== ev.eVal);
+    const timeText = !ne.allDay && isStart ? ne.start.format(eventTimeFormat ?? 'HH:mm') : '';
+    const arg = {
+        event: src,
+        view,
+        timeText,
+        isStart,
+        isEnd,
+        isPast: ne.end.valueOf() <= now,
+        isFuture: ne.start.valueOf() > now,
+        isToday: ev.sVal <= now && now < ev.eVal + 86400000,
+    };
+    const extra = eventClassNames?.(arg) ?? [];
+    const cls = [
+        'rbs-dg-ev',
+        block ? 'rbs-dg-ev--block' : 'rbs-dg-ev--dot',
+        !isStart && 'rbs-dg-ev--cont-l',
+        !isEnd && 'rbs-dg-ev--cont-r',
+        dragging && 'rbs-dg-ev--dragging',
+        canMove && 'rbs-dg-ev--movable',
+        ...(src.classNames ?? []),
+        ...(Array.isArray(extra) ? extra : [extra]),
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const style = {
+        ...(col === undefined ? null : { gridColumn: `${col + 1} / span ${span}`, gridRow: lane + 1 }),
+        ...(src.color ? { '--rbs-ev': src.color } : null),
+        ...(src.textColor ? { '--rbs-ev-fg': src.textColor } : null),
+    };
+    const label = `${src.title}, ${ne.allDay ? 'all day' : ne.start.format(eventTimeFormat ?? 'HH:mm')}`;
+    return (_jsxs("button", { type: "button", className: cls, style: style, "data-eid": String(ne.id), "data-drag": col === undefined ? undefined : '', "aria-label": label, "data-tip": tipText(ne), "data-tip-color": src.color, children: [eventContent ? (eventContent(arg)) : (_jsxs(_Fragment, { children: [!block && _jsx("span", { className: "rbs-dg-dot" }), timeText && _jsx("span", { className: "rbs-dg-time", children: timeText }), _jsx("span", { className: "rbs-dg-title", children: src.title })] })), canResize && block && isEnd && _jsx("span", { className: "rbs-dg-resizer", "data-resize": "" })] }));
+}
+export default memo(EventChip);

package/dist/calendar/views/daygrid/layout.d.ts

@@ -0,0 +1,30 @@
+import type { NormalizedEvent } from '../../utils';
+export declare const DAY = 86400000;
+export declare const HEAD_H = 26;
+export declare const LANE_H = 22;
+/** An event with its first/last visible day (local midnight values). */
+export interface PEvent {
+    ne: NormalizedEvent;
+    sVal: number;
+    eVal: number;
+}
+export interface Seg {
+    ev: PEvent;
+    colStart: number;
+    colEnd: number;
+    isStart: boolean;
+    isEnd: boolean;
+    lane: number;
+}
+export interface RowLayout {
+    shown: Seg[];
+    /** Hidden-event count per column ("+N more"). */
+    more: number[];
+    /** Lane rows to reserve (shown lanes + the "more" row). */
+    rows: number;
+}
+export declare function prepare(ne: NormalizedEvent): PEvent;
+/** Cut events into one week row and pack them into lanes. `limitFor(lanes)` -> max visible lanes (Infinity = all). */
+export declare function layoutRow(vals: number[], active: boolean[], events: PEvent[], limitFor: (lanes: number) => number): RowLayout;
+/** ISO week number of the Thursday in a row. */
+export declare function isoWeek(ms: number): number;

package/dist/calendar/views/daygrid/layout.js

@@ -0,0 +1,63 @@
+export const DAY = 86400000;
+export const HEAD_H = 26;
+export const LANE_H = 22;
+export function prepare(ne) {
+    const sVal = ne.start.startOf('day').valueOf();
+    const eVal = Math.max(sVal, ne.end.subtract(1, 'millisecond').startOf('day').valueOf());
+    return { ne, sVal, eVal };
+}
+/** Cut events into one week row and pack them into lanes. `limitFor(lanes)` -> max visible lanes (Infinity = all). */
+export function layoutRow(vals, active, events, limitFor) {
+    const segs = [];
+    for (const ev of events) {
+        let a = -1;
+        let b = -1;
+        for (let i = 0; i < vals.length; i++) {
+            if (active[i] && vals[i] >= ev.sVal && vals[i] <= ev.eVal) {
+                if (a < 0)
+                    a = i;
+                b = i;
+            }
+        }
+        if (a < 0)
+            continue;
+        segs.push({ ev, colStart: a, colEnd: b, isStart: vals[a] === ev.sVal, isEnd: vals[b] === ev.eVal, lane: 0 });
+    }
+    segs.sort((x, y) => x.colStart - y.colStart ||
+        y.colEnd - y.colStart - (x.colEnd - x.colStart) ||
+        Number(y.ev.ne.allDay) - Number(x.ev.ne.allDay) ||
+        x.ev.ne.start.valueOf() - y.ev.ne.start.valueOf());
+    const ends = [];
+    for (const s of segs) {
+        let lane = ends.findIndex(e => e < s.colStart);
+        if (lane < 0) {
+            lane = ends.length;
+            ends.push(0);
+        }
+        ends[lane] = s.colEnd;
+        s.lane = lane;
+    }
+    const limit = limitFor(ends.length);
+    const more = vals.map(() => 0);
+    if (limit >= ends.length)
+        return { shown: segs, more, rows: ends.length };
+    const shown = [];
+    for (const s of segs) {
+        if (s.lane < limit)
+            shown.push(s);
+        else
+            for (let i = s.colStart; i <= s.colEnd; i++)
+                if (active[i])
+                    more[i]++;
+    }
+    return { shown, more, rows: limit + 1 };
+}
+/** ISO week number of the Thursday in a row. */
+export function isoWeek(ms) {
+    const d = new Date(ms);
+    const t = Date.UTC(d.getFullYear(), d.getMonth(), d.getDate());
+    const day = new Date(t).getUTCDay() || 7;
+    const thu = t + (4 - day) * DAY;
+    const yearStart = Date.UTC(new Date(thu).getUTCFullYear(), 0, 1);
+    return Math.ceil(((thu - yearStart) / DAY + 1) / 7);
+}

package/dist/calendar/views/list/bucket.d.ts

@@ -0,0 +1,8 @@
+import type { Dayjs } from 'dayjs';
+import type { DateRange } from '../../types';
+import type { NormalizedEvent } from '../../utils';
+export declare const dayKey: (d: Dayjs) => string;
+/** Bucket events by every day they cover inside `range` (all-day first, then by start). O(events x days covered). */
+export declare function bucketByDay(events: NormalizedEvent[], range: DateRange): Map<string, NormalizedEvent[]>;
+/** "9:00 AM – 10:00 AM", "all-day" or a clipped range for the given day of a multi-day event. */
+export declare function timeText(e: NormalizedEvent, day: Dayjs, fmt?: string): string;

package/dist/calendar/views/list/bucket.js

@@ -0,0 +1,37 @@
+export const dayKey = (d) => d.format('YYYY-MM-DD');
+const visible = (e) => e.source.display !== 'background' && e.source.display !== 'none';
+/** Bucket events by every day they cover inside `range` (all-day first, then by start). O(events x days covered). */
+export function bucketByDay(events, range) {
+    const map = new Map();
+    for (const e of events) {
+        if (!visible(e) || !e.start.isBefore(range.end) || !e.end.isAfter(range.start))
+            continue;
+        let d = e.start.isAfter(range.start) ? e.start.startOf('day') : range.start;
+        for (; d.isBefore(e.end) && d.isBefore(range.end); d = d.add(1, 'day')) {
+            const key = dayKey(d);
+            const list = map.get(key);
+            if (list)
+                list.push(e);
+            else
+                map.set(key, [e]);
+        }
+    }
+    for (const list of map.values()) {
+        list.sort((a, b) => Number(b.allDay) - Number(a.allDay) || a.start.valueOf() - b.start.valueOf());
+    }
+    return map;
+}
+/** "9:00 AM – 10:00 AM", "all-day" or a clipped range for the given day of a multi-day event. */
+export function timeText(e, day, fmt = 'h:mm A') {
+    if (e.allDay)
+        return 'all-day';
+    const startsToday = e.start.isSame(day, 'day');
+    const endsToday = !e.end.isAfter(day.add(1, 'day').startOf('day'));
+    if (startsToday && endsToday)
+        return `${e.start.format(fmt)} – ${e.end.format(fmt)}`;
+    if (startsToday)
+        return `${e.start.format(fmt)} –`;
+    if (endsToday)
+        return `– ${e.end.format(fmt)}`;
+    return 'all-day';
+}

package/dist/calendar/views/multimonth/Cell.d.ts

@@ -0,0 +1,12 @@
+import type { Dayjs } from 'dayjs';
+import { type MonthShared } from './shared';
+interface CellProps {
+    day: Dayjs;
+    shared: MonthShared;
+    tabbable: boolean;
+    /** day belongs to another month (continuous mode tints, never hides) */
+    alt?: boolean;
+}
+declare function Cell({ day, shared, tabbable, alt }: CellProps): import("react").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof Cell>;
+export default _default;

package/dist/calendar/views/multimonth/Cell.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { tipText } from '../../utils';
+import { dayKey } from '../list/bucket';
+import { dayTip, dayTitle, MAX_CHIPS } from './shared';
+function Cell({ day, shared, tabbable, alt }) {
+    const { buckets, bgBuckets, today, compact, view, onDateClick, onEventClick, goTo, eventClassNames, eventContent, dayCellClassNames, } = shared;
+    const list = buckets.get(dayKey(day));
+    const bg = bgBuckets.get(dayKey(day))?.[0]?.source;
+    const isToday = day.isSame(today, 'day');
+    const extra = dayCellClassNames?.({ date: day, isToday, isOther: false });
+    const extraCls = Array.isArray(extra) ? extra.join(' ') : (extra ?? '');
+    const cls = `rbs-mm-cell${isToday ? ' rbs-mm-today' : ''}${list ? ' rbs-mm-busy' : ''}${alt ? ' rbs-mm-alt' : ''}${bg ? ' rbs-mm-bg' : ''} ${extraCls}`;
+    const nowD = today;
+    return (_jsxs("div", { role: "gridcell", className: cls, "data-day": dayKey(day), style: bg ? { '--rbs-bg': bg.color ?? 'var(--rbs-accent)' } : undefined, tabIndex: tabbable ? 0 : -1, "data-tip": dayTip(day, list), "aria-label": dayTitle(day, list), "aria-current": isToday ? 'date' : undefined, onClick: ev => onDateClick?.({ date: day, allDay: true, jsEvent: ev }), onKeyDown: ev => {
+            if (ev.key === 'Enter' && ev.target === ev.currentTarget) {
+                onDateClick?.({ date: day, allDay: true, jsEvent: ev });
+            }
+        }, children: [_jsx("span", { className: "rbs-mm-num", children: day.date() }), list && compact && _jsx("span", { className: "rbs-mm-dot" }), list && !compact && (_jsxs("span", { className: "rbs-mm-chips", children: [list.slice(0, MAX_CHIPS).map(e => {
+                        const isStart = e.start.isSame(day, 'day');
+                        const arg = {
+                            event: e.source,
+                            view,
+                            timeText: e.allDay ? '' : e.start.format('h:mma'),
+                            isStart,
+                            isEnd: !e.end.isAfter(day.add(1, 'day')),
+                            isPast: e.end.isBefore(nowD),
+                            isFuture: e.start.isAfter(nowD),
+                            isToday,
+                        };
+                        const ec = eventClassNames?.(arg);
+                        return (_jsx("button", { type: "button", tabIndex: -1, "data-tip": tipText(e), "data-tip-color": e.source.color, className: `rbs-mm-chip ${(e.source.classNames ?? []).join(' ')} ${Array.isArray(ec) ? ec.join(' ') : (ec ?? '')}`, style: {
+                                background: e.source.color ?? 'var(--rbs-accent)',
+                                color: e.source.textColor ?? 'var(--rbs-event-fg)',
+                            }, onClick: ev => {
+                                ev.stopPropagation();
+                                onEventClick?.({ event: e.source, jsEvent: ev });
+                            }, children: eventContent ? eventContent(arg) : e.source.title }, e.id));
+                    }), list.length > MAX_CHIPS && (_jsxs("button", { type: "button", tabIndex: -1, className: "rbs-mm-more", onClick: ev => {
+                            ev.stopPropagation();
+                            goTo('dayGridDay', day);
+                        }, children: ["+", list.length - MAX_CHIPS, " more"] }))] }))] }));
+}
+export default memo(Cell);

package/dist/calendar/views/multimonth/Continuous.d.ts

@@ -0,0 +1,8 @@
+import type { DateRange } from '../../types';
+import { type MonthShared } from './shared';
+declare function Continuous({ range, shared }: {
+    range: DateRange;
+    shared: MonthShared;
+}): import("react").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof Continuous>;
+export default _default;