Skip to content
silver-uisilver-ui

Schedule

Read-only schedule shell for day, week, month, and list views.

Examples

Section titled “Examples”

Month

Section titled “Month”

July 2026

Sun

Mon

Tue

Wed

Thu

Fri

Sat

28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
<ScheduleStory view={createScheduleMonthlyView()} />

Week

Section titled “Week”

July 2026

UTC
Customer summitDesign reviewPlanning offsite
8 AM
9 AM
10 AM
Team sync10:00 AM - 11:00 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
<ScheduleStory
  events={weekEvents}
  view={createScheduleWeeklyView({maxHour: 18, minHour: 8})}
/>

Resizable Events

Section titled “Resizable Events”

July 2026

UTC
Planning offsiteRelease freeze
QA window
8 AM
9 AM
10 AM
11 AM
12 PM
Roadmap triage12:00 PM - 1:00 PM
1 PM
2 PM
Customer escalation review2:00 PM - 3:00 PM
Prototype critique2:30 PM - 3:30 PM
3 PM
Launch checklist3:30 PM - 4:00 PM
4 PM
Team sync4:00 PM - 4:30 PM
Study readout4:45 PM - 5:30 PM
5 PM
Design review5:00 PM - 6:00 PM
<ResizableEventsStory />

Movable Events

Section titled “Movable Events”

July 2026

UTC
Planning offsiteRelease freeze
QA window
8 AM
9 AM
10 AM
11 AM
12 PM
Roadmap triage12:00 PM - 1:00 PM
1 PM
2 PM
Customer escalation review2:00 PM - 3:00 PM
Prototype critique2:30 PM - 3:30 PM
3 PM
Launch checklist3:30 PM - 4:00 PM
4 PM
Team sync4:00 PM - 4:30 PM
Study readout4:45 PM - 5:30 PM
5 PM
Design review5:00 PM - 6:00 PM
<MovableEventsStory />

Creatable Events

Section titled “Creatable Events”

July 2026

UTC
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
<CreatableEventsStory />

Monday Start Week

Section titled “Monday Start Week”

July 2026

UTC
Planning offsiteRelease freeze
QA window
Launch window
8 AM
9 AM
Partner handoff9:30 AM - 10:45 AM
10 AM
11 AM
12 PM
Roadmap triage12:00 PM - 1:00 PM
1 PM
2 PM
Customer escalation review2:00 PM - 3:00 PM
Prototype critique2:30 PM - 3:30 PM
3 PM
Launch checklist3:30 PM - 4:00 PM
Account planning3:00 PM - 4:30 PM
4 PM
Team sync4:00 PM - 4:30 PM
Study readout4:45 PM - 5:30 PM
5 PM
Design review5:00 PM - 6:00 PM
<ScheduleStory
  view={createScheduleWeeklyView({
    maxHour: 18,
    minHour: 8,
    weekStartsOn: 1,
  })}
/>

Hidden Weekend Days

Section titled “Hidden Weekend Days”

July 2026

UTC
Customer summitDesign reviewPlanning offsite
8 AM
9 AM
10 AM
Team sync10:00 AM - 11:00 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
<ScheduleStory
  events={weekEvents}
  view={createScheduleWeeklyView({
    hiddenDays: [0, 6],
    maxHour: 18,
    minHour: 8,
  })}
/>

Day

Section titled “Day”

July 2026

UTC
Planning offsiteRelease freeze
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
Customer escalation review2:00 PM - 3:00 PM
Prototype critique2:30 PM - 3:30 PM
3 PM
Launch checklist3:30 PM - 4:00 PM
4 PM
Team sync4:00 PM - 4:30 PM
Study readout4:45 PM - 5:30 PM
5 PM
<ScheduleStory view={createScheduleDayView({maxHour: 18, minHour: 8})} />

List View

Section titled “List View”

July 2026

10Fri

7:35 PM - 8:35 PM
Past sync
8:45 PM - 9:45 PM
Customer escalation review
9:50 PM - 10:50 PM
Current design review
11:20 PM - 12:20 AM
Future planning session

11Sat

11:20 PM - 12:20 AM
Future planning session
1:05 AM - 2:05 AM
Release readiness
<ScheduleStory
  events={listEvents}
  highlightDate={now.epochMilliseconds}
  timezoneID={timezoneID}
  view={createScheduleListView({days: 7})}
  viewDate={now.epochMilliseconds}
