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 training

19

20

Roof inspection

21

Team standupSite walkthrough

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 19 – 25, 2026

Month Week Day

Sun 19

Mon 20

Tue 21

Wed 22

Thu 23

Fri 24

Sat 25

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

10:00 Roof inspection

09:00 Team standup14:00 Site walkthrough

14:00 Electrical audit

11:00 Water quality test

Day View

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

Today

Tuesday, April 21

Month Week Day

Tuesday 21

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 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)