react-big-schedule 8.1.0 → 9.0.1

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import Cell from './Cell';
+import { weekdayOrder } from './MonthGrid';
+import { onGridKey, weekNumber } from './shared';
+function Continuous({ range, shared }) {
+    const { firstDay, weekends, weekNumbers, today } = shared;
+    const cols = weekdayOrder(firstDay, weekends);
+    const weeks = useMemo(() => {
+        const out = [];
+        for (let d = range.start; d.isBefore(range.end);) {
+            const row = [];
+            for (let i = 0; i < 7; i++, d = d.add(1, 'day'))
+                if (weekends || (d.day() !== 0 && d.day() !== 6))
+                    row.push(d);
+            out.push(row);
+        }
+        return out;
+    }, [range, weekends]);
+    const template = `5.5rem ${weekNumbers ? '1.75rem ' : ''}repeat(${cols.length}, minmax(0, 1fr))`;
+    const tabDay = today.isSame(range.start, 'year') ? today : range.start.add(7, 'day');
+    return (_jsxs("div", { role: "grid", "aria-label": "Year", onKeyDown: e => onGridKey(e), children: [_jsxs("div", { role: "row", className: "rbs-mm-row rbs-mm-head rbs-mm-sticky", style: { gridTemplateColumns: template }, children: [_jsx("span", { role: "columnheader" }), weekNumbers && _jsx("span", { role: "columnheader", className: "rbs-mm-wk" }), cols.map(d => (_jsx("span", { role: "columnheader", className: "rbs-mm-dow", children: today.day(d).format('ddd') }, d)))] }), weeks.map(row => {
+                const first = row[0];
+                const marker = row.find(d => d.date() === 1);
+                return (_jsxs("div", { role: "row", className: "rbs-mm-row", style: { gridTemplateColumns: template }, children: [_jsx("span", { className: `rbs-mm-marker${marker ? ' rbs-mm-marker-on' : ''}`, children: marker ? marker.format('MMMM') : '' }), weekNumbers && _jsx("span", { className: "rbs-mm-wk", children: weekNumber(first, firstDay) }), row.map(d => (_jsx(Cell, { day: d, shared: shared, tabbable: d.isSame(tabDay, 'day'), alt: d.month() % 2 === 1 }, d.valueOf())))] }, first.valueOf()));
+            })] }));
+}
+export default memo(Continuous);

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

@@ -0,0 +1,10 @@
+import type { Dayjs } from 'dayjs';
+import { type MonthShared } from './shared';
+/** Weekday columns in display order (firstDay-rotated, weekends optionally dropped). */
+export declare function weekdayOrder(firstDay: number, weekends: boolean): number[];
+declare function MonthGrid({ month, shared }: {
+    month: Dayjs;
+    shared: MonthShared;
+}): import("react").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof MonthGrid>;
+export default _default;

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import Cell from './Cell';
+import { onGridKey, weekNumber } from './shared';
+/** Weekday columns in display order (firstDay-rotated, weekends optionally dropped). */
+export function weekdayOrder(firstDay, weekends) {
+    return Array.from({ length: 7 }, (_, i) => (firstDay + i) % 7).filter(d => weekends || (d !== 0 && d !== 6));
+}
+function MonthGrid({ month, shared }) {
+    const { firstDay, weekends, weekNumbers, today, goTo } = shared;
+    const cols = weekdayOrder(firstDay, weekends);
+    const weeks = useMemo(() => {
+        const out = [];
+        const start = month.startOf('month');
+        const lead = (start.day() - firstDay + 7) % 7;
+        let d = start.subtract(lead, 'day');
+        const end = month.endOf('month');
+        while (!d.isAfter(end)) {
+            const row = [];
+            for (let i = 0; i < 7; i++, d = d.add(1, 'day')) {
+                if (weekends || (d.day() !== 0 && d.day() !== 6))
+                    row.push(d.month() === month.month() ? d : null);
+            }
+            out.push(row);
+        }
+        return out;
+    }, [month, firstDay, weekends]);
+    const tabDay = today.isSame(month, 'month') ? today : month.startOf('month');
+    const label = month.format('MMMM YYYY');
+    const template = `${weekNumbers ? '1.75rem ' : ''}repeat(${cols.length}, minmax(0, 1fr))`;
+    return (_jsxs("section", { className: "rbs-mm-month", "aria-label": label, children: [_jsx("h3", { className: "rbs-mm-title", children: _jsxs("button", { type: "button", onClick: () => goTo('dayGridMonth', month.startOf('month')), children: [month.format('MMMM'), _jsxs("span", { className: "rbs-mm-year-lbl", children: [" ", month.format('YYYY')] })] }) }), _jsxs("div", { role: "grid", "aria-label": label, onKeyDown: e => onGridKey(e), children: [_jsxs("div", { role: "row", className: "rbs-mm-row rbs-mm-head", style: { gridTemplateColumns: template }, children: [weekNumbers && _jsx("span", { role: "columnheader", className: "rbs-mm-wk" }), cols.map(d => (_jsx("span", { role: "columnheader", className: "rbs-mm-dow", children: today.day(d).format('dd') }, d)))] }), weeks.map((row, i) => {
+                        const first = row.find((x) => x !== null);
+                        return (_jsxs("div", { role: "row", className: "rbs-mm-row", style: { gridTemplateColumns: template }, children: [weekNumbers && _jsx("span", { className: "rbs-mm-wk", children: weekNumber(first, firstDay) }), row.map((d, j) => d ? (_jsx(Cell, { day: d, shared: shared, tabbable: d.isSame(tabDay, 'day') }, d.valueOf())) : (_jsx("span", { role: "gridcell", className: "rbs-mm-pad" }, `${i}-${j}`)))] }, first.valueOf()));
+                    })] })] }));
+}
+export default memo(MonthGrid);

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