/>

Async Events

Section titled “Async Events”

July 2026

UTC
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
<ScheduleStory
  events={loader}
  view={createScheduleWeeklyView({maxHour: 18, minHour: 8})}
/>

Async Events With Toast Error

Section titled “Async Events With Toast Error”

July 2026

UTC
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
<ToastViewport>
  <AsyncEventsWithToastStory />
</ToastViewport>

View Selector

Section titled “View Selector”

July 2026

UTC
Planning offsiteRelease freeze
QA window
8 AM
9 AM
10 AM
11 AM
12 PM
Roadmap triage12:00 PM - 1:00 PM
1 PM
2 PM
Customer escalation review2:00 PM - 3:00 PM
Prototype critique2:30 PM - 3:30 PM
3 PM
Launch checklist3:30 PM - 4:00 PM
4 PM
Team sync4:00 PM - 4:30 PM
Study readout4:45 PM - 5:30 PM
5 PM
Design review5:00 PM - 6:00 PM
<ScheduleStory plugins={[viewSelectorPlugin]} view={view} />

Custom Plugin

Section titled “Custom Plugin”
Draft

July 2026

UTC
Planning offsiteRelease freeze
QA window
8 AM
9 AM
10 AM
11 AM
12 PM
Roadmap triage12:00 PM - 1:00 PM
1 PM
2 PM
Customer escalation review2:00 PM - 3:00 PM
Prototype critique2:30 PM - 3:30 PM
3 PM
Launch checklist3:30 PM - 4:00 PM
4 PM
Team sync4:00 PM - 4:30 PM
Study readout4:45 PM - 5:30 PM
5 PM
Design review5:00 PM - 6:00 PM
<ScheduleStory
  plugins={[customPlugin]}
  view={createScheduleWeeklyView({maxHour: 18, minHour: 8})}
/>

Event Popover

Section titled “Event Popover”

July 2026

Sun

Mon

Tue

Wed

Thu

Fri

Sat

28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
<EventPopoverStory />

Event Popover Custom Content

Section titled “Event Popover Custom Content”

July 2026

UTC
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
<Schedule
  categories={categories}
  events={eventPopoverEvents}
  highlightDate={defaultHighlightDate}
  plugins={[paginationPlugin, eventPopoverPlugin]}
  timezoneID={localTimezoneID}
  view={createScheduleWeeklyView({maxHour: 18, minHour: 8})}
  viewDate={viewDate}
/>

Without Categories

Section titled “Without Categories”

July 2026

UTC
Maintenance window
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
Open sync4:00 PM - 4:30 PM
Notes review4:45 PM - 5:30 PM
5 PM
<ScheduleStory
  categories={[]}
  events={eventsWithoutCategories}
  view={createScheduleWeeklyView({maxHour: 18, minHour: 8})}
/>

Color And Category Fallbacks

Section titled “Color And Category Fallbacks”

July 2026

UTC
8 AM
9 AM
Blue category9:00 AM - 9:30 AM
10 AM
Cyan category10:00 AM - 10:30 AM
11 AM
Gray category11:00 AM - 11:30 AM
12 PM
Green category12:00 PM - 12:30 PM
1 PM
Orange category1:00 PM - 1:30 PM
2 PM
Pink category2:00 PM - 2:30 PM
3 PM
Purple category3:00 PM - 3:30 PM
Unknown category keeps label3:00 PM - 3:30 PM
4 PM
Red category4:00 PM - 4:30 PM
Missing category uses default4:00 PM - 4:30 PM
5 PM
Teal category5:00 PM - 5:30 PM
6 PM
Yellow category6:00 PM - 6:30 PM
7 PM
<ScheduleStory
  categories={colorFallbackCategories}
  events={fallbackEvents}
  view={createScheduleWeeklyView({maxHour: 20, minHour: 8})}
/>

Empty

Section titled “Empty”

July 2026

10Fri

<ScheduleStory events={[]} view={createScheduleListView({days: 7})} />

Multi Day Events

Section titled “Multi Day Events”

July 2026

