Calendars

Events on a grid of time: one stateful Calendar with month, week, and day views, plus ten base components. Nine event colors and a mobile single-day collapse.

Demo

hero
Component
color
import { CalendarMonthViewEvent } from "@/components/application/calendar/base-components/calendar-month-view-event"; <CalendarMonthViewEvent label="Design review" supportingText="10:30 AM" color="brand" />

In context

in-context
View in a page

Family

family
Calendar
JAN
8
January 2027Week 2
Jan 1, 2027 – Jan 31, 2027
CalendarHeader
CalendarViewDropdown
JAN
8
CalendarDateIcon
CalendarColumnHeader
8
CalendarMonthViewCell
CalendarMonthViewEvent
CalendarDwViewCell
CalendarDwViewEvent
9 AM
CalendarRowLabel
CalendarTimeMarker

Types

cells

The sheet’s six Calendar Types: three views at two breakpoints.

Breakpoint Desktop

view="month"
view="week"
view="day"

Breakpoint Mobile

view="month"
view="week"
view="day"

Sizes

cells

The day and week chip over one to four slots, shortest first.

30 minutes
60 minutes
90 minutes
120 minutes

Layouts

cells

The header

JAN
8
January 2027Week 2
Jan 1, 2027 – Jan 31, 2027
selectedView="month"
JAN
8
January 2027Week 2
Jan 3, 2027 – Jan 9, 2027
selectedView="week"
JAN
8
January 8, 2027Week 2
Friday
selectedView="day"
below lg, stacked

The two chips

month chip: dot, label, time in a row
day and week chip: time under label, dot trailing

Tones

matrix

Nine ramps on both chips; the hover grid draws the fill.

Variants by chip across the columns and color down the rows
monthday and week
gray
brand
green
blue
indigo
purple
pink
orange
yellow

State: hover

Variants by chip across the columns and color down the rows
monthday and week
gray
brand
green
blue
indigo
purple
pink
orange
yellow

Content

cells

Month chip

long label, truncated
no supportingText
withDot false

Month cell

8
one chip
9
+22 more...
three chips and the overflow row

Column header

Mon8
weekday and day
Thu
weekday only, month view’s

Behaviour

cells

Below md

collapseOnMobile: nine chips as dots
month cells: no hover tint, no add button
column headers, stacked

The time gutter

9 AM
10 AM
two hours, the marker pinned to 10:30
below md, the time inline in the gutter

Loading

cells

Views

Loading events
view="month"
Loading events
view="day-week"

Whole views

month view, a third of the days
week view, ten blocks
day view, three blocks

States

cells

Month cell

8
default; hover live from md
9
current, today
10
selected
11
+22 more...
isDisabled, outside the month
12
hover, drawn: tint and add button

Column header

Mon8
default, no onClick: a div
current, a button; Tab to it
selected, a button; Tab to it

Day and week slot

empty; hover for the add button
hover, drawn: tint and add button