CalendarPatterns
Interactions
The composed starter bundle with optimistic move and resize updates, optional confirmation, and the built-in create sheet.
Direct Editing Flow
Direct editing flow
Use the `CalendarScheduler` starter when you want the current full CalendarCN overlays and productized interaction flow.
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
This version is the closest match for product integrations that want the
current CalendarScheduler starter behavior plus guardrails around
persistence.
- Uses optimistic local updates for move and resize
- Shows how to enable move confirmation without blocking every action
- Includes the built-in create sheet for richer event capture
Related evaluation route: Drag and drop calendar in React.