reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
opt-calendar4
Booking Selector
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Bookingopt-calendar example

Booking Selector

Consumer booking UI with a date grid, time slots, seats, closed-day overrides, and the booking lifecycle backed by availability rules.

A Cal.com-style booking surface that turns availability schedules and event types into selectable slots and booking records.

bookingavailabilityslotsevent-typeseats
bun add @reopt-ai/opt-calendar

APIs used

CalendarAvailabilityScheduleEventType

Live preview

Change the width and theme, then interact with the components.

1024px
Booking flow

Public date and time picker backed by availability rules

30 min slots
3

Working hours

30 Minute Sync

30mAsia/Seoul

Available slots

March 2025
SMTWTFS
Closed

Install and import

Related docsOpen playground

Install

bun add @reopt-ai/opt-calendar

Import

import { Calendar, type AvailabilitySchedule, type EventType } from "@reopt-ai/opt-calendar";

Related Examples

opt-calendar

AI Draft Review

Examples

Streams JSON Patch into a shadow calendar, shows pending changes in the live grid, then applies or discards the draft as one undoable commit.

opt-calendar

Event Calendar

Examples

Month view, recurring weekdays, all-day spans, timed events, arrow-key grid navigation, activation callbacks, and editable event creation in one production calendar fixture.

opt-calendar

Remote Source

Examples

Windowed remote event loading with snapshot versions, stale response protection, telemetry, and a read-only week grid with arrow-key day-column navigation.

PreviousEvent CalendarNextAI Draft Review