@@ -0,0 +1,27 @@
+import type { Dayjs } from 'dayjs';
+import type { KeyboardEvent } from 'react';
+import type { CalendarViewName, CalendarViewProps } from '../../types';
+import type { NormalizedEvent } from '../../utils';
+export interface MonthShared extends Pick<CalendarViewProps, 'eventClassNames' | 'eventContent' | 'onDateClick' | 'onEventClick' | 'goTo' | 'dayCellClassNames'> {
+    buckets: Map<string, NormalizedEvent[]>;
+    /** background events by day: tint busy days */
+    bgBuckets: Map<string, NormalizedEvent[]>;
+    today: Dayjs;
+    firstDay: number;
+    weekends: boolean;
+    weekNumbers: boolean;
+    /** year grid: dot instead of chips */
+    compact: boolean;
+    view: CalendarViewName;
+}
+export declare const MAX_CHIPS = 3;
+/** ISO-8601 number of the week containing `d`, judged by that week's Thursday (weeks start on `firstDay`). */
+export declare function weekNumber(d: Dayjs, firstDay: number): number;
+export declare const dayTitle: (d: Dayjs, list: NormalizedEvent[] | undefined) => string;
+/** Hover-card text for a day: its date, then one line per event. */
+export declare const dayTip: (d: Dayjs, list: NormalizedEvent[] | undefined) => string;
+/**
+ * Arrow-key navigation by date: left/right = +-1 day, up/down = +-1 week. Looks the target day up in the whole
+ * multi-month root, so focus crosses from one month's grid to the next; hidden weekend days are skipped.
+ */
+export declare function onGridKey(e: KeyboardEvent<HTMLElement>): void;

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

