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

StorybookでDefaultを開く

Overlapping Events

StorybookでOverlapping Eventsを開く

Full Week

StorybookでFull Weekを開く

Custom Hours

StorybookでCustom Hoursを開く

With Patterns

StorybookでWith Patternsを開く

With Participants

StorybookでWith Participantsを開く

Small Square

StorybookでSmall Squareを開く

Wide Panel

Storybookで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.

StorybookでAll Day Eventsを開く

12-Hour Clock

StorybookでTwelve Hour Clockを開く

See Also

• MonthlyCalendar - Monthly grid calendar
• ScheduleCalendar - Schedule view with vertical event list