@reopt-ai/opt-calendar

AI-editing-friendly React calendar. Events and booking/availability as first-class strengths, modeled after @reopt-ai/opt-editor's AI-first architecture (schema-driven streaming + RFC 6902 JSON Patch).

• AI-first. A flat CalendarSpec is edited by streaming JSON Patch ops — the same edit path used by drag/resize and the visual editor, so AI edits and manual edits share one undo/history.
• Multi-view. Month / week / day / agenda / timeline, plus Cal.com-style public booking selectors and full availability/admin booking surfaces.
• v1 engine. Drag & resize, recurrence (RRULE), timezones (IANA via native Intl), and a windowed remote event source.
• opt infrastructure. Themed via var(--opt-*) tokens (opt-palette / opt-shell), a11y built on opt-ui-primitives, and a ShellCalendarAdapter.

Core has zero runtime dependencies; ai and zod are optional peers used only by the /server and /ai-sdk entries.

Sub-path exports

| Export | Purpose | Peer deps | | ----------------------------------- | ------------------------------- | ------------------ | | @reopt-ai/opt-calendar | Core (Calendar, hooks, types) | react | | @reopt-ai/opt-calendar/server | Server helpers (no React) | react (optional) | | @reopt-ai/opt-calendar/ai-sdk | AI SDK adapters | ai, zod (optional) | | @reopt-ai/opt-calendar/styles.css | Structural CSS | — |

import "@reopt-ai/opt-calendar/styles.css";

Event calendar

"use client";

import {
  Calendar,
  createCalendarStore,
  createEmptyCalendarSpec,
} from "@reopt-ai/opt-calendar";
import "@reopt-ai/opt-calendar/styles.css";
import { useState } from "react";

export function EventsCalendar() {
  const [store] = useState(() => {
    const spec = createEmptyCalendarSpec("Asia/Seoul");
    spec.events.standup = {
      id: "standup",
      title: "Team standup",
      start: "2026-07-06T09:00:00+09:00",
      end: "2026-07-06T09:15:00+09:00",
      rrule: "FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR",
    };
    return createCalendarStore(spec);
  });

  return <Calendar store={store} timeZone="Asia/Seoul" weekStartsOn={1} />;
}

Booking selector

Use variant="booking" when the spec contains an availability schedule and an eventType. bookingMode="public" renders the customer-facing date/time picker only. Omit it or pass "full" to include availability editing and booking administration panels in the same surface.

<Calendar
  store={store}
  variant="booking"
  bookingMode="public"
  timeZone="Asia/Seoul"
/>

Production readiness checklist

• Events: Month/week/day/agenda/timeline share one editor, one hover/focus language, and the same store.applyPatch(ops) mutation path.
• Booking: Use bookingMode="public" for the customer-facing selector and bookingMode="full" for internal availability and booking administration.
• Accessibility: Every role="grid" view ships roving-tabindex arrow-key navigation — 2D (±1 day / ±1 week) in the month view, across day columns in the week/day time grid — plus visible focus, first-field autofocus for create/booking flows, and localized status copy.
• Remote data: useCalendarRemoteSource fetches only the visible window, recovers from Strict Mode aborts, and batches saves through patch ops.
• Time safety: Drag/resize updates ignore non-finite time deltas instead of writing invalid dates, and booking views initialize against the current date unless the caller supplies an explicit selection.
• AI review: useCalendarSuggestion renders shadow draft changes before approval, so generated edits do not bypass the manual review path.
• Verification: Package tests, typecheck, lint, build, and the web e2e/opt-calendar.spec.ts flow cover Events, Booking, AI, Remote Source, Playground, Explore, and docs entry points.

Production examples

• Playground: /tools/opt-calendar-playground
• Explore hub: /explore/opt-calendar
• Booking example: /explore/opt-calendar/booking-selector