@@ -0,0 +1,40 @@
+export const MAX_CHIPS = 3;
+/** ISO-8601 number of the week containing `d`, judged by that week's Thursday (weeks start on `firstDay`). */
+export function weekNumber(d, firstDay) {
+    const thu = d
+        .startOf('day')
+        .subtract((d.day() - firstDay + 7) % 7, 'day')
+        .add((4 - firstDay + 7) % 7, 'day');
+    return Math.floor(thu.diff(thu.startOf('year'), 'day') / 7) + 1;
+}
+export const dayTitle = (d, list) => list?.length ? `${d.format('ddd, MMM D')}: ${list.map(e => e.source.title).join(', ')}` : d.format('ddd, MMM D');
+/** Hover-card text for a day: its date, then one line per event. */
+export const dayTip = (d, list) => [
+    d.format('dddd, MMM D'),
+    ...(list ?? []).map(e => `${e.allDay ? 'All day' : e.start.format('HH:mm')}  ${e.source.title}`),
+].join('\n');
+const shiftDay = (key, n) => {
+    const [y = 0, m = 1, d = 1] = key.split('-').map(Number);
+    return new Date(Date.UTC(y, m - 1, d + n)).toISOString().slice(0, 10);
+};
+/**
+ * Arrow-key navigation by date: left/right = +-1 day, up/down = +-1 week. Looks the target day up in the whole
+ * multi-month root, so focus crosses from one month's grid to the next; hidden weekend days are skipped.
+ */
+export function onGridKey(e) {
+    const step = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 }[e.key];
+    const key = e.target.closest('[data-day]')?.dataset.day;
+    if (!step || !key)
+        return;
+    e.preventDefault();
+    const root = e.currentTarget.closest('.rbs-mm') ?? e.currentTarget;
+    let target = key;
+    for (let i = 0; i < 3; i++) {
+        target = shiftDay(target, step);
+        const el = root.querySelector(`[data-day="${target}"]`);
+        if (el)
+            return el.focus();
+        if (Math.abs(step) > 1)
+            return;
+    }
+}

package/dist/calendar/views/timegrid/DayColumn.d.ts

@@ -0,0 +1,49 @@
+import type { Dayjs } from 'dayjs';
+import { type CSSProperties, type ReactNode, type PointerEvent as ReactPointerEvent } from 'react';
+import type { CalendarEvent, CalendarViewName, EventContentArg } from '../../types';
+import { type NormalizedEvent } from '../../utils';
+import type { DayData } from './model';
+export interface Geometry {
+    minMin: number;
+    maxMin: number;
+    slotDur: number;
+    slotH: number;
+    ppm: number;
+}
+export interface EventRender {
+    view: CalendarViewName;
+    timeFormat: string;
+    eventContent?: (arg: EventContentArg) => ReactNode;
+    eventClassNames?: (arg: EventContentArg) => string | string[];
+    now: Dayjs;
+}
+export interface Ghost {
+    ev: NormalizedEvent;
+    sMin: number;
+    eMin: number;
+}
+export interface DayColumnProps {
+    data: DayData;
+    dayIdx: number;
+    isToday: boolean;
+    geo: Geometry;
+    render: EventRender;
+    /** Minutes since midnight, only on today's column. */
+    nowMin: number | null;
+    selStart: number | null;
+    selEnd: number | null;
+    ghost: Ghost | null;
+    /** Editability resolved by the view: [startEditable, durationEditable]. */
+    canEdit: (e: CalendarEvent) => [boolean, boolean];
+    onSlotDown: (e: ReactPointerEvent, dayIdx: number) => void;
+    onEventDown: (e: ReactPointerEvent, ev: NormalizedEvent, dayIdx: number) => void;
+    onResizeDown: (e: ReactPointerEvent, ev: NormalizedEvent, dayIdx: number) => void;
+    onEventActivate: (e: MouseEvent, ev: NormalizedEvent) => void;
+    onSlotActivate: (date: Dayjs) => void;
+}
+export declare function eventArg(r: EventRender, ev: NormalizedEvent, isStart: boolean, isEnd: boolean): EventContentArg;
+export declare const joinClasses: (...parts: (string | string[] | undefined | false)[]) => string;
+export declare const eventStyle: (ev: NormalizedEvent) => CSSProperties;
+declare function DayColumn({ data, dayIdx, isToday, geo, render, nowMin, selStart, selEnd, ghost, canEdit, onSlotDown, onEventDown, onResizeDown, onEventActivate, onSlotActivate, }: DayColumnProps): import("react").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof DayColumn>;
+export default _default;

package/dist/calendar/views/timegrid/DayColumn.js

