Show and edit recurring events

npx shadcn@latest add https://time.molten.sh/r/recurrence-scope-dialog.json

"use client";

import { createCalendar } from "@moltenship/calendar";
import {
  createCanonicalRecurrenceAdapter,
  createOccurrenceAdapter,
  type RecurrenceOccurrence,
  type RecurringCalendarEvent,
} from "@moltenship/calendar-recurrence";

import type { CalendarEventColor } from "@/components/calendar/event-colors";
import { createWeekView } from "@/components/calendar/time-grid-view/time-grid-view";

export interface TeamEventData {
  readonly color: CalendarEventColor;
}

/**
 * A series' master has a `recurrence`, an event that replaces one of its occurrences has an
 * `override`, and any other event happens once.
 */
export type TeamEvent = RecurringCalendarEvent<TeamEventData>;

/** What the calendar shows: one occurrence of a series, or a one-off event. */
export type TeamOccurrence = RecurrenceOccurrence<TeamEvent, string>;

export const adapters = createCanonicalRecurrenceAdapter<TeamEventData>();

/** Lucide's "repeat" icon, for the chips of repeating events. */
const repeatIcon = (
  <svg
    fill="none"
    stroke="currentColor"
    strokeLinecap="round"
    strokeLinejoin="round"
    strokeWidth={2}
    viewBox="0 0 24 24"
  >
    <path d="m17 2 4 4-4 4" />
    <path d="M3 11v-1a4 4 0 0 1 4-4h14" />
    <path d="m7 22-4-4 4-4" />
    <path d="M21 13v1a4 4 0 0 1-4 4H3" />
  </svg>
);

export const Calendar = createCalendar<TeamOccurrence>()({
  // Occurrences are the calendar's events. It reads their titles through your adapter.
  eventAdapter: createOccurrenceAdapter(adapters.event),
  views: [
    createWeekView<TeamOccurrence>({
      // The icon marks a repeating event on screen, and the description says so to screen readers.
      describeEvent: (occurrence) => (occurrence.recurrence ? "repeating event" : undefined),
      getEventColor: (occurrence) => occurrence.event.data.color,
      getEventIcon: (occurrence) => (occurrence.recurrence ? repeatIcon : null),
    }),
  ],
});

import { createCalendar, defineEventAdapter } from "@moltenship/calendar";
import {
  createOccurrenceAdapter,
  parseRecurrenceRule,
  type RecurrenceAdapters,
  type RecurrenceOccurrence,
} from "@moltenship/calendar-recurrence";

export interface Meeting {
  readonly id: string;
  readonly title: string;
  readonly start: Temporal.Instant;
  readonly end: Temporal.Instant;
  /** Where it was booked. A series repeats on this zone's wall clock. */
  readonly timeZone: string;
  /** On a series' first meeting: an RRULE, such as "FREQ=WEEKLY;BYDAY=MO,WE". */
  readonly repeats?: string;
  /** Starts of meetings the series skips. */
  readonly skips?: readonly Temporal.Instant[];
  /** On a meeting that replaces one of a series: the series, and the start it replaces. */
  readonly replaces?: { readonly seriesId: string; readonly start: Temporal.Instant };
}

export const adapters: RecurrenceAdapters<Meeting, string, never> = {
  event: defineEventAdapter<Meeting>()({
    getId: (meeting) => meeting.id,
    getTitle: (meeting) => meeting.title,
    getInterval: (meeting) => ({
      kind: "timed",
      start: meeting.start,
      end: meeting.end,
      sourceTimeZone: meeting.timeZone,
    }),
    getResourceIds: () => [],
  }),
  recurrence: {
    getRecurrence: (meeting) =>
      meeting.repeats === undefined
        ? undefined
        : { rule: parseRecurrenceRule(meeting.repeats).rule, exceptionDates: meeting.skips },
    getOverride: (meeting) =>
      meeting.replaces && {
        seriesId: meeting.replaces.seriesId,
        recurrenceId: meeting.replaces.start,
      },
  },
};

export const Calendar = createCalendar<RecurrenceOccurrence<Meeting, string>>()({
  eventAdapter: createOccurrenceAdapter(adapters.event),
});

import type { CalendarVisibleRange, PlainDateInterval } from "@moltenship/calendar";
import { createOccurrenceExpander } from "@moltenship/calendar-recurrence";
import { useMemo, useState } from "react";

import { adapters, type TeamEvent } from "./recurrence-calendar";

/**
 * The occurrences of `events` on the dates the calendar asks for. Pass `occurrences` to `events`
 * on `Root`, and `onVisibleRangeChange` to the prop of that name.
 */
