jcoffey-dev
f94cc2ce51
Three places built user-visible English out of expressions rather than
writing it as JSX text, so the extraction codemod never found them and
they stayed English in all nine languages — including the five that have
been in production for weeks.
The calendar view switcher was the worst of them: it spelled its labels
as `v[0].toUpperCase() + v.slice(1)`, which is correct English and
untranslatable anywhere else. Day, Week, Month and Agenda were already in
every catalogue, sitting unused, because the buttons never asked for
them. They now come from a Record<View, () => string>, so TypeScript
makes the map exhaustive and adding a view forces adding its label. The
labels are functions rather than values: a module-level object would
capture whichever language happened to load first and keep it.
The other two needed new source strings, added to all nine catalogues:
the composer's title for an untitled draft ("New message"), its status
line ("Sending…", "Saving…", "Error", "Saved {when}", "Unsaved"), and the
agenda view's own title ("Agenda from {date}").
This is not the whole of it. A sweep for the same shape — template
literals, toast arguments, and dialog props rather than JSX text — turns
up roughly a hundred more strings, mostly toasts and confirmation
dialogs. Those are a second extraction pass rather than a fix, and are
left for one.
442 lines
23 KiB
TypeScript
442 lines
23 KiB
TypeScript
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||
import { useLocation } from "wouter";
|
||
import { ChevronLeft, ChevronRight, Plus, Calendar as CalIcon } from "lucide-react";
|
||
import { useCalendar, participantAddresses, type EventInstance } from "@/store/calendar";
|
||
import { useSettings } from "@/store/settings";
|
||
import { addDays, addMonths, DAY_MS, endOfDay, isSameDay, isToday, monthGrid, roundToNext, startOfDay, startOfWeek, toLocalDateOnly, weekDays } from "@/lib/dates";
|
||
import { formatMonthYear, formatTime } from "@/lib/format";
|
||
import { formatDate, formatDateLong, formatDayMonth, formatHourLabel, formatWeekday, formatWeekdayDate } from "@/lib/datetime";
|
||
import { Empty, useIsMobile } from "@/ui/misc";
|
||
import { keyboard } from "@/lib/keyboard";
|
||
import { EventPopover } from "./EventPopover";
|
||
import { EventEditor, type EditorInit } from "./EventEditor";
|
||
import type { Anchor } from "@/ui/popover";
|
||
import { CalendarContextMenu, eventColor, type CalendarContext } from "./CalendarContextMenu";
|
||
import { t as translate } from "@/lib/i18n";
|
||
|
||
type View = "month" | "week" | "day" | "agenda";
|
||
|
||
/**
|
||
* The switcher labels, spelled out rather than derived from the view id.
|
||
*
|
||
* They used to be `v[0].toUpperCase() + v.slice(1)`, which is correct English
|
||
* and untranslatable in every other language: the extractor cannot see a
|
||
* string that is computed, so the four buttons stayed English even in a
|
||
* catalogue that had all four words. Called rather than looked up, because a
|
||
* module-level object would capture the labels for whichever language loaded
|
||
* first.
|
||
*/
|
||
const VIEW_LABELS: Record<View, () => string> = {
|
||
day: () => translate("Day"),
|
||
week: () => translate("Week"),
|
||
month: () => translate("Month"),
|
||
agenda: () => translate("Agenda"),
|
||
};
|
||
|
||
const HOUR_H = 48;
|
||
|
||
export function CalendarView({ view: viewParam, date }: { view?: string; date?: string }) {
|
||
const [, navigate] = useLocation();
|
||
const cal = useCalendar();
|
||
const settings = useSettings((s) => s.settings);
|
||
const isMobile = useIsMobile();
|
||
const view: View = (["month", "week", "day", "agenda"].includes(viewParam ?? "") ? viewParam : settings.calendarDefaultView) as View;
|
||
const anchor = useMemo(() => {
|
||
const d = date ? new Date(`${date}T00:00:00`) : new Date();
|
||
return Number.isNaN(d.getTime()) ? startOfDay(new Date()) : startOfDay(d);
|
||
}, [date]);
|
||
const [popover, setPopover] = useState<{ inst: EventInstance; anchor: Anchor } | null>(null);
|
||
const [editor, setEditor] = useState<EditorInit | null>(null);
|
||
const [ctx, setCtx] = useState<CalendarContext | null>(null);
|
||
const weekStart = settings.weekStart;
|
||
const effectiveView: View = isMobile && view === "week" ? "day" : view;
|
||
|
||
// Range to load
|
||
const range = useMemo(() => {
|
||
if (effectiveView === "month") {
|
||
const g = monthGrid(anchor, weekStart);
|
||
return { start: g[0]!, end: addDays(g[41]!, 1) };
|
||
}
|
||
if (effectiveView === "week") {
|
||
const s = startOfWeek(anchor, weekStart);
|
||
return { start: s, end: addDays(s, 7) };
|
||
}
|
||
if (effectiveView === "day") return { start: anchor, end: addDays(anchor, 1) };
|
||
return { start: anchor, end: addDays(anchor, 60) };
|
||
}, [effectiveView, anchor, weekStart]);
|
||
|
||
useEffect(() => {
|
||
if (cal.available) void cal.loadRange(range.start, range.end);
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [cal.available, range.start.getTime(), range.end.getTime()]);
|
||
|
||
const go = useCallback((v: View, d: Date) => navigate(`/calendar/${v}/${toLocalDateOnly(d)}`), [navigate]);
|
||
const step = (n: number) => {
|
||
if (effectiveView === "month") go(view, addMonths(anchor, n));
|
||
else if (effectiveView === "week") go(view, addDays(anchor, 7 * n));
|
||
else if (effectiveView === "day") go(view, addDays(anchor, n));
|
||
else go(view, addDays(anchor, 30 * n));
|
||
};
|
||
|
||
const openNew = useCallback(
|
||
(start?: Date, end?: Date, allDay = false) => {
|
||
const s = start ?? roundToNext(new Date(), 30);
|
||
const e = end ?? new Date(s.getTime() + settings.defaultEventDuration * 60_000);
|
||
setEditor({ start: s, end: e, allDay });
|
||
},
|
||
[settings.defaultEventDuration],
|
||
);
|
||
|
||
useEffect(() => {
|
||
const onNew = () => openNew();
|
||
window.addEventListener("ihm:new-event", onNew);
|
||
return () => window.removeEventListener("ihm:new-event", onNew);
|
||
}, [openNew]);
|
||
|
||
useEffect(
|
||
() =>
|
||
keyboard.pushScope("calendar", [
|
||
{ keys: "t", description: "Today", group: "Calendar", handler: () => go(view, new Date()) },
|
||
{ keys: "n", description: "Next period", group: "Calendar", handler: () => step(1) },
|
||
{ keys: "p", description: "Previous period", group: "Calendar", handler: () => step(-1) },
|
||
{ keys: "d", description: "Day view", group: "Calendar", handler: () => go("day", anchor) },
|
||
{ keys: "w", description: "Week view", group: "Calendar", handler: () => go("week", anchor) },
|
||
{ keys: "m", description: "Month view", group: "Calendar", handler: () => go("month", anchor) },
|
||
{ keys: "a", description: "Agenda view", group: "Calendar", handler: () => go("agenda", anchor) },
|
||
{ keys: "c", description: "New event", group: "Calendar", handler: () => openNew() },
|
||
]),
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
[view, anchor, openNew],
|
||
);
|
||
|
||
if (!cal.available) {
|
||
return <div className="p-16"><Empty icon={<CalIcon size={40} />} title={translate("Calendar is not available")}>{translate("This account does not have the JMAP calendars capability.")}</Empty></div>;
|
||
}
|
||
|
||
const title =
|
||
effectiveView === "month" ? formatMonthYear(anchor)
|
||
: effectiveView === "week" ? `${formatDayMonth(range.start)} – ${formatDate(addDays(range.end, -1))}`
|
||
: effectiveView === "day" ? formatWeekdayDate(anchor, true)
|
||
: translate("Agenda from {date}", { date: formatDayMonth(anchor) });
|
||
|
||
const onEvent = (inst: EventInstance, el: Element) => {
|
||
const r = el.getBoundingClientRect();
|
||
setPopover({ inst, anchor: { x: r.left, y: r.top, w: r.width, h: r.height } });
|
||
};
|
||
const onEventContext = (inst: EventInstance, e: React.MouseEvent) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
setPopover(null);
|
||
setCtx({ kind: "event", inst, anchor: { x: e.clientX, y: e.clientY, w: 0, h: 0 } });
|
||
};
|
||
const onSlotContext = (start: Date, end: Date, allDay: boolean, e: React.MouseEvent) => {
|
||
e.preventDefault();
|
||
setCtx({ kind: "slot", start, end, allDay, anchor: { x: e.clientX, y: e.clientY, w: 0, h: 0 } });
|
||
};
|
||
|
||
return (
|
||
<div className="cal-main">
|
||
<div className="cal-toolbar">
|
||
<button className="btn btn-sm" onClick={() => go(view, new Date())}>{translate("Today")}</button>
|
||
<button className="icon-btn sm" onClick={() => step(-1)} aria-label={translate("Previous")}><ChevronLeft size={18} /></button>
|
||
<button className="icon-btn sm" onClick={() => step(1)} aria-label={translate("Next")}><ChevronRight size={18} /></button>
|
||
<h2 className="truncate">{title}</h2>
|
||
<span className="spacer" />
|
||
{cal.loading && <span className="spinner" />}
|
||
<div className="view-switch">
|
||
{(["day", "week", "month", "agenda"] as View[]).filter((v) => !(isMobile && v === "week")).map((v) => (
|
||
<button key={v} className={effectiveView === v ? "active" : ""} onClick={() => go(v, anchor)}>{VIEW_LABELS[v]()}</button>
|
||
))}
|
||
</div>
|
||
{!isMobile && <button className="btn btn-primary btn-sm" onClick={() => openNew()}><Plus size={16} /> {translate("Event")}</button>}
|
||
</div>
|
||
{cal.error && <div className="error-box" style={{ margin: 12 }}>{cal.error}</div>}
|
||
{effectiveView === "month" && <MonthView anchor={anchor} weekStart={weekStart} onDay={(d) => go("day", d)} onEvent={onEvent} onEventContext={onEventContext} onSlotContext={onSlotContext} onCreate={(d) => openNew(new Date(d.getTime() + 9 * 3600_000))} />}
|
||
{(effectiveView === "week" || effectiveView === "day") && <TimeGrid days={effectiveView === "week" ? weekDays(anchor, weekStart) : [anchor]} onEvent={onEvent} onEventContext={onEventContext} onSlotContext={onSlotContext} onCreate={(s, e, allDay) => openNew(s, e, allDay)} onDayHeader={(d) => go("day", d)} workStart={settings.workDayStart} workEnd={settings.workDayEnd} />}
|
||
{effectiveView === "agenda" && <AgendaView start={anchor} onEvent={onEvent} onEventContext={onEventContext} />}
|
||
{ctx && <CalendarContextMenu ctx={ctx} onClose={() => setCtx(null)} onOpen={(inst, a) => setPopover({ inst, anchor: a })} onEdit={(inst) => setEditor({ event: inst.event, start: inst.start, end: inst.end, allDay: inst.allDay })} onCreate={(s, e, allDay) => { setCtx(null); openNew(s, e, allDay); }} />}
|
||
{isMobile && <button className="fab" aria-label={translate("New event")} onClick={() => openNew()}><Plus size={24} /></button>}
|
||
{popover && <EventPopover inst={popover.inst} anchor={popover.anchor} onClose={() => setPopover(null)} onEdit={() => { setEditor({ event: popover.inst.event, start: popover.inst.start, end: popover.inst.end, allDay: popover.inst.allDay }); setPopover(null); }} />}
|
||
{editor && <EventEditor init={editor} onClose={() => setEditor(null)} />}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ---------------- Month ---------------- */
|
||
|
||
type EvCtx = (i: EventInstance, e: React.MouseEvent) => void;
|
||
type SlotCtx = (start: Date, end: Date, allDay: boolean, e: React.MouseEvent) => void;
|
||
|
||
function MonthView({ anchor, weekStart, onDay, onEvent, onEventContext, onSlotContext, onCreate }: { anchor: Date; weekStart: number; onDay: (d: Date) => void; onEvent: (i: EventInstance, el: Element) => void; onEventContext: EvCtx; onSlotContext: SlotCtx; onCreate: (d: Date) => void }) {
|
||
const cal = useCalendar();
|
||
const grid = useMemo(() => monthGrid(anchor, weekStart), [anchor, weekStart]);
|
||
const instances = cal.instancesIn(grid[0]!, addDays(grid[41]!, 1));
|
||
const weeks = [...Array(6)].map((_, w) => grid.slice(w * 7, w * 7 + 7));
|
||
const dow = weeks[0]!.map((d) => formatWeekday(d));
|
||
const maxPer = 4;
|
||
return (
|
||
<div className="month-grid">
|
||
<div className="dow-row">{dow.map((d) => <div key={d}>{d}</div>)}</div>
|
||
{weeks.map((days, wi) => (
|
||
<div key={wi} className="week-row">
|
||
{days.map((d) => {
|
||
const dayEnd = addDays(d, 1);
|
||
const evs = instances.filter((i) => i.start < dayEnd && i.end > d);
|
||
const shown = evs.slice(0, maxPer);
|
||
return (
|
||
<div key={d.toISOString()} className={`month-cell ${d.getMonth() !== anchor.getMonth() ? "other" : ""} ${isToday(d) ? "today" : ""}`} onClick={() => onCreate(d)} onDoubleClick={() => onDay(d)} onContextMenu={(e) => onSlotContext(new Date(d.getTime() + 9 * 3600_000), new Date(d.getTime() + 10 * 3600_000), false, e)}>
|
||
<span className="day-num" onClick={(e) => { e.stopPropagation(); onDay(d); }}>{d.getDate() === 1 ? formatDayMonth(d) : d.getDate()}</span>
|
||
{shown.map((i) => <EventChip key={i.key} inst={i} day={d} onClick={(el) => onEvent(i, el)} onContext={(e) => onEventContext(i, e)} />)}
|
||
{evs.length > maxPer && <span className="more" onClick={(e) => { e.stopPropagation(); onDay(d); }}>{translate("+{n} more", { n: evs.length - maxPer })}</span>}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function statusClass(i: EventInstance): string {
|
||
const ev = i.event;
|
||
const mine = useCalendar.getState().identities;
|
||
const ids = mine.flatMap((m) => [m.calendarAddress.toLowerCase(), ...Object.values(m.sendTo ?? {}).map((x) => x.toLowerCase())]);
|
||
let my: string | undefined;
|
||
for (const p of Object.values(ev.participants ?? {})) {
|
||
if (participantAddresses(p).some((a) => ids.includes(a))) my = p.participationStatus;
|
||
}
|
||
if (ev.status === "cancelled") return "cancelled";
|
||
if (my === "declined") return "declined";
|
||
if (my === "tentative" || my === "needs-action" || ev.status === "tentative") return "tentative";
|
||
return "";
|
||
}
|
||
|
||
function useEventColor() {
|
||
const categories = useSettings((s) => s.settings.eventCategories);
|
||
return (inst: EventInstance) => eventColor(inst.event, inst.calendar?.color, categories);
|
||
}
|
||
|
||
function EventChip({ inst, day, onClick, onContext }: { inst: EventInstance; day: Date; onClick: (el: Element) => void; onContext?: (e: React.MouseEvent) => void }) {
|
||
const color = useEventColor()(inst);
|
||
const spansDay = inst.allDay || inst.end.getTime() - inst.start.getTime() >= DAY_MS || !isSameDay(inst.start, inst.end) && inst.start < day;
|
||
return (
|
||
<div className={`ev-chip ${spansDay ? "" : "timed"} ${statusClass(inst)}`} style={{ background: color, borderColor: color }} onClick={(e) => { e.stopPropagation(); onClick(e.currentTarget); }} onContextMenu={onContext} title={inst.event.title ?? ""}>
|
||
{!spansDay && <span className="ev-dot" style={{ background: color }} />}
|
||
{!spansDay && <span className="ev-time">{formatTime(inst.start)}</span>}
|
||
<span className="truncate">{inst.event.title || "(untitled)"}</span>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ---------------- Week / Day ---------------- */
|
||
|
||
function TimeGrid({ days, onEvent, onEventContext, onSlotContext, onCreate, onDayHeader, workStart, workEnd }: { days: Date[]; onEvent: (i: EventInstance, el: Element) => void; onEventContext: EvCtx; onSlotContext: SlotCtx; onCreate: (s: Date, e: Date, allDay: boolean) => void; onDayHeader: (d: Date) => void; workStart: number; workEnd: number }) {
|
||
const cal = useCalendar();
|
||
const colorOf = useEventColor();
|
||
const scrollRef = useRef<HTMLDivElement>(null);
|
||
const start = days[0]!;
|
||
const end = addDays(days[days.length - 1]!, 1);
|
||
const instances = cal.instancesIn(start, end);
|
||
const [now, setNow] = useState(new Date());
|
||
const [drag, setDrag] = useState<{ day: Date; startMin: number; endMin: number } | null>(null);
|
||
useEffect(() => {
|
||
const t = window.setInterval(() => setNow(new Date()), 60_000);
|
||
return () => window.clearInterval(t);
|
||
}, []);
|
||
useEffect(() => {
|
||
// scroll to 7am-ish on mount
|
||
if (scrollRef.current) scrollRef.current.scrollTop = Math.max(0, (Math.min(workStart, 8) - 0.5) * HOUR_H);
|
||
}, [workStart, days.length]);
|
||
|
||
const allDay = (d: Date) => instances.filter((i) => (i.allDay || i.end.getTime() - i.start.getTime() >= DAY_MS) && i.start < addDays(d, 1) && i.end > d);
|
||
const timed = (d: Date) => instances.filter((i) => !(i.allDay || i.end.getTime() - i.start.getTime() >= DAY_MS) && i.start < addDays(d, 1) && i.end > d);
|
||
|
||
const minutesFromEvent = (e: React.MouseEvent, col: HTMLElement) => {
|
||
const r = col.getBoundingClientRect();
|
||
const y = e.clientY - r.top + 0; // col is full height
|
||
return Math.max(0, Math.min(24 * 60, Math.round((y / HOUR_H) * 60 / 15) * 15));
|
||
};
|
||
|
||
return (
|
||
<div className="week-view" style={{ "--cols": days.length } as React.CSSProperties}>
|
||
<div className="week-head">
|
||
<div />
|
||
{days.map((d) => (
|
||
<div key={d.toISOString()} className={`wh-day ${isToday(d) ? "today" : ""}`} onClick={() => onDayHeader(d)}>
|
||
<div className="dow">{formatWeekday(d)}</div>
|
||
<div className="dnum">{d.getDate()}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="week-allday">
|
||
<div className="ad-label">{translate("all-day")}</div>
|
||
{days.map((d) => (
|
||
<div key={d.toISOString()} className="ad-cell" onClick={() => onCreate(d, addDays(d, 1), true)} onContextMenu={(e) => onSlotContext(d, addDays(d, 1), true, e)}>
|
||
{allDay(d).map((i) => <EventChip key={i.key} inst={i} day={d} onClick={(el) => onEvent(i, el)} onContext={(e) => onEventContext(i, e)} />)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="week-scroll" ref={scrollRef}>
|
||
<div className="week-body" style={{ "--hour-h": `${HOUR_H}px` } as React.CSSProperties}>
|
||
<div className="time-col">
|
||
{[...Array(24)].map((_, h) => h > 0 && <span key={h} className="hour-label" style={{ top: h * HOUR_H }}>{formatHourLabel(h)}</span>)}
|
||
</div>
|
||
{days.map((d) => {
|
||
const evs = layoutOverlaps(timed(d), d);
|
||
const today = isToday(d);
|
||
const nowTop = ((now.getHours() * 60 + now.getMinutes()) / 60) * HOUR_H;
|
||
return (
|
||
<div
|
||
key={d.toISOString()}
|
||
className={`day-col ${today ? "today" : ""}`}
|
||
onMouseDown={(e) => {
|
||
if (e.button !== 0) return;
|
||
if ((e.target as HTMLElement).closest(".ev-block")) return;
|
||
const m = minutesFromEvent(e, e.currentTarget);
|
||
setDrag({ day: d, startMin: m, endMin: m + 30 });
|
||
}}
|
||
onMouseMove={(e) => {
|
||
if (!drag || !isSameDay(drag.day, d)) return;
|
||
const m = minutesFromEvent(e, e.currentTarget);
|
||
setDrag({ ...drag, endMin: Math.max(drag.startMin + 15, m) });
|
||
}}
|
||
onMouseUp={() => {
|
||
if (!drag || !isSameDay(drag.day, d)) return;
|
||
const s = new Date(d.getTime() + drag.startMin * 60_000);
|
||
const e2 = new Date(d.getTime() + drag.endMin * 60_000);
|
||
setDrag(null);
|
||
onCreate(s, e2, false);
|
||
}}
|
||
onMouseLeave={() => { if (drag && isSameDay(drag.day, d)) { const s = new Date(d.getTime() + drag.startMin * 60_000); const e2 = new Date(d.getTime() + drag.endMin * 60_000); setDrag(null); onCreate(s, e2, false); } }}
|
||
onContextMenu={(e) => {
|
||
if ((e.target as HTMLElement).closest(".ev-block")) return;
|
||
const m = minutesFromEvent(e, e.currentTarget);
|
||
const st = new Date(d.getTime() + Math.floor(m / 30) * 30 * 60_000);
|
||
onSlotContext(st, new Date(st.getTime() + 60 * 60_000), false, e);
|
||
}}
|
||
>
|
||
<div className="work-hours" style={{ top: workStart * HOUR_H, height: Math.max(0, workEnd - workStart) * HOUR_H }} />
|
||
{[...Array(24)].map((_, h) => <div key={h} className="hour-line" style={{ top: h * HOUR_H }} />)}
|
||
{[...Array(24)].map((_, h) => <div key={`h${h}`} className="half-line" style={{ top: h * HOUR_H + HOUR_H / 2 }} />)}
|
||
{today && <div className="now-line" style={{ top: nowTop }} />}
|
||
{evs.map(({ inst, top, height, left, width }) => {
|
||
const color = colorOf(inst);
|
||
return (
|
||
<div key={inst.key} className={`ev-block ${statusClass(inst)}`} style={{ top, height: Math.max(height, 18), left: `${left}%`, width: `calc(${width}% - 3px)`, background: color }} onClick={(e) => { e.stopPropagation(); onEvent(inst, e.currentTarget); }} onContextMenu={(e) => onEventContext(inst, e)} title={inst.event.title ?? ""}>
|
||
<div className="ev-title">{inst.event.title || "(untitled)"}</div>
|
||
{height > 30 && <div className="ev-time">{formatTime(inst.start)} – {formatTime(inst.end)}</div>}
|
||
</div>
|
||
);
|
||
})}
|
||
{drag && isSameDay(drag.day, d) && (
|
||
<div className="ev-block draft-new" style={{ top: (drag.startMin / 60) * HOUR_H, height: ((drag.endMin - drag.startMin) / 60) * HOUR_H, left: 0, width: "calc(100% - 3px)", background: "var(--accent)" }}>
|
||
<div className="ev-title">{translate("(new event)")}</div>
|
||
<div className="ev-time">{formatTime(new Date(d.getTime() + drag.startMin * 60_000))} – {formatTime(new Date(d.getTime() + drag.endMin * 60_000))}</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/** Simple column layout for overlapping events. */
|
||
function layoutOverlaps(evs: EventInstance[], day: Date): Array<{ inst: EventInstance; top: number; height: number; left: number; width: number }> {
|
||
const dayStart = day.getTime();
|
||
const dayEnd = dayStart + DAY_MS;
|
||
const items = evs
|
||
.map((inst) => {
|
||
const s = Math.max(inst.start.getTime(), dayStart);
|
||
const e = Math.min(inst.end.getTime(), dayEnd);
|
||
return { inst, s, e, col: 0, cols: 1 };
|
||
})
|
||
.sort((a, b) => a.s - b.s || b.e - a.e);
|
||
// Greedy column assignment within clusters
|
||
const clusters: Array<typeof items> = [];
|
||
let cur: typeof items = [];
|
||
let curEnd = -1;
|
||
for (const it of items) {
|
||
if (cur.length && it.s >= curEnd) {
|
||
clusters.push(cur);
|
||
cur = [];
|
||
curEnd = -1;
|
||
}
|
||
cur.push(it);
|
||
curEnd = Math.max(curEnd, it.e);
|
||
}
|
||
if (cur.length) clusters.push(cur);
|
||
for (const cl of clusters) {
|
||
const colEnds: number[] = [];
|
||
for (const it of cl) {
|
||
let c = colEnds.findIndex((end) => end <= it.s);
|
||
if (c < 0) {
|
||
c = colEnds.length;
|
||
colEnds.push(0);
|
||
}
|
||
colEnds[c] = it.e;
|
||
it.col = c;
|
||
}
|
||
for (const it of cl) it.cols = colEnds.length;
|
||
}
|
||
return items.map((it) => ({
|
||
inst: it.inst,
|
||
top: ((it.s - dayStart) / 3_600_000) * HOUR_H,
|
||
height: ((it.e - it.s) / 3_600_000) * HOUR_H,
|
||
left: (it.col / it.cols) * 100,
|
||
width: 100 / it.cols,
|
||
}));
|
||
}
|
||
|
||
/* ---------------- Agenda ---------------- */
|
||
|
||
function AgendaView({ start, onEvent, onEventContext }: { start: Date; onEvent: (i: EventInstance, el: Element) => void; onEventContext: EvCtx }) {
|
||
const cal = useCalendar();
|
||
const colorOf = useEventColor();
|
||
const end = addDays(start, 60);
|
||
const instances = cal.instancesIn(start, end);
|
||
const byDay = useMemo(() => {
|
||
const map = new Map<string, { day: Date; items: EventInstance[] }>();
|
||
for (const i of instances) {
|
||
let d = startOfDay(i.start < start ? start : i.start);
|
||
const last = startOfDay(new Date(i.end.getTime() - 1));
|
||
while (d <= last && d < end) {
|
||
const k = toLocalDateOnly(d);
|
||
const e = map.get(k) ?? { day: new Date(d), items: [] };
|
||
e.items.push(i);
|
||
map.set(k, e);
|
||
d = addDays(d, 1);
|
||
if (!i.allDay && isSameDay(i.start, i.end)) break;
|
||
}
|
||
}
|
||
return [...map.values()].sort((a, b) => a.day.getTime() - b.day.getTime());
|
||
}, [instances, start, end]);
|
||
if (!byDay.length) return <Empty icon={<CalIcon size={36} />} title={translate("Nothing scheduled")}>{translate("No events in the next 60 days.")}</Empty>;
|
||
return (
|
||
<div className="agenda">
|
||
{byDay.map(({ day, items }) => (
|
||
<div key={day.toISOString()} className="agenda-day">
|
||
<div className={`ad-date ${isToday(day) ? "today" : ""}`}>
|
||
{formatWeekday(day, "long")}
|
||
<small>{formatDateLong(day, false)}</small>
|
||
</div>
|
||
<div>
|
||
{items.map((i) => (
|
||
<div key={i.key + day.toISOString()} className={`agenda-ev ${statusClass(i)}`} onClick={(e) => onEvent(i, e.currentTarget)} onContextMenu={(e) => onEventContext(i, e)}>
|
||
<span className="ev-dot" style={{ background: colorOf(i) }} />
|
||
<span className="ev-when">{i.allDay ? "All day" : `${formatTime(i.start)} – ${formatTime(i.end)}`}</span>
|
||
<span className="grow truncate">{i.event.title || "(untitled)"}</span>
|
||
{Object.values(i.event.locations ?? {})[0]?.name && <span className="hint truncate" style={{ maxWidth: 200 }}>{Object.values(i.event.locations ?? {})[0]!.name}</span>}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export { endOfDay };
|