@@ -0,0 +1,86 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useRef, useState, } from 'react';
+import { layoutLanes, tipText } from '../../utils';
+export function eventArg(r, ev, isStart, isEnd) {
+    const fmt = (d) => d.format(r.timeFormat);
+    return {
+        event: ev.source,
+        view: r.view,
+        timeText: ev.allDay ? '' : `${fmt(ev.start)} - ${fmt(ev.end)}`,
+        isStart,
+        isEnd,
+        isPast: ev.end.isBefore(r.now),
+        isFuture: ev.start.isAfter(r.now),
+        isToday: ev.start.isSame(r.now, 'day'),
+    };
+}
+export const joinClasses = (...parts) => parts.flat().filter(Boolean).join(' ');
+export const eventStyle = (ev) => ({
+    background: ev.source.color ?? 'var(--rbs-accent)',
+    color: ev.source.textColor ?? 'var(--rbs-event-fg)',
+});
+function EventBody({ arg, render }) {
+    if (render.eventContent)
+        return _jsx(_Fragment, { children: render.eventContent(arg) });
+    return (_jsxs(_Fragment, { children: [arg.timeText && _jsx("div", { className: "rbs-tg-ev-time", children: arg.timeText }), _jsx("div", { className: "rbs-tg-ev-title", children: arg.event.title })] }));
+}
+function DayColumn({ data, dayIdx, isToday, geo, render, nowMin, selStart, selEnd, ghost, canEdit, onSlotDown, onEventDown, onResizeDown, onEventActivate, onSlotActivate, }) {
+    const { minMin, maxMin, slotDur, slotH, ppm } = geo;
+    const y = (min) => (min - minMin) * ppm;
+    const [kb, setKb] = useState(null);
+    const kbRef = useRef(null);
+    const laid = useMemo(() => layoutLanes(data.segs), [data.segs]);
+    const hourPx = (60 / slotDur) * slotH;
+    const gridStyle = {
+        height: (maxMin - minMin) * ppm,
+        backgroundImage: 'linear-gradient(var(--rbs-border) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--rbs-border) 45%, transparent) 1px, transparent 1px)',
+        backgroundSize: `100% ${hourPx}px, 100% ${slotH}px`,
+        backgroundPosition: `0 ${((60 - (minMin % 60)) % 60) * ppm}px, 0 0`,
+    };
+    useEffect(() => {
+        if (kb !== null)
+            kbRef.current?.scrollIntoView({ block: 'nearest' });
+    }, [kb]);
+    const onKeyDown = (e) => {
+        if (e.target !== e.currentTarget || kb === null)
+            return;
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            const next = kb + (e.key === 'ArrowDown' ? slotDur : -slotDur);
+            setKb(Math.max(minMin, Math.min(maxMin - slotDur, next)));
+        }
+        else if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onSlotActivate(data.day.startOf('day').add(kb, 'minute'));
+        }
+    };
+    const label = data.day.format('dddd, MMMM D');
+    const kbText = kb === null ? '' : `, ${data.day.startOf('day').add(kb, 'minute').format(render.timeFormat)}`;
+    return (_jsxs("div", { role: "gridcell", tabIndex: 0, "aria-label": label + kbText, className: joinClasses('rbs-tg-col', isToday && 'rbs-tg-today'), style: gridStyle, onPointerDown: e => onSlotDown(e, dayIdx), onKeyDown: onKeyDown, onFocus: e => {
+            if (e.target === e.currentTarget && e.currentTarget.matches(':focus-visible')) {
+                setKb(k => k ?? Math.max(minMin, Math.min(maxMin - slotDur, 8 * 60)));
+            }
+        }, onBlur: () => setKb(null), children: [data.nonBiz.map(([s, e]) => (_jsx("div", { className: "rbs-tg-nonbiz", style: { top: y(s), height: (e - s) * ppm } }, s))), data.bgs.map(b => (_jsx("div", { className: "rbs-tg-bg", style: { top: y(b.sMin), height: (b.eMin - b.sMin) * ppm, background: b.color ?? 'var(--rbs-accent)' } }, b.id))), selStart !== null && selEnd !== null && (_jsx("div", { className: "rbs-tg-select", style: { top: y(selStart), height: (selEnd - selStart) * ppm } })), kb !== null && _jsx("div", { ref: kbRef, className: "rbs-tg-kb", style: { top: y(kb), height: slotH } }), laid.map(({ item, lane, lanes }) => (_jsx(EventSeg, { seg: item, lane: lane, lanes: lanes, dayIdx: dayIdx, geo: geo, render: render, canEdit: canEdit, isToday: isToday, onEventDown: onEventDown, onResizeDown: onResizeDown, onEventActivate: onEventActivate }, `${item.ev.id}-${item.sMin}`))), ghost && (_jsx("div", { className: "rbs-tg-ev rbs-tg-ghost", style: {
+                    ...eventStyle(ghost.ev),
+                    top: y(ghost.sMin),
+                    height: Math.max((ghost.eMin - ghost.sMin) * ppm, 20),
+                    left: 0,
+                    right: 2,
+                }, children: _jsx("div", { className: "rbs-tg-ev-title", children: ghost.ev.source.title }) })), nowMin !== null && nowMin >= minMin && nowMin <= maxMin && (_jsx("div", { className: "rbs-tg-now", style: { top: y(nowMin) } }))] }));
+}
+function EventSeg({ seg, lane, lanes, dayIdx, geo, render, canEdit, onEventDown, onResizeDown, onEventActivate, }) {
+    const { ev } = seg;
+    const [startEditable, durationEditable] = canEdit(ev.source);
+    const height = Math.max((seg.eMin - seg.sMin) * geo.ppm - 1, 20);
+    const arg = eventArg(render, ev, seg.isStart, seg.isEnd);
+    const width = 100 / lanes;
+    return (_jsxs("button", { type: "button", "data-event-id": String(ev.id), "aria-label": `${ev.source.title}, ${arg.timeText}`, "data-tip": tipText(ev), "data-tip-color": ev.source.color, className: joinClasses('rbs-tg-ev', height < 36 && 'rbs-tg-ev-sm', !seg.isStart && 'rbs-tg-ev-cont-top', !seg.isEnd && 'rbs-tg-ev-cont-bottom', startEditable && 'rbs-tg-ev-editable', ev.source.classNames, render.eventClassNames?.(arg)), style: {
+            ...eventStyle(ev),
+            top: (seg.sMin - geo.minMin) * geo.ppm,
+            height,
+            left: `${lane * width}%`,
+            width: `calc(${width}% - 2px)`,
+            zIndex: lane + 1,
+        }, onPointerDown: e => onEventDown(e, ev, dayIdx), onClick: e => onEventActivate(e.nativeEvent, ev), children: [_jsx(EventBody, { arg: arg, render: render }), seg.isEnd && durationEditable && (_jsx("span", { className: "rbs-tg-resize", onPointerDown: e => onResizeDown(e, ev, dayIdx) }))] }));
+}
+export default memo(DayColumn);

