Sidebar
Explore DayFlow’s sidebar experience with live examples. The demos below demonstrate the built-in sidebar UI and a custom React implementation.
Default sidebar
Enable useSidebar to get the ready-made layout with visibility toggles, calendar color swatches, and collapse controls.
November 2025
Mon
10
Tue
11
Wed
12
Thu
13
Fri
14
Sat
15
Sun
16
all-day
Weekend City Break
21:46
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
00.00
Sprint Planning
10:00 - 11:30
Pilates Class
07:30 - 08:30
Customer Journey Workshop
14:00 - 16:00
Notion System Review
18:00 - 19:00
Advanced TypeScript Study
20:00 - 21:30
Custom sidebar layout
Provide a render function to replace the sidebar with bespoke content — like team filters, analytics, or curated quick links — while still relying on the shared calendar state.
November 2025
Mon
10
Tue
11
Wed
12
Thu
13
Fri
14
Sat
15
Sun
16
all-day
Weekend City Break
21:46
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
00.00
Sprint Planning
10:00 - 11:30
Pilates Class
07:30 - 08:30
Customer Journey Workshop
14:00 - 16:00
Notion System Review
18:00 - 19:00
Advanced TypeScript Study
20:00 - 21:30
What to explore
- Hide and show calendars to see the toggles update instantly.
- Drag events between views; the custom sidebar keeps upcoming highlights in sync.
- Collapse the sidebar to reclaim space when focusing on dense week views.