UTC
Launch window
Launch windowStaged rollout
12 AM
Overnight handoff11:00 PM - 2:00 AM
1 AM
2 AM
3 AM
4 AM
5 AM
6 AM
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
7 PM
8 PM
9 PM
10 PM
Regional briefing10:00 PM - 1:30 AM
11 PM
Overnight handoff11:00 PM - 2:00 AM
<ScheduleStory
  events={multiDayEvents}
  view={createScheduleWeeklyView({maxHour: 24, minHour: 0})}
/>

Timezones

Section titled “Timezones”

July 2026

UTC
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
Global sync5:00 PM - 7:00 PM
6 PM
7 PM

July 2026

PDT
8 AM
9 AM
10 AM
Global sync10:00 AM - 12:00 PM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
7 PM
<div style={{display: 'grid', gap: 24}}>
  <ScheduleStory
    events={sameInstantEvents}
    timezoneID="UTC"
    view={createScheduleDayView({maxHour: 20, minHour: 8})}
    viewDate={utcToday.toZonedDateTime('UTC').epochMilliseconds}
  />
  <ScheduleStory
    events={sameInstantEvents}
    timezoneID="America/Los_Angeles"
    view={createScheduleDayView({maxHour: 20, minHour: 8})}
    viewDate={
      utcToday.toZonedDateTime('America/Los_Angeles').epochMilliseconds
    }
  />
</div>

Hour Range Edge Cases

Section titled “Hour Range Edge Cases”

July 2026

UTC
Planning offsiteRelease freeze
12 AM
1 AM
2 AM
3 AM
4 AM
5 AM
6 AM
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
Customer escalation review2:00 PM - 3:00 PM
Prototype critique2:30 PM - 3:30 PM
3 PM
Launch checklist3:30 PM - 4:00 PM
4 PM
Team sync4:00 PM - 4:30 PM
Study readout4:45 PM - 5:30 PM
5 PM
6 PM
7 PM
8 PM
9 PM
10 PM
11 PM

July 2026

UTC
Planning offsiteRelease freeze
8 PM
9 PM
10 PM
11 PM
<div style={{display: 'grid', gap: 24}}>
  <ScheduleStory view={createScheduleDayView({maxHour: 24, minHour: 0})} />
  <ScheduleStory view={createScheduleDayView({maxHour: 24, minHour: 20})} />
</div>

Hour Heights

Section titled “Hour Heights”

July 2026

UTC
Planning offsiteRelease freeze
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
Customer escalation review2:00 PM - 3:00 PM
Prototype critique2:30 PM - 3:30 PM
3 PM
Launch checklist3:30 PM - 4:00 PM
4 PM
Team sync4:00 PM - 4:30 PM
Study readout4:45 PM - 5:30 PM
5 PM

July 2026

UTC
Planning offsiteRelease freeze
QA window
8 AM
9 AM
10 AM
11 AM
12 PM
Roadmap triage12:00 PM - 1:00 PM
1 PM
2 PM
Customer escalation review2:00 PM - 3:00 PM
Prototype critique2:30 PM - 3:30 PM
3 PM
Launch checklist3:30 PM - 4:00 PM
4 PM
Team sync4:00 PM - 4:30 PM
Study readout4:45 PM - 5:30 PM
5 PM
Design review5:00 PM - 6:00 PM
<div style={{display: 'grid', gap: 24}}>
  <ScheduleStory
    view={createScheduleDayView({
      hourHeight: 48,
      maxHour: 18,
      minHour: 8,
    })}
  />
  <ScheduleStory
    view={createScheduleWeeklyView({
      hourHeight: 132,
      maxHour: 18,
      minHour: 8,
    })}
  />
</div>

Current Time

Section titled “Current Time”

July 2026

UTC
12 AM
1 AM
2 AM
3 AM
4 AM
5 AM
6 AM
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
7 PM
8 PM
Past sync8:35 PM - 9:35 PM
9 PM
10 PM
Design review10:35 PM - 11:35 PM
11 PM
<ScheduleStory
  events={currentEvents}
  highlightDate={now.epochMilliseconds}
  view={createScheduleDayView({maxHour: 24, minHour: 0})}
  viewDate={now.epochMilliseconds}
/>

Current Time24 Hour Mode

Section titled “Current Time24 Hour Mode”

July 2026

