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

July 2026

Month Week Day

SuMoTuWeThFrSa

28

29

30

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

22

Electrical audit

23

24

25

Water quality test

26

27

28

29

Team standupSite walkthrough

30

31

1

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

Jul 26 – Aug 1, 2026

Month Week Day

Sun 26

Mon 27

Tue 28

Wed 29

Thu 30

Fri 31

Sat 1

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

Day View

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

Today

Wednesday, July 29

Month Week Day

Wednesday 29

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)