Calendar interface

1type DateKey = `${number}-${number}-${number}`;2type CalendarEvent = { id: string; title: string;3  startDate: DateKey; endDateExclusive: DateKey;4  timeZone?: string; };5type CalendarState = { visibleMonth: DateKey; focusedDate: DateKey;6  selectedDate: DateKey | null; editorEventId: string | null; };

1import { useMemo, useState } from "react";2
3type DateKey = string; // "YYYY-MM-DD"4type CalendarEvent = { id: string; title: string; start: DateKey; endExclusive: DateKey };5
6// --- date-only helpers: no times, so no time zone can move a day ---7const parts = (k: DateKey) => k.split("-").map(Number) as [number, number, number];8const addDays = (k: DateKey, n: number): DateKey => {9  const [y, m, d] = parts(k);10  return new Date(Date.UTC(y, m - 1, d + n)).toISOString().slice(0, 10);11};12const weekday = (k: DateKey) => { const [y, m, d] = parts(k); return new Date(Date.UTC(y, m - 1, d)).getUTCDay(); };13const diffDays = (a: DateKey, b: DateKey) => Math.round((Date.parse(b) - Date.parse(a)) / 86_400_000);14const startOfWeek = (k: DateKey, weekStartsOn: number) => addDays(k, -((weekday(k) - weekStartsOn + 7) % 7));15const todayKey = () => new Date().toISOString().slice(0, 10);16const longLabel = (k: DateKey) =>17  new Date(k + "T00:00:00Z").toLocaleDateString(undefined, {18    weekday: "long", month: "long", day: "numeric", timeZone: "UTC",19  });20
21function buildGrid(month: DateKey, weekStartsOn: number): DateKey[][] {22  const [y, m] = parts(month);23  const first = month.slice(0, 7) + "-01";24  const lastDay = new Date(Date.UTC(y, m, 0)).getUTCDate();25  const last = month.slice(0, 7) + "-" + String(lastDay).padStart(2, "0");26  const gridStart = startOfWeek(first, weekStartsOn);27  const gridEndExclusive = addDays(startOfWeek(last, weekStartsOn), 7);28  const weeks: DateKey[][] = [];29  for (let d = gridStart; d < gridEndExclusive; d = addDays(d, 7)) {30    weeks.push(Array.from({ length: 7 }, (_, i) => addDays(d, i)));31  }32  return weeks;33}34
35// Clip one event to one week. Returns the grid column (1..7) and how many days it spans, or null.36function segmentForWeek(event: CalendarEvent, weekStart: DateKey) {37  const weekEndExclusive = addDays(weekStart, 7);38  const segStart = event.start > weekStart ? event.start : weekStart;39  const segEndExclusive = event.endExclusive < weekEndExclusive ? event.endExclusive : weekEndExclusive;40  if (segStart >= segEndExclusive) return null;41  return { column: diffDays(weekStart, segStart) + 1, span: diffDays(segStart, segEndExclusive) };42}43
44// Stack overlapping segments: put each in the first lane that is free at its start column.45function assignLanes<T extends { column: number; span: number }>(segments: T[]) {46  const laneFreeFrom: number[] = [];47  return segments48    .slice()49    .sort((a, b) => a.column - b.column || b.span - a.span)50    .map((seg) => {51      let lane = laneFreeFrom.findIndex((free) => free <= seg.column);52      if (lane === -1) lane = laneFreeFrom.length;53      laneFreeFrom[lane] = seg.column + seg.span;54      return { ...seg, lane };55    });56}57
58export function Calendar({ month, events, weekStartsOn = 0 }: {59  month: DateKey; events: CalendarEvent[]; weekStartsOn?: number;60}) {61  const weeks = useMemo(() => buildGrid(month, weekStartsOn), [month, weekStartsOn]);62  const flat = useMemo(() => weeks.flat(), [weeks]);63  const [, monthNum] = parts(month);64  const [focused, setFocused] = useState<DateKey>(65    () => flat.find((d) => parts(d)[1] === monthNum) ?? flat[0],66  );67
68  function move(deltaDays: number) {69    const target = addDays(focused, deltaDays);70    if (flat.includes(target)) setFocused(target);71  }72  function onKeyDown(e: React.KeyboardEvent) {73    const arrows: Record<string, number> = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: 7, ArrowUp: -7 };74    if (e.key in arrows) { e.preventDefault(); move(arrows[e.key]); }75    else if (e.key === "Home") { e.preventDefault(); setFocused(startOfWeek(focused, weekStartsOn)); }76    else if (e.key === "End") { e.preventDefault(); setFocused(addDays(startOfWeek(focused, weekStartsOn), 6)); }77  }78
79  return (80    <div role="grid" aria-label={"Calendar for " + month.slice(0, 7)} onKeyDown={onKeyDown}>81      {weeks.map((week) => {82        const segs = assignLanes(83          events84            .map((ev) => {85              const s = segmentForWeek(ev, week[0]);86              return s ? { ...s, ev } : null;87            })88            .filter((s): s is { column: number; span: number; ev: CalendarEvent } => s !== null),89        );90        return (91          <div92            key={week[0]}93            role="row"94            style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)" }}95          >96            {week.map((day) => (97              <div98                key={day}99                role="gridcell"100                tabIndex={day === focused ? 0 : -1}101                aria-current={day === todayKey() ? "date" : undefined}102                aria-label={longLabel(day)}103                onClick={() => setFocused(day)}104                style={{ gridRow: 1, opacity: parts(day)[1] === monthNum ? 1 : 0.4 }}105              >106                {parts(day)[2]}107              </div>108            ))}109            {segs.map((s) => (110              <div111                key={s.ev.id + week[0]}112                style={{ gridColumn: s.column + " / span " + s.span, gridRow: s.lane + 2 }}113              >114                {s.ev.title}115              </div>116            ))}117          </div>118        );119      })}120    </div>121  );122}