MultiWeekCalendar
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 multi-week grid view with horizontally spanning event bars. Supports configurable week count, overflow handling, and week-boundary event splitting.
The grid starts on the week holding startDate. The text grows with the columns, names that are too long end in "…", and each week shows as many rows of bars as its height holds, with a "+N more" line under a day that has more.
Import
import { MultiWeekCalendar } from "~lib/calendar/multi-week-calendar";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
events | CalendarEvent[] | Yes | N/A | Events to display |
startDate | Date | Yes | N/A | A day in the first week; days outside its month are set back |
numberOfWeeks | number | No | 4 | Number of week rows to display |
maxEventsPerDay | number | No | As many as fit | Most rows of bars a week shows before "+N more" |
firstDayOfWeek | "sunday" | "monday" | No | "sunday" | Which day starts the week |
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 in, such as "Europe/London" |
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 | Event description |
allDay | boolean | No | Takes whole days, listed ahead of timed events that day |
participants | Person[] | No | Event participants |
shading | PatternType | No | Fill pattern (solid, diagonal, dots, crosshatch) |
Examples
Default
Spanning Events
Events that span multiple days render as horizontal bars. Events crossing week boundaries are automatically split into separate visual segments.
Overflow
When a day has more events than rows, the last row counts the rest with a "+N more" line. maxEventsPerDay caps the rows below what the height would hold.
Monday Start
Six Weeks
With Patterns
Dense Week
Small Square
Wide Panel
More Than Fit
In a short box each week holds fewer rows of bars, and days count what they cannot show.
See Also
- WeeklyCalendar - Hourly weekly view
- MonthlyCalendar - Monthly grid calendar
- ScheduleCalendar - Schedule view with vertical event list