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
Default
Overlapping Events
Full Week
Custom Hours
With Patterns
With Participants
Small Square
Wide Panel
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.
12-Hour Clock
See Also
- MonthlyCalendar - Monthly grid calendar
- ScheduleCalendar - Schedule view with vertical event list