@rapidmx/web-client 0.4.0 → 0.5.0

package/apps/shared/components/calendar/TimeGridView.tsx

@@ -1,198 +1,244 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import React from "react";
-import { useDraggable, useDroppable } from "@dnd-kit/core";
-import { addMinutes, format, isSameDay, isToday, startOfDay } from "date-fns";
-import { dayDropId, eventDragId, resizeDragId, slotDropId } from "@rapidmx/react-shared/calendar/calendarDragIds.js";
-import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
-
-const HOUR_HEIGHT_PX = 48;
-const SLOT_MINUTES = 30;
-const SLOTS_PER_DAY = (24 * 60) / SLOT_MINUTES;
-const HOURS = Array.from({ length: 24 }, (_, h) => h);
-
-export interface TimeGridViewProps {
-    /** One day for the Day view, seven for the Week view, five for the Work Week view. */
-    days: Date[];
-    /** Already expanded for the visible range — see `recurrence.ts`'s `expandAllOccurrences`. */
-    occurrences: CalendarOccurrence[];
-    /** Each occurrence's own calendar color, keyed by `folderUid` — see `calendarColors.ts`. */
-    folderColors: Record<string, string>;
-    onSelectEvent: (occurrence: CalendarOccurrence) => void;
-    /** Click on an empty slot — start/end default to a 30-minute block there, for the "New event" flow. */
-    onSelectSlot: (start: Date, end: Date) => void;
-}
-
-/** An hourly time grid (Week, Work Week, or Day view — they share all their rendering/drag logic and
- * differ only in how many day columns are shown), with a day-header row and all-day events in a
- * header strip above it. */
-export default function TimeGridView({ days, occurrences, folderColors, onSelectEvent, onSelectSlot }: TimeGridViewProps) {
-    const allDayEvents = occurrences.filter((occ) => occ.allDay);
-    const timedEvents = occurrences.filter((occ) => !occ.allDay);
-
-    return (
-        <div className="flex-1 flex flex-col min-h-0 overflow-y-auto">
-            <div className="flex border-b border-border shrink-0">
-                <div className="w-14 shrink-0" />
-                {days.map((day) => (
-                    <div
-                        key={day.toISOString()}
-                        className={["flex-1 min-w-0 py-1 text-center text-xs font-semibold border-l border-border", isToday(day) ? "text-primary-dark" : ""].join(" ")}
-                    >
-                        {format(day, "EEE d")}
-                    </div>
-                ))}
-            </div>
-            {allDayEvents.length > 0 && (
-                <div className="flex border-b border-border shrink-0">
-                    <div className="w-14 shrink-0" />
-                    {days.map((day) => (
-                        <div key={day.toISOString()} className="flex-1 min-w-0 p-1 flex flex-col gap-0.5 border-l border-border">
-                            {allDayEvents
-                                .filter((occ) => isSameDay(new Date(occ.startDate), day))
-                                .map((occ) => (
-                                    <button
-                                        key={occ.occurrenceKey}
-                                        type="button"
-                                        onClick={() => onSelectEvent(occ)}
-                                        style={{ backgroundColor: folderColors[occ.folderUid], color: "#fff" }}
-                                        className="text-xs text-left truncate rounded-sm px-1.5 py-0.5"
-                                    >
-                                        {occ.title}
-                                    </button>
-                                ))}
-                        </div>
-                    ))}
-                </div>
-            )}
-            <div className="flex flex-1">
-                <div className="w-14 shrink-0">
-                    {HOURS.map((hour) => (
-                        <div key={hour} style={{ height: HOUR_HEIGHT_PX }} className="text-[10px] text-text-muted text-right pr-1.5 -mt-1.5">
-                            {hour === 0 ? "" : format(new Date(2000, 0, 1, hour), "ha")}
-                        </div>
-                    ))}
-                </div>
-                {days.map((day) => (
-                    <DayColumn
-                        key={day.toISOString()}
-                        day={day}
-                        occurrences={timedEvents.filter((occ) => isSameDay(new Date(occ.startDate), day))}
-                        folderColors={folderColors}
-                        onSelectEvent={onSelectEvent}
-                        onSelectSlot={onSelectSlot}
-                    />
-                ))}
-            </div>
-        </div>
-    );
-}
-
-interface DayColumnProps {
-    day: Date;
-    occurrences: CalendarOccurrence[];
-    folderColors: Record<string, string>;
-    onSelectEvent: (occurrence: CalendarOccurrence) => void;
-    onSelectSlot: (start: Date, end: Date) => void;
-}
-
-function DayColumn({ day, occurrences, folderColors, onSelectEvent, onSelectSlot }: DayColumnProps) {
-    const dayStart = startOfDay(day);
-
-    return (
-        <div className={["flex-1 min-w-0 relative border-l border-border", isToday(day) ? "bg-primary/5" : ""].join(" ")}>
-            {Array.from({ length: SLOTS_PER_DAY }, (_, i) => {
-                const slotStart = addMinutes(dayStart, i * SLOT_MINUTES);
-                return <TimeSlot key={i} start={slotStart} onSelectSlot={onSelectSlot} />;
-            })}
-            {occurrences.map((occurrence) => (
-                <EventBlock
-                    key={occurrence.occurrenceKey}
-                    occurrence={occurrence}
-                    color={folderColors[occurrence.folderUid]}
-                    dayStart={dayStart}
-                    onSelect={onSelectEvent}
-                />
-            ))}
-        </div>
-    );
-}
-
-function TimeSlot({ start, onSelectSlot }: { start: Date; onSelectSlot: (start: Date, end: Date) => void }) {
-    const { setNodeRef, isOver } = useDroppable({ id: slotDropId(start) });
-    return (
-        <button
-            ref={setNodeRef}
-            type="button"
-            onClick={() => onSelectSlot(start, addMinutes(start, SLOT_MINUTES))}
-            style={{ height: HOUR_HEIGHT_PX / 2 }}
-            className={["block w-full border-b border-border/50 text-left", isOver ? "bg-primary/10" : ""].join(" ")}
-            aria-label={`New event at ${format(start, "h:mm a, MMM d")}`}
-        />
-    );
-}
-
-function EventBlock({
-    occurrence,
-    color,
-    dayStart,
-    onSelect,
-}: {
-    occurrence: CalendarOccurrence;
-    /** This occurrence's calendar color — see `calendarColors.ts`. Only applied for a "busy" block; a
-     * "free" one keeps Outlook's own muted/outline treatment regardless of which calendar it's on. */
-    color: string;
-    dayStart: Date;
-    onSelect: (occurrence: CalendarOccurrence) => void;
-}) {
-    const { setNodeRef, listeners, attributes, transform, isDragging } = useDraggable({ id: eventDragId(occurrence) });
-    const { setNodeRef: setResizeRef, listeners: resizeListeners, attributes: resizeAttributes } = useDraggable({
-        id: resizeDragId(occurrence),
-    });
-    const isFree = occurrence.busyStatus === "free";
-
-    const start = new Date(occurrence.startDate);
-    const end = new Date(occurrence.endDate);
-    const top = ((start.getTime() - dayStart.getTime()) / 60_000 / 60) * HOUR_HEIGHT_PX;
-    // The resize handle's own drag position has no live pixel preview (it only applies its ns-resize
-    // affordance) — the actual new end time is computed from whichever slot it's dropped onto (see
-    // `resolveDragAction`'s "resize" case), snapped to the grid rather than following the pointer
-    // continuously. Simpler, and avoids a visual preview that could disagree with the snapped result.
-    const height = Math.max(((end.getTime() - start.getTime()) / 60_000 / 60) * HOUR_HEIGHT_PX, 16);
-
-    return (
-        <div
-            ref={setNodeRef}
-            onClick={() => onSelect(occurrence)}
-            style={{
-                position: "absolute",
-                top,
-                height,
-                left: 2,
-                right: 2,
-                transform: transform ? `translate(${transform.x}px, ${transform.y}px)` : undefined,
-                zIndex: isDragging ? 10 : undefined,
-                ...(isFree ? undefined : { backgroundColor: color, color: "#fff" }),
-            }}
-            className={[
-                "rounded-sm px-1.5 py-0.5 text-xs text-left overflow-hidden cursor-pointer",
-                isFree ? "bg-surface-alt text-text-muted" : "",
-                isDragging ? "opacity-50" : "",
-            ].join(" ")}
-            {...listeners}
-            {...attributes}
-        >
-            <div className="font-medium truncate">{occurrence.title}</div>
-            <div className="truncate">{format(start, "h:mma")}</div>
-            <div
-                ref={setResizeRef}
-                className="absolute bottom-0 left-0 right-0 h-1.5 cursor-ns-resize"
-                aria-label={`Resize "${occurrence.title}"`}
-                {...resizeListeners}
-                {...resizeAttributes}
-            />
-        </div>
-    );
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { useDraggable, useDroppable } from "@dnd-kit/core";
+import { addDays, addMinutes, format, isToday, startOfDay } from "date-fns";
+import { dayDropId, eventDragId, resizeDragId, slotDropId } from "@rapidmx/react-shared/calendar/calendarDragIds.js";
+import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+import { occursOnDay, startsOnDay } from "./allDay.js";
+
+const HOUR_HEIGHT_PX = 48;
+const SLOT_MINUTES = 30;
+const SLOTS_PER_DAY = (24 * 60) / SLOT_MINUTES;
+const HOURS = Array.from({ length: 24 }, (_, h) => h);
+
+export interface TimeGridViewProps {
+    /** One day for the Day view, seven for the Week view, five for the Work Week view. */
+    days: Date[];
+    /** Already expanded for the visible range — see `recurrence.ts`'s `expandAllOccurrences`. */
+    occurrences: CalendarOccurrence[];
+    /** Each occurrence's own calendar color, keyed by `folderUid` — see `calendarColors.ts`. */
+    folderColors: Record<string, string>;
+    onSelectEvent: (occurrence: CalendarOccurrence) => void;
+    /** Click on an empty slot — start/end default to a 30-minute block there, for the "New event" flow. */
+    onSelectSlot: (start: Date, end: Date) => void;
+}
+
+/** An hourly time grid (Week, Work Week, or Day view — they share all their rendering/drag logic and
+ * differ only in how many day columns are shown), with a day-header row and all-day events in a
+ * header strip above it. */
+export default function TimeGridView({ days, occurrences, folderColors, onSelectEvent, onSelectSlot }: TimeGridViewProps) {
+    const allDayEvents = occurrences.filter((occ) => occ.allDay);
+    const timedEvents = occurrences.filter((occ) => !occ.allDay);
+
+    return (
+        <div className="flex-1 flex flex-col min-h-0 overflow-y-auto">
+            <div className="flex border-b border-border shrink-0">
+                <div className="w-14 shrink-0" />
+                {days.map((day) => (
+                    <div
+                        key={day.toISOString()}
+                        className={["flex-1 min-w-0 py-1 text-center text-xs font-semibold border-l border-border", isToday(day) ? "text-primary-dark" : ""].join(" ")}
+                    >
+                        {format(day, "EEE d")}
+                    </div>
+                ))}
+            </div>
+            {allDayEvents.length > 0 && (
+                <div className="flex border-b border-border shrink-0">
+                    <div className="w-14 shrink-0" />
+                    {days.map((day) => (
+                        <div key={day.toISOString()} className="flex-1 min-w-0 p-1 flex flex-col gap-0.5 border-l border-border">
+                            {allDayEvents
+                                .filter((occ) => occursOnDay(occ, day))
+                                .map((occ) => (
+                                    <button
+                                        key={occ.occurrenceKey}
+                                        type="button"
+                                        onClick={() => onSelectEvent(occ)}
+                                        style={{ backgroundColor: folderColors[occ.folderUid], color: "#fff" }}
+                                        className="text-xs text-left truncate rounded-sm px-1.5 py-0.5"
+                                    >
+                                        {occ.title}
+                                    </button>
+                                ))}
+                        </div>
+                    ))}
+                </div>
+            )}
+            <div className="flex flex-1">
+                <div className="w-14 shrink-0">
+                    {HOURS.map((hour) => (
+                        <div key={hour} style={{ height: HOUR_HEIGHT_PX }} className="text-[10px] text-text-muted text-right pr-1.5 -mt-1.5">
+                            {hour === 0 ? "" : format(new Date(2000, 0, 1, hour), "ha")}
+                        </div>
+                    ))}
+                </div>
+                {days.map((day) => (
+                    <DayColumn
+                        key={day.toISOString()}
+                        day={day}
+                        occurrences={timedEvents.filter((occ) => occursOnDay(occ, day))}
+                        folderColors={folderColors}
+                        onSelectEvent={onSelectEvent}
+                        onSelectSlot={onSelectSlot}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+}
+
+interface DayColumnProps {
+    day: Date;
+    occurrences: CalendarOccurrence[];
+    folderColors: Record<string, string>;
+    onSelectEvent: (occurrence: CalendarOccurrence) => void;
+    onSelectSlot: (start: Date, end: Date) => void;
+}
+
+function DayColumn({ day, occurrences, folderColors, onSelectEvent, onSelectSlot }: DayColumnProps) {
+    const dayStart = startOfDay(day);
+
+    return (
+        <div className={["flex-1 min-w-0 relative border-l border-border", isToday(day) ? "bg-primary/5" : ""].join(" ")}>
+            {Array.from({ length: SLOTS_PER_DAY }, (_, i) => {
+                const slotStart = addMinutes(dayStart, i * SLOT_MINUTES);
+                return <TimeSlot key={i} start={slotStart} onSelectSlot={onSelectSlot} />;
+            })}
+            {occurrences.map((occurrence) =>
+                startsOnDay(occurrence, day) ? (
+                    <EventBlock
+                        key={occurrence.occurrenceKey}
+                        occurrence={occurrence}
+                        color={folderColors[occurrence.folderUid]}
+                        dayStart={dayStart}
+                        onSelect={onSelectEvent}
+                    />
+                ) : (
+                    <ContinuationBlock
+                        key={occurrence.occurrenceKey}
+                        occurrence={occurrence}
+                        color={folderColors[occurrence.folderUid]}
+                        dayStart={dayStart}
+                        onSelect={onSelectEvent}
+                    />
+                ),
+            )}
+        </div>
+    );
+}
+
+function TimeSlot({ start, onSelectSlot }: { start: Date; onSelectSlot: (start: Date, end: Date) => void }) {
+    const { setNodeRef, isOver } = useDroppable({ id: slotDropId(start) });
+    return (
+        <button
+            ref={setNodeRef}
+            type="button"
+            onClick={() => onSelectSlot(start, addMinutes(start, SLOT_MINUTES))}
+            style={{ height: HOUR_HEIGHT_PX / 2 }}
+            className={["block w-full border-b border-border/50 text-left", isOver ? "bg-primary/10" : ""].join(" ")}
+            aria-label={`New event at ${format(start, "h:mm a, MMM d")}`}
+        />
+    );
+}
+
+/** A block's position within its day column. A multi-day event is drawn in every day column it
+ * overlaps, clipped to that day. */
+function blockGeometry(occurrence: CalendarOccurrence, dayStart: Date): { top: number; height: number } {
+    const visibleStart = Math.max(new Date(occurrence.startDate).getTime(), dayStart.getTime());
+    const visibleEnd = Math.min(new Date(occurrence.endDate).getTime(), addDays(dayStart, 1).getTime());
+    return {
+        top: ((visibleStart - dayStart.getTime()) / 60_000 / 60) * HOUR_HEIGHT_PX,
+        height: Math.max(((visibleEnd - visibleStart) / 60_000 / 60) * HOUR_HEIGHT_PX, 16),
+    };
+}
+
+/** A multi-day event's block in a day column after its first: clickable, but not draggable/resizable
+ * (its drag ids are already taken by the start day's block). */
+function ContinuationBlock({
+    occurrence,
+    color,
+    dayStart,
+    onSelect,
+}: {
+    occurrence: CalendarOccurrence;
+    color: string;
+    dayStart: Date;
+    onSelect: (occurrence: CalendarOccurrence) => void;
+}) {
+    const isFree = occurrence.busyStatus === "free";
+    const { top, height } = blockGeometry(occurrence, dayStart);
+    return (
+        <div
+            onClick={() => onSelect(occurrence)}
+            style={{ position: "absolute", top, height, left: 2, right: 2, ...(isFree ? undefined : { backgroundColor: color, color: "#fff" }) }}
+            className={["rounded-sm px-1.5 py-0.5 text-xs text-left overflow-hidden cursor-pointer", isFree ? "bg-surface-alt text-text-muted" : ""].join(" ")}
+        >
+            <div className="font-medium truncate">{occurrence.title}</div>
+        </div>
+    );
+}
+
+function EventBlock({
+    occurrence,
+    color,
+    dayStart,
+    onSelect,
+}: {
+    occurrence: CalendarOccurrence;
+    /** This occurrence's calendar color — see `calendarColors.ts`. Only applied for a "busy" block; a
+     * "free" one keeps Outlook's own muted/outline treatment regardless of which calendar it's on. */
+    color: string;
+    dayStart: Date;
+    onSelect: (occurrence: CalendarOccurrence) => void;
+}) {
+    const { setNodeRef, listeners, attributes, transform, isDragging } = useDraggable({ id: eventDragId(occurrence) });
+    const { setNodeRef: setResizeRef, listeners: resizeListeners, attributes: resizeAttributes } = useDraggable({
+        id: resizeDragId(occurrence),
+    });
+    const isFree = occurrence.busyStatus === "free";
+
+    const start = new Date(occurrence.startDate);
+    const { top, height } = blockGeometry(occurrence, dayStart);
+    // The resize handle's own drag position has no live pixel preview (it only applies its ns-resize
+    // affordance) — the actual new end time is computed from whichever slot it's dropped onto (see
+    // `resolveDragAction`'s "resize" case), snapped to the grid rather than following the pointer
+    // continuously. Simpler, and avoids a visual preview that could disagree with the snapped result.
+
+    return (
+        <div
+            ref={setNodeRef}
+            onClick={() => onSelect(occurrence)}
+            style={{
+                position: "absolute",
+                top,
+                height,
+                left: 2,
+                right: 2,
+                transform: transform ? `translate(${transform.x}px, ${transform.y}px)` : undefined,
+                zIndex: isDragging ? 10 : undefined,
+                ...(isFree ? undefined : { backgroundColor: color, color: "#fff" }),
+            }}
+            className={[
+                "rounded-sm px-1.5 py-0.5 text-xs text-left overflow-hidden cursor-pointer",
+                isFree ? "bg-surface-alt text-text-muted" : "",
+                isDragging ? "opacity-50" : "",
+            ].join(" ")}
+            {...listeners}
+            {...attributes}
+        >
+            <div className="font-medium truncate">{occurrence.title}</div>
+            <div className="truncate">{format(start, "h:mma")}</div>
+            <div
+                ref={setResizeRef}
+                className="absolute bottom-0 left-0 right-0 h-1.5 cursor-ns-resize"
+                aria-label={`Resize "${occurrence.title}"`}
+                {...resizeListeners}
+                {...resizeAttributes}
+            />
+        </div>
+    );
+}

package/apps/shared/components/calendar/allDay.ts

@@ -0,0 +1,124 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { format } from "date-fns";
+import { WeekdayCode } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import { CalendarOccurrence, toEventWallClock } from "@rapidmx/react-shared/calendar/recurrence.js";
+
+const MS_PER_DAY = 86_400_000;
+
+/**
+ * All-day events are stored date-only: `startDate` is UTC midnight of the first day and `endDate` is UTC
+ * midnight of the day *after* the last day (exclusive, like iCalendar's `DTEND;VALUE=DATE`). That keeps
+ * an all-day event on the same calendar date for every viewer, whatever their timezone.
+ *
+ * Older events were saved as the creator's *local* midnight converted to UTC (e.g. `...T22:00Z` for a
+ * UTC+2 creator), so reading one rounds the instant to the nearest UTC midnight rather than slicing the
+ * ISO string — which gives the intended date for both formats.
+ */
+export function allDayDateKey(iso: string): string {
+    const rounded = Math.round(new Date(iso).getTime() / MS_PER_DAY) * MS_PER_DAY;
+    return new Date(rounded).toISOString().slice(0, 10);
+}
+
+/** `YYYY-MM-DD` -> the stored UTC-midnight instant for that date. */
+export function allDayInstant(dateKey: string): string {
+    return `${dateKey}T00:00:00.000Z`;
+}
+
+/** Adds `days` to a `YYYY-MM-DD` date key. */
+export function addDaysToKey(dateKey: string, days: number): string {
+    return new Date(new Date(allDayInstant(dateKey)).getTime() + days * MS_PER_DAY).toISOString().slice(0, 10);
+}
+
+/** The local calendar date `day` (a local-midnight `Date` from a grid view) as a `YYYY-MM-DD` key. */
+export function localDateKey(day: Date): string {
+    return format(day, "yyyy-MM-dd");
+}
+
+/**
+ * A recurrence rule's inclusive "Ends on" date -> its stored `until` instant: the end of that day in the
+ * frame the series expands in. A timed series expands in its own (normally the viewer's) timezone, so that's
+ * the end of the local day - `new Date("YYYY-MM-DD")` would be UTC midnight, the previous day west of UTC.
+ * An all-day series expands in UTC (react-shared's `expandOccurrences`), so it's the end of the UTC day: the
+ * local end of day is already the next UTC day west of UTC and would add one more occurrence.
+ */
+export function recurrenceUntilInstant(dateKey: string, allDay: boolean): string {
+    if (allDay) {
+        return `${dateKey}T23:59:59.999Z`;
+    }
+    const [y, m, d] = dateKey.split("-").map(Number);
+    return new Date(y, m - 1, d, 23, 59, 59, 999).toISOString();
+}
+
+/** The stored form of an all-day series' "Ends on" date - the last millisecond of that UTC day. */
+const ALL_DAY_UNTIL_PATTERN = /^(\d{4}-\d{2}-\d{2})T23:59:59\.999Z$/;
+/** A bare UTC midnight - how the oldest editor (and date-only `UNTIL` values) stored the chosen date itself. */
+const UTC_MIDNIGHT_PATTERN = /^(\d{4}-\d{2}-\d{2})T00:00:00(?:\.000)?Z$/;
+
+/**
+ * Inverse of `recurrenceUntilInstant()`. An all-day series' value is recognized explicitly in its stored
+ * `T23:59:59.999Z` form (and as a bare UTC midnight, the oldest form). Anything else is a legacy value stored
+ * as the creator's *local* end of day, which can land anywhere from just before 10:00Z on the chosen date (UTC+14)
+ * to just before 12:00Z the day after (UTC-12) - a 26-hour spread no UTC-only rounding can resolve (UTC+14 and UTC-10
+ * creators' values are exactly 24h apart for the same date), so it reads back on the local calendar, the
+ * frame it was written in.
+ */
+export function recurrenceUntilDateKey(until: string, allDay: boolean): string {
+    if (allDay) {
+        const stored = ALL_DAY_UNTIL_PATTERN.exec(until) ?? UTC_MIDNIGHT_PATTERN.exec(until);
+        if (stored) {
+            return stored[1];
+        }
+    }
+    return format(new Date(until), "yyyy-MM-dd");
+}
+
+/** `Date#getUTCDay()` index -> RFC 5545 weekday code. */
+const JS_WEEKDAY_CODES: WeekdayCode[] = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
+
+/** The weekday an event starts on, in the frame its series expands in: the UTC date for an all-day event
+ * (`start`'s date part), the event's own timezone otherwise (`start` being a local `datetime-local` value).
+ * `undefined` while the start input is empty/invalid. */
+export function startWeekdayCode(start: string, allDay: boolean, timezone: string | undefined): WeekdayCode | undefined {
+    const ms = allDay ? new Date(allDayInstant(start.slice(0, 10))).getTime() : new Date(start).getTime();
+    if (Number.isNaN(ms)) {
+        return undefined;
+    }
+    return JS_WEEKDAY_CODES[new Date(toEventWallClock(ms, timezone, allDay)).getUTCDay()];
+}
+
+/**
+ * Whether `occurrence` should be shown on the grid's local calendar day `day`. All-day events cover every
+ * date from their start date up to (not including) their exclusive end date — at least their start date.
+ * Timed events cover every local day their [start, end) interval overlaps, so a multi-day event shows on
+ * each day rather than only on its start day.
+ */
+export function occursOnDay(occurrence: CalendarOccurrence, day: Date): boolean {
+    if (occurrence.allDay) {
+        const key = localDateKey(day);
+        const startKey = allDayDateKey(occurrence.startDate);
+        const endKey = allDayDateKey(occurrence.endDate);
+        return key === startKey || (key > startKey && key < endKey);
+    }
+    const dayStart = new Date(day.getFullYear(), day.getMonth(), day.getDate());
+    const dayEnd = new Date(day.getFullYear(), day.getMonth(), day.getDate() + 1);
+    const start = new Date(occurrence.startDate);
+    const end = new Date(occurrence.endDate);
+    if (start.getTime() === end.getTime()) {
+        return start >= dayStart && start < dayEnd;
+    }
+    return start < dayEnd && end > dayStart;
+}
+
+/**
+ * Whether `day` is the first day `occurrence` covers. Grid views only make that day's chip/block
+ * draggable — a drag id must be unique, so the continuation copies on later days are display-only.
+ */
+export function startsOnDay(occurrence: CalendarOccurrence, day: Date): boolean {
+    if (occurrence.allDay) {
+        return allDayDateKey(occurrence.startDate) === localDateKey(day);
+    }
+    return localDateKey(new Date(occurrence.startDate)) === localDateKey(day);
+}

package/apps/shared/components/calendar/layout/CalendarShell.tsx

@@ -108,7 +108,7 @@ export default function CalendarShell({
             return;
         }
         let cancelled = false;
-        Promise.all(
+        void Promise.all(
             mailboxes.map((mailbox) =>
                 listFolders(mailbox.uid)
                     .then((folders): MailboxCalendars => ({ mailbox, calendarFolders: folders.filter((f) => f.type === "calendar") }))