Calendar Views
Week and day calendar views with time grid, hour slots, timed events, all-day events, current time indicator, and view toggle.
Week View
Preview
Feb 2 - 8, 2026
Mon
2
Tue
3
Wed
4
Thu
5
Fri
6
Sat
7
Sun
8
8 AM
9 AM
10 AM
11 AM
12 PM
Team Standup
8:00 - 9:30 AM
Design Review
10:00 - 11:00 AM
Sprint Planning
9:00 - 11:00 AM
Event Color Variants
Preview
Primary Event
9:00 - 10:00 AM
Success Event
10:00 - 11:00 AM
Warning Event
11:00 - 12:00 PM
Error/Urgent Event
1:00 - 2:00 PM
Secondary Event
2:00 - 3:00 PM
Classes Reference
| Class | Description |
|---|---|
.calendar-view | Root container |
.calendar-view-header | Top bar with nav, title, toggle |
.calendar-view-nav-btn | Previous/next buttons |
.calendar-view-title | Date range title |
.calendar-view-today-btn | Go to today button |
.calendar-view-toggle | View mode toggle container |
.calendar-view-btn | Individual view toggle button |
.calendar-view-btn-active | Active view button |
.calendar-view-day-headers | Sticky day header row |
.calendar-view-day-headers-single | Single-day column layout |
.calendar-view-day-header | Individual day column header |
.calendar-view-day-header-today | Today highlight on day number |
.calendar-view-grid | Scrollable time grid area |
.calendar-view-grid-single | Single-day grid layout |
.calendar-view-times | Time labels column |
.calendar-view-time | Individual hour label |
.calendar-view-day-column | Day column for events |
.calendar-view-hour-slot | Hour slot with half-hour line |
.calendar-view-now-line | Red current time indicator |
.calendar-view-event | Timed event block |
.calendar-view-event-primary | Primary colored event |
.calendar-view-event-success | Success colored event |
.calendar-view-event-warning | Warning colored event |
.calendar-view-event-error | Error colored event |
.calendar-view-event-secondary | Secondary colored event |
.calendar-view-all-day | All-day events row |
.calendar-view-empty | Empty state container |