export function useOccurrences(
  events: readonly TeamEvent[],
  timeZone: string,
  // The dates the calendar opens on, so its first render isn't empty.
  initialRange: PlainDateInterval,
) {
  // One expander for as long as the calendar is mounted: it keeps its work for series that
  // didn't change, and returns the same occurrence objects for them.
  const [expander] = useState(() => createOccurrenceExpander(adapters));
  const [range, setRange] = useState(initialRange);
  const expansion = useMemo(
    () => expander.expand(events, { range, timeZone }),
    [expander, events, range, timeZone],
  );

  return {
    issues: expansion.issues,
    occurrences: expansion.occurrences,
    onVisibleRangeChange: ({ loadRange }: CalendarVisibleRange) => setRange(loadRange),
  };
}

async function onEventChange(change: OccurrenceChange) {
  // A new event, or a change to a one-off event, needs no question.
  let scope: RecurrenceEditScope = "this";
  if (isRecurringChange(change)) {
    const scopes = recurrenceEditScopes(change, adapters, { timeZone });
    // None applies, so there's nothing to ask: tell the user why instead. Throwing rolls the
    // change back.
    if (scopes.length === 0) throw new Error("This repeating event can't change that way.");
    const picked = await ask({
      action: change.cause === "delete" ? "delete" : "edit",
      eventTitle: change.event.event.title,
      scopes,
    });
    // An `AbortError` is announced as a cancel, not as a change that couldn't be saved.
    if (picked === null) throw new DOMException("Cancelled", "AbortError");
    scope = picked;
  }

  const edit = resolveRecurrenceEdit(change, scope, adapters, {
    // Picked now, so the IDs of a "following" edit's new series are known.
    newSeriesId: crypto.randomUUID(),
    occurrences,
    // The zone the calendar moves occurrences on, so a series dragged by days keeps its time.
    timeZone,
  });
  if (edit.type === "rejected") throw new Error(edit.message);

  // Save the edit on your server here. The change stays pending until this function returns.
  if (edit.type === "event") {
    setEvents((current) => applyEventChange(current, edit.change));
    return;
  }
  setEvents((current) =>
    applyRecurrenceEdit(current, edit, { createId: () => crypto.randomUUID() }),
  );
  // "following" and "all" give the occurrences new IDs. The selection and keyboard focus
  // follow them, and the calendar moves focus to the occurrence under its new ID.
  setSelection((current) => renamed(current, edit.occurrenceIds));
  setFocus((current) => renamed(current, edit.occurrenceIds));
}

/** The selected occurrence's title, and a button that deletes it through `onEventChange`. */
function SelectedEvent({ occurrence }: { readonly occurrence: TeamOccurrence | undefined }) {
  const { proposeEventChange } = Calendar.useCalendarActions();

  return (
    <div className="flex min-h-12 shrink-0 items-center gap-3 border-t px-4 py-2 text-sm">
      {occurrence === undefined ? (
        <span className="text-muted-foreground">Click an event to select it.</span>
      ) : (
        <>
          <span className="min-w-0 truncate font-medium">{occurrence.event.title}</span>
          <Button
            className="ms-auto"
            onClick={() => void proposeEventChange({ cause: "delete", eventId: occurrence.id })}
            size="sm"
            variant="outline"
          >
            Delete
          </Button>
        </>
      )}
    </div>
  );
}

"use client";

import {
  eventIdOf,
  weekRange,
  type CalendarEventChange,
  type CalendarFocus,
  type CalendarSelection,
  type EventId,
} from "@moltenship/calendar";
import {
  applyRecurrenceEdit,
  isRecurringChange,
  recurrenceEditScopes,
  resolveRecurrenceEdit,
  type RecurrenceEditScope,
} from "@moltenship/calendar-recurrence";
import { useState, type MouseEvent } from "react";

import { calendarAnnouncements } from "@/components/calendar/announcements";
import { CalendarToolbar } from "@/components/calendar/calendar-toolbar";
import { useRecurrenceScopePrompt } from "@/components/calendar/recurrence-scope-dialog/use-recurrence-scope-prompt";
import { Button } from "@/components/ui/button";

import { adapters, Calendar, type TeamEvent, type TeamOccurrence } from "./recurrence-calendar";
import { useOccurrences } from "./use-occurrences";

type OccurrenceChange = CalendarEventChange<TeamOccurrence, string, string>;

/** A selection or focus on an occurrence, moved to the occurrence's new ID after an edit. */
function renamed<T extends CalendarSelection | CalendarFocus>(
  current: T | null,
  ids: ReadonlyMap<EventId, string>,
): T | null {
  return current?.kind === "event"
    ? { ...current, eventId: ids.get(current.eventId) ?? current.eventId }
    : current;
}

