Calendar

Full-page scheduling calendar with month, week, and day views. Renders events as colored blocks. Built natively with DS tokens — not FullCalendar.js. Reusable across verticals for equipment scheduling, occurrences, and reservations.

Month View

Default view. Events render as colored pills. Click events or empty dates. Use the toolbar to navigate months or switch views.

Today

April 2026

Month Week Day

SuMoTuWeThFrSa

29

30

31

1

2

3

Equipment inspection

4

5

HVAC maintenance

6

7

8

Fire extinguisher check

9

10

11

12

Generator serviceElevator inspection

13

14

15

Plumbing repair

16

17

18

Safety trainingTeam standupSite walkthrough

19

20

Roof inspection

21

22

Electrical audit

23

24

25

Water quality test

26

27

28

29

30

1

2

Week View

Timed events positioned on a 24-hour grid. Overlapping events stack side-by-side. Red line shows current time on today's column.

Today

Apr 12 – 18, 2026

Month Week Day

Sun 12

Mon 13

Tue 14

Wed 15

Thu 16

Fri 17

Sat 18

00:00

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

08:00 Generator service09:30 Elevator inspection

13:00 Plumbing repair

09:00 Safety training09:00 Team standup14:00 Site walkthrough

Day View

Single-day focus with full-width event blocks. Same time grid and positioning as week view.

Today

Saturday, April 18

Month Week Day

Saturday 18

00:00

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

09:00 Safety training09:00 Team standup14:00 Site walkthrough

Event Colors

Each event carries its own color. Use DS semantic tokens for consistent meaning: info for inspections, warning for maintenance, success for completed, destructive for urgent. Events without a color use the accent default.

Default (accent)

Inspection (info)

Maintenance (warning)

Completed (success)

Urgent (destructive)

TOKEN REFERENCE

Calendar use component tokens from components.css:

--calendar-bg: var(--color-surface)--calendar-border: var(--elevation-border)--calendar-radius: var(--radius-md)--calendar-title-font: var(--type-heading-font)--calendar-title-size: var(--type-heading-size)--calendar-toggle-font: var(--type-label-font) (Berkeley Mono)--calendar-toggle-active-bg: var(--color-accent)--calendar-weekday-font: var(--type-label-font)--calendar-cell-min-height: var(--space-4xl)--calendar-cell-today-bg: var(--color-accent-subtle)--calendar-day-today-bg: var(--color-accent)--calendar-time-font: var(--type-data-font)--calendar-slot-height: var(--space-2xl)--calendar-now-color: var(--color-destructive)--calendar-event-font: var(--type-body-sm-font)--calendar-event-radius: var(--radius-sm)--calendar-event-default-bg: var(--color-accent)