UTC
12 AM
1 AM
2 AM
3 AM
4 AM
5 AM
6 AM
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
7 PM
8 PM
Earlier sync8:50 PM - 9:50 PM
9 PM
10 PM
Upcoming review10:35 PM - 11:35 PM
11 PM
<ScheduleStory
  events={currentEvents}
  highlightDate={now.epochMilliseconds}
  timezoneID={timezoneID}
  view={createScheduleDayView({
    hourHeight: 56,
    maxHour: 24,
    minHour: 0,
  })}
  viewDate={now.epochMilliseconds}
/>

Past And Current States

Section titled “Past And Current States”

July 2026

UTC
12 AM
1 AM
2 AM
3 AM
4 AM
5 AM
6 AM
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
7 PM
8 PM
Past event8:20 PM - 9:20 PM
9 PM
Current event9:35 PM - 10:35 PM
10 PM
11 PM
Future event11:05 PM - 12:05 AM
<ScheduleStory
  events={stateEvents}
  highlightDate={now.epochMilliseconds}
  view={createScheduleDayView({maxHour: 24, minHour: 0})}
  viewDate={now.epochMilliseconds}
/>

Highlight Date

Section titled “Highlight Date”

July 2026

UTC
Planning offsiteRelease freeze
QA window
8 AM
9 AM
10 AM
11 AM
12 PM
Roadmap triage12:00 PM - 1:00 PM
1 PM
2 PM
Customer escalation review2:00 PM - 3:00 PM
Prototype critique2:30 PM - 3:30 PM
3 PM
Launch checklist3:30 PM - 4:00 PM
4 PM
Team sync4:00 PM - 4:30 PM
Study readout4:45 PM - 5:30 PM
5 PM
Design review5:00 PM - 6:00 PM
<ScheduleStory
  highlightDate={dayInstant(2)}
  view={createScheduleWeeklyView({maxHour: 18, minHour: 8})}
  viewDate={dayInstant(0)}
/>

Five Week Month

Section titled “Five Week Month”

July 2026

Sun

Mon

Tue

Wed

Thu

Fri

Sat

28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
<ScheduleStory view={createScheduleMonthlyView({weekCount: 5})} />

Show All Month Events

Section titled “Show All Month Events”

July 2026

Sun

Mon

Tue

Wed

Thu

Fri

Sat

28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
<ScheduleStory
  events={busyDayEvents}
  view={createScheduleMonthlyView({monthRowHeight: 'auto'})}
/>

API

Section titled “API”

Schedule

Section titled “Schedule”

Read-only schedule shell for day, week, month, and list views.

PropTypeDefaultDescription
categoriesReadonlyArray<ScheduleCategory>—Category definitions used to style events by their category value.
classNamestring—Additional CSS class names applied to the schedule root.
data-testidstring—Test ID applied to the schedule root.
events*ScheduleEventSource—Static events or an async event loader.
highlightDateInstant—Instant highlighted as the current date. Defaults to mount time.
pluginsReadonlyArray<SchedulePlugin>—Header/rendering plugins.
refRef<HTMLDivElement>—Ref forwarded to the schedule root.
styleCSSProperties—Inline styles applied to the schedule root.
timezoneIDstring—IANA timezone ID used for date math and rendering.
view*ScheduleView<Options>—View object returned by a createSchedule*View factory.
viewDate*Instant—Instant used to choose the rendered range.

ScheduleEventPopoverContent

Section titled “ScheduleEventPopoverContent”

Default Google-Calendar-style content for the event popover. Renders the event color, title, date/time, and category in a MetadataList with icon-only labels, plus optional `description` and `location` rows, an attendee response footer, and optional edit/delete actions — each shown only when the corresponding data or callback is present. A close button is always rendered. Pass this to the event popover plugin's `renderContent` to wire actions, e.g. `renderContent: (event, controls) => <ScheduleEventPopoverContent event={event} onClose={controls.close} onEdit={...} />`.

PropTypeDefaultDescription
event*CalendarEvent<TAuxiliaryData>—The event to display.
onClose*() => void—Closes the popover. Wired to the close button.
onDelete(event: CalendarEvent<TAuxiliaryData>) => void—Called when the delete action is triggered. When omitted, no delete button is rendered.
onEdit(event: CalendarEvent<TAuxiliaryData>) => void—Called when the edit action is triggered. When omitted, no edit button is rendered.
onRespond( event: CalendarEvent<TAuxiliaryData>, response: string | null, ) => void—Called when the attendee response (Going / Not Going / Maybe) changes. The response is null when the selection is cleared.