const weekRules = { firstDay: 1, minimalDays: 4, weekend: [6, 7] } as const;

interface TeamCalendarProps {
  readonly initialEvents: readonly TeamEvent[];
  readonly timeZone: string;
}

export function TeamCalendar({ initialEvents, timeZone }: TeamCalendarProps) {
  const [today] = useState(() => Temporal.Now.plainDateISO(timeZone));
  const [events, setEvents] = useState(initialEvents);
  const [selection, setSelection] = useState<CalendarSelection | null>(null);
  const [focus, setFocus] = useState<CalendarFocus | null>(null);
  const { occurrences, onVisibleRangeChange } = useOccurrences(
    events,
    timeZone,
    weekRange(today, { weekStartsOn: weekRules.firstDay }),
  );
  const { ask, dialog } = useRecurrenceScopePrompt();

  async function onEventChange(change: OccurrenceChange) {
    // A new event, or a change to a one-off event, needs no question.
    let scope: RecurrenceEditScope = "this";
    if (isRecurringChange(change)) {
      const scopes = recurrenceEditScopes(change, adapters, { timeZone });
      // None applies, so there's nothing to ask: tell the user why instead. Throwing rolls the
      // change back.
      if (scopes.length === 0) throw new Error("This repeating event can't change that way.");
      const picked = await ask({
        action: change.cause === "delete" ? "delete" : "edit",
        eventTitle: change.event.event.title,
        scopes,
      });
      // An `AbortError` is announced as a cancel, not as a change that couldn't be saved.
      if (picked === null) throw new DOMException("Cancelled", "AbortError");
      scope = picked;
    }

    const edit = resolveRecurrenceEdit(change, scope, adapters, {
      // Picked now, so the IDs of a "following" edit's new series are known.
      newSeriesId: crypto.randomUUID(),
      occurrences,
      // The zone the calendar moves occurrences on, so a series dragged by days keeps its time.
      timeZone,
    });
    if (edit.type === "rejected") throw new Error(edit.message);

    // Save the edit on your server here. The change stays pending until this function returns.
    if (edit.type === "event") {
      setEvents((current) => applyEventChange(current, edit.change));
      return;
    }
    setEvents((current) =>
      applyRecurrenceEdit(current, edit, { createId: () => crypto.randomUUID() }),
    );
    // "following" and "all" give the occurrences new IDs. The selection and keyboard focus
    // follow them, and the calendar moves focus to the occurrence under its new ID.
    setSelection((current) => renamed(current, edit.occurrenceIds));
    setFocus((current) => renamed(current, edit.occurrenceIds));
  }

  // Apps open an event by delegating clicks on `[data-event-id]`.
  function selectClicked(event: MouseEvent) {
    const element = (event.target as Element).closest("[data-event-id]");
    const eventId = element === null ? null : eventIdOf(element);
    setSelection(eventId === null ? null : { eventId, kind: "event" });
  }

  const selected =
    selection?.kind === "event"
      ? occurrences.find((occurrence) => occurrence.id === selection.eventId)
      : undefined;

  return (
    <>
      <Calendar.Root
        events={occurrences}
        focus={focus}
        onFocusChange={setFocus}
        onEventChange={onEventChange}
        onVisibleRangeChange={onVisibleRangeChange}
        selection={selection}
        onSelectionChange={setSelection}
        defaultAnchorDate={today}
        defaultTimeZone={timeZone}
        locale="en-US"
        weekRules={weekRules}
      >
        <Calendar.Frame className="flex h-full flex-col">
          <CalendarToolbar calendar={Calendar} className="border-b" />
          <Calendar.Viewport className="min-h-0 flex-1" onClick={selectClicked}>
            <Calendar.ActiveView />
          </Calendar.Viewport>
          <SelectedEvent occurrence={selected} />
          <Calendar.Announcer messages={calendarAnnouncements} />
        </Calendar.Frame>
      </Calendar.Root>
      {dialog}
    </>
  );
}

/** A change to a one-off event, or a new event, as any calendar applies it. */
function applyEventChange(
  events: readonly TeamEvent[],
  change: CalendarEventChange<TeamEvent, string, string>,
): readonly TeamEvent[] {
  if (change.cause === "delete") return events.filter((event) => event.id !== change.eventId);
  const { resourceIds: _resourceIds, ...placement } = change.proposed;
  if (change.cause === "create") {
    const id = crypto.randomUUID();
    return [...events, { data: { color: "blue" }, id, title: "New event", ...placement }];
  }
  return events.map((event) =>
    event.id === change.eventId
      ? { data: event.data, id: event.id, title: event.title, ...placement }
      : event,
  );
}