package/dist/calendar/views/timegrid/model.d.ts

@@ -0,0 +1,55 @@
+import type { Dayjs } from 'dayjs';
+import type { BusinessHours, CalendarEvent } from '../../types';
+import { type NormalizedEvent } from '../../utils';
+/** The slice of a timed event that falls inside one day column. */
+export interface Seg {
+    ev: NormalizedEvent;
+    start: Dayjs;
+    end: Dayjs;
+    /** Minutes since the start of the day. */
+    sMin: number;
+    eMin: number;
+    isStart: boolean;
+    isEnd: boolean;
+}
+export interface BgSeg {
+    id: CalendarEvent['id'];
+    color?: string;
+    sMin: number;
+    eMin: number;
+}
+export interface DayData {
+    day: Dayjs;
+    segs: Seg[];
+    bgs: BgSeg[];
+    /** Minute ranges shaded as non-business time. */
+    nonBiz: [number, number][];
+}
+export interface AllDayBar {
+    ev: NormalizedEvent;
+    /** Visible column indexes, inclusive. */
+    si: number;
+    ei: number;
+    lane: number;
+    isStart: boolean;
+    isEnd: boolean;
+}
+export declare const DEFAULT_BUSINESS: Required<BusinessHours>;
+export declare const isHidden: (e: NormalizedEvent) => boolean;
+export declare const isBackground: (e: NormalizedEvent) => boolean;
+export declare function buildDays(days: Dayjs[], events: NormalizedEvent[], minMin: number, maxMin: number, businessHours: boolean | BusinessHours | undefined): DayData[];
+/** Clip all-day events to the visible columns and stack them into lanes. */
+export declare function buildAllDayBars(days: Dayjs[], events: NormalizedEvent[]): {
+    bars: AllDayBar[];
+    lanes: number;
+};
+/** Column span of an event over the visible days, or null when it is outside them. */
+export declare function spanOf(days: Dayjs[], ev: {
+    start: Dayjs;
+    end: Dayjs;
+}): {
+    si: number;
+    ei: number;
+} | null;
+/** ISO 8601 week number. */
+export declare function isoWeek(d: Dayjs): number;

