calendarcn
CalendarPatterns

Starter

The primitive controlled calendar setup with `CalendarRoot` and `CalendarToolbar` wired into local state.

Starter Surface

Primitive starter

Compose `CalendarRoot` and `CalendarToolbar` directly when you want the smallest install surface and total source ownership.

Mar 23 - 29, 2026

Time

Mon

Mar 23

Tue

Mar 24

Wed

Mar 25

Thu

Mar 26

Fri

Mar 27

Sat

Mar 28

Sun

Mar 29

All day

Use arrow keys to move the active time slot. Use left and right arrows to change days. Press Enter or Space to create an event at the active slot.

6 AM

7 AM

8 AM

9 AM

10 AM

11 AM

12 PM

1 PM

2 PM

3 PM

4 PM

5 PM

6 PM

7 PM

8 PM

9 PM

10 PM

Use this version when you want the smallest controlled integration: separate surface and toolbar primitives, local state, optimistic updates, and direct event creation without the bundled overlays.

  • Best for your first install of calendar-core + calendar-toolbar
  • Good base for product scheduling or internal team calendars
  • Keeps all views available so users can switch between month, week, day, and agenda

Related evaluation routes: Shadcn calendar and React scheduler component.

On this page