WeeklyCalendar

Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.

A Google Calendar-style weekly view. Displays events across 7 days with configurable hour range and automatic overlap handling.

The text grows with the columns, and each block shows its name, ending in "…" when it is too long, then its time and details when it is tall enough. Events that take whole days sit as bars in a row above the hours, with a "+N more" line when there are more than fit.

Import

import { WeeklyCalendar } from "~lib/calendar/weekly-calendar";

Props

Name	Type	Required	Default	Description
`events`	`CalendarEvent[]`	Yes	N/A	Events to display
`weekStartDate`	`Date`	Yes	N/A	Any day in the week to display
`firstDayOfWeek`	`"sunday" \| "monday"`	No	`"sunday"`	Which day starts the week
`startHour`	`number`	No	`8`	First visible hour
`endHour`	`number`	No	`20`	Hour the grid ends at
`width`	`number \| string`	No	`300`	Container width
`height`	`number \| string`	No	`300`	Container height
`size`	`"auto" \| "sm" \| "md" \| "lg"`	No	`"auto"`	Text size; `"auto"` grows it with the width of the columns
`timeZone`	`string`	No	The device's zone	Time zone to read days and times in, such as `"Europe/London"`
`timeFormat`	`"24h" \| "12h"`	No	`"24h"`	Label hours and times on a 24-hour or a 12-hour clock

CalendarEvent

Name	Type	Required	Description
`name`	`string`	Yes	Event title
`start`	`Date`	Yes	Start time
`end`	`Date`	Yes	End time
`id`	`string`	No	Unique identifier
`description`	`string`	No	Shown below the name when the block is tall enough
`allDay`	`boolean`	No	Takes whole days; drawn in the row above the hours
`participants`	`Person[]`	No	Shown below description when the block is tall enough
`shading`	`PatternType`	No	Fill pattern (`solid`, `diagonal`, `dots`, `crosshatch`)

Examples

All-Day Events

Events that take whole days, and timed events of a day or longer, are drawn as bars above the hours. When there are more than the row holds, a day counts the rest.

Open All Day Events in Storybook

12-Hour Clock

Open Twelve Hour Clock in Storybook

Import​

Props​

CalendarEvent​

Examples​

Default​

Overlapping Events​

Full Week​

Custom Hours​

With Patterns​

With Participants​

Small Square​

Wide Panel​

All-Day Events​

12-Hour Clock​

See Also​

Import

Props

CalendarEvent

Examples

Default

Overlapping Events

Full Week

Custom Hours

With Patterns

With Participants

Small Square

Wide Panel

All-Day Events

12-Hour Clock

See Also