package/dist/calendar/views/timegrid/model.js

@@ -0,0 +1,102 @@
+import { parseTime } from '../../utils';
+export const DEFAULT_BUSINESS = {
+    daysOfWeek: [1, 2, 3, 4, 5],
+    startTime: '09:00',
+    endTime: '17:00',
+};
+export const isHidden = (e) => e.source.display === 'none';
+export const isBackground = (e) => e.source.display === 'background';
+export function buildDays(days, events, minMin, maxMin, businessHours) {
+    const bh = businessHours ? { ...DEFAULT_BUSINESS, ...(businessHours === true ? {} : businessHours) } : null;
+    return days.map(day => {
+        const base = day.startOf('day');
+        const wStart = base.add(minMin, 'minute');
+        const wEnd = base.add(maxMin, 'minute');
+        const dayEnd = base.add(1, 'day');
+        const segs = [];
+        const bgs = [];
+        for (const ev of events) {
+            if (isHidden(ev) || !ev.start.isBefore(wEnd) || !ev.end.isAfter(wStart))
+                continue;
+            const start = ev.start.isAfter(wStart) ? ev.start : wStart;
+            const end = ev.end.isBefore(wEnd) ? ev.end : wEnd;
+            const sMin = start.diff(base, 'minute');
+            const eMin = end.diff(base, 'minute');
+            if (isBackground(ev)) {
+                bgs.push({
+                    id: ev.id,
+                    color: ev.source.color,
+                    sMin: ev.allDay ? minMin : sMin,
+                    eMin: ev.allDay ? maxMin : eMin,
+                });
+            }
+            else if (!ev.allDay) {
+                segs.push({ ev, start, end, sMin, eMin, isStart: !ev.start.isBefore(base), isEnd: !ev.end.isAfter(dayEnd) });
+            }
+        }
+        const nonBiz = [];
+        if (bh) {
+            const bs = parseTime(bh.startTime);
+            const be = parseTime(bh.endTime);
+            if (!bh.daysOfWeek.includes(day.day()))
+                nonBiz.push([minMin, maxMin]);
+            else {
+                if (bs > minMin)
+                    nonBiz.push([minMin, Math.min(bs, maxMin)]);
+                if (be < maxMin)
+                    nonBiz.push([Math.max(be, minMin), maxMin]);
+            }
+        }
+        return { day, segs, bgs, nonBiz };
+    });
+}
+/** Clip all-day events to the visible columns and stack them into lanes. */
+export function buildAllDayBars(days, events) {
+    const bars = [];
+    for (const ev of events)
+        if (ev.allDay && !isHidden(ev) && !isBackground(ev))
+            addBar(bars, days, ev);
+    bars.sort((a, b) => a.si - b.si || b.ei - b.si - (a.ei - a.si));
+    const laneEnds = [];
+    for (const b of bars) {
+        let lane = laneEnds.findIndex(end => end < b.si);
+        if (lane === -1)
+            lane = laneEnds.length;
+        laneEnds[lane] = b.ei;
+        b.lane = lane;
+    }
+    return { bars, lanes: laneEnds.length };
+}
+/** Column span of an event over the visible days, or null when it is outside them. */
+export function spanOf(days, ev) {
+    let si = -1;
+    let ei = -1;
+    days.forEach((d, i) => {
+        if (d.startOf('day').isBefore(ev.end) && d.startOf('day').add(1, 'day').isAfter(ev.start)) {
+            if (si === -1)
+                si = i;
+            ei = i;
+        }
+    });
+    return si === -1 ? null : { si, ei };
+}
+function addBar(bars, days, ev) {
+    const span = spanOf(days, ev);
+    if (!span)
+        return;
+    bars.push({
+        ev,
+        ...span,
+        lane: 0,
+        isStart: !ev.start.isBefore(days[span.si].startOf('day')),
+        isEnd: !ev.end.isAfter(days[span.ei].startOf('day').add(1, 'day')),
+    });
+}
+/** ISO 8601 week number. */
+export function isoWeek(d) {
+    const date = new Date(Date.UTC(d.year(), d.month(), d.date()));
+    const dow = date.getUTCDay() || 7;
+    date.setUTCDate(date.getUTCDate() + 4 - dow);
+    const yearStart = Date.UTC(date.getUTCFullYear(), 0, 1);
+    return Math.ceil(((date.getTime() - yearStart) / 86400000 + 1) / 7);
+}

package/dist/components/AddMore.d.ts

@@ -0,0 +1,13 @@
+import type { HeaderItem } from '../types';
+import type SchedulerData from './SchedulerData';
+export interface AddMoreProps {
+    schedulerData: SchedulerData;
+    number: number;
+    left: number;
+    width: number;
+    top: number;
+    clickAction: (headerItem: HeaderItem) => void;
+    headerItem: HeaderItem;
+}
+declare function AddMore({ schedulerData, number, left, width, top, clickAction, headerItem }: AddMoreProps): import("react").JSX.Element;
+export default AddMore;

package/dist/components/AddMore.js

@@ -1,44 +1,11 @@
-import PropTypes from 'prop-types';
 import { jsx as _jsx } from "react/jsx-runtime";
-function AddMore({
-  schedulerData,
-  number,
-  left,
-  width,
-  top,
-  clickAction,
-  headerItem
-}) {
-  const {
-    config
-  } = schedulerData;
-  const content = `+${number} more`;
-  return /*#__PURE__*/_jsx("button", {
-    type: "button",
-    className: "timeline-event",
-    style: {
-      left,
-      width,
-      top
-    },
-    onClick: () => clickAction(headerItem),
-    children: /*#__PURE__*/_jsx("div", {
-      style: {
-        height: config.eventItemHeight,
-        color: '#999',
-        textAlign: 'center'
-      },
-      children: content
-    })
-  });
+function AddMore({ schedulerData, number, left, width, top, clickAction, headerItem }) {
+    const { config } = schedulerData;
+    const content = `+${number} more`;
+    return (_jsx("button", { type: "button", className: "timeline-event", style: { left, width, top }, onClick: () => clickAction(headerItem), children: _jsx("div", { style: {
+                height: config.eventItemHeight,
+                color: 'var(--rbs-muted)',
+                textAlign: 'center',
+            }, children: content }) }));
 }
-AddMore.propTypes = {
-  schedulerData: PropTypes.object.isRequired,
-  number: PropTypes.number.isRequired,
-  left: PropTypes.number.isRequired,
-  width: PropTypes.number.isRequired,
-  top: PropTypes.number.isRequired,
-  clickAction: PropTypes.func.isRequired,
-  headerItem: PropTypes.object.isRequired
-};
-export default AddMore;
+export default AddMore;

package/dist/components/AddMorePopover.d.ts

@@ -0,0 +1,13 @@
+import type { EventPopoverCallbacks, HeaderItem } from '../types';
+import type SchedulerData from './SchedulerData';
+export interface AddMorePopoverProps extends EventPopoverCallbacks {
+    schedulerData: SchedulerData;
+    headerItem: HeaderItem;
+    left: number;
+    top: number;
+    height: number;
+    closeAction: (headerItem?: HeaderItem) => void;
+    moveEvent?: (...args: unknown[]) => void;
+}
+declare function AddMorePopover(props: AddMorePopoverProps): import("react").JSX.Element;
+export default AddMorePopover;

package/dist/components/AddMorePopover.js

@@ -1,99 +1,28 @@
-import { CloseOutlined } from '@ant-design/icons';
-import { Col, Row } from 'antd';
-import PropTypes from 'prop-types';
-import { useState, createElement as _createElement } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { useState } from 'react';
 import DnDSource from './DnDSource';
 import EventItem from './EventItem';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Close } from './ui/Icons';
 function AddMorePopover(props) {
-  const {
-    schedulerData,
-    headerItem,
-    left,
-    top,
-    height,
-    closeAction
-  } = props;
-  const {
-    config,
-    localeDayjs
-  } = schedulerData;
-  const {
-    time,
-    start,
-    end,
-    events
-  } = headerItem;
-  const [dndSource] = useState(new DnDSource(p => p.eventItem, schedulerData.config.dragAndDropEnabled));
-  const header = localeDayjs(new Date(time)).format(config.addMorePopoverHeaderFormat);
-  const durationStart = localeDayjs(new Date(start));
-  const durationEnd = localeDayjs(end);
-  const eventList = events.map((evt, i) => {
-    if (evt !== undefined) {
-      const eventStart = localeDayjs(evt.eventItem.start);
-      const eventEnd = localeDayjs(evt.eventItem.end);
-      const isStart = eventStart >= durationStart;
-      const isEnd = eventEnd < durationEnd;
-      const eventItemTop = 12 + (i + 1) * config.eventItemLineHeight;
-      return /*#__PURE__*/_createElement(EventItem, {
-        ...props,
-        key: evt.eventItem.id,
-        eventItem: evt.eventItem,
-        dndSource: dndSource,
-        leftIndex: 0,
-        isInPopover: true,
-        isStart: isStart,
-        isEnd: isEnd,
-        rightIndex: 1,
-        left: 10,
-        width: 138,
-        top: eventItemTop
-      });
-    }
-    return null;
-  });
-  return /*#__PURE__*/_jsxs("div", {
-    className: "rbs-add-more-popover-overlay",
-    style: {
-      left,
-      top,
-      height,
-      minWidth: '170px'
-    },
-    children: [/*#__PURE__*/_jsxs(Row, {
-      justify: "space-between",
-      align: "middle",
-      children: [/*#__PURE__*/_jsx(Col, {
-        span: 22,
-        children: /*#__PURE__*/_jsx("span", {
-          className: "base-text",
-          children: header
-        })
-      }), /*#__PURE__*/_jsx(Col, {
-        span: 2,
-        children: /*#__PURE__*/_jsx("button", {
-          type: "button",
-          onClick: () => closeAction(undefined),
-          children: /*#__PURE__*/_jsx(CloseOutlined, {})
-        })
-      })]
-    }), eventList?.filter(Boolean)]
-  });
+    const { schedulerData, headerItem, left, top, height, closeAction } = props;
+    const { config, localeDayjs } = schedulerData;
+    const { time, start, end, events } = headerItem;
+    const [dndSource] = useState(() => new DnDSource((p) => p.eventItem, schedulerData.config.dragAndDropEnabled));
+    const header = localeDayjs(new Date(time)).format(config.addMorePopoverHeaderFormat);
+    const durationStart = localeDayjs(new Date(start));
+    const durationEnd = localeDayjs(end);
+    const eventList = events.map((evt, i) => {
+        if (evt !== undefined) {
+            const eventStart = localeDayjs(evt.eventItem.start);
+            const eventEnd = localeDayjs(evt.eventItem.end);
+            const isStart = eventStart >= durationStart;
+            const isEnd = eventEnd < durationEnd;
+            const eventItemTop = 12 + (i + 1) * config.eventItemLineHeight;
+            return (_createElement(EventItem, { ...props, key: evt.eventItem.id, eventItem: evt.eventItem, dndSource: dndSource, leftIndex: 0, isInPopover: true, isStart: isStart, isEnd: isEnd, rightIndex: 1, left: 10, width: 138, top: eventItemTop }));
+        }
+        return null;
+    });
+    return (_jsxs("div", { className: "rbs-add-more-popover-overlay", style: { left, top, height, minWidth: '170px' }, children: [_jsxs("div", { className: "rbs:flex rbs:items-center rbs:justify-between", children: [_jsx("span", { className: "base-text rbs:min-w-0 rbs:flex-1", children: header }), _jsx("button", { type: "button", className: "rbs-icon-btn", "aria-label": "Close", onClick: () => closeAction(undefined), children: _jsx(Close, {}) })] }), eventList.filter(Boolean)] }));
 }
-AddMorePopover.propTypes = {
-  schedulerData: PropTypes.object.isRequired,
-  headerItem: PropTypes.object.isRequired,
-  left: PropTypes.number.isRequired,
-  top: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-  closeAction: PropTypes.func.isRequired,
-  subtitleGetter: PropTypes.func,
-  moveEvent: PropTypes.func,
-  eventItemClick: PropTypes.func,
-  viewEventClick: PropTypes.func,
-  viewEventText: PropTypes.string,
-  viewEvent2Click: PropTypes.func,
-  viewEvent2Text: PropTypes.string,
-  eventItemTemplateResolver: PropTypes.func
-};
-export default AddMorePopover;
+export default AddMorePopover;