AgendaCalendar
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-day agenda view showing event cards in vertical columns, under each day's weekday, date and month. Today's date is in a solid circle. Each event is a solid card with its name in bold, its time beneath, the start of its details and the calendar it comes from, so events stay distinct from across a room. Card height is driven by text content rather than event duration, making it ideal for displaying rich event details without the empty gaps of an hourly grid.
The type grows with the columns, names that are too long end in "…", and each column shows as many cards as fit, with a "+N more" line for the rest.
Import
import { AgendaCalendar } from "~lib/calendar/agenda-calendar";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
events | CalendarEvent[] | Yes | N/A | Events to display |
startDate | Date | Yes | N/A | First day of the agenda |
days | number | No | 3 | Number of day columns to show |
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" | Draw times on a 24-hour or a 12-hour clock |
CalendarEvent
An all-day event's start and end are days, with end the day after the last one, the way calendar feeds write them. Make them from the dates as written, such as new Date("2026-10-05"), so they name the same days in every time zone.
To show a calendar someone has published as a link (the .ics or webcal:// kind), read it with useCalendarFeed, which gives events in this shape.
| 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 (ends in "…" after a few lines) |
location | string | No | Where it happens, printed ahead of the description |
allDay | boolean | No | Takes whole days; shown as "All day" |
calendar | string | No | The calendar it comes from, printed on its card |
participants | Person[] | No | Event participants |
shading | PatternType | No | Fill pattern (solid, diagonal, dots, crosshatch) |
Examples
Default
Small Square
In a small box the text steps down a size, and names too long for their column end in "…".
Wide Panel
In a wide box the text steps up a size.
More Than Fit
Each column shows as many cards as fit its height, then a line counting the rest.
All-Day Events
12-Hour Clock
Another Time Zone
Days and times are read in the device's time zone. Pass timeZone to show them somewhere else.
Seven Days
A full-week agenda view with 7 columns.
With Descriptions
An event's description and participants wrap and end in "…" after a few lines.
Multi-Day Event
An event that spans several days shows in each day's column: "From" the time it starts on its first day, "All day" on the days it runs through, and "Until" the time it ends on its last day.
Asymmetric Columns
Each column is only as long as its events.
Overnight Event
Single Day
Empty
With height="auto" the agenda is only as tall as its content, and with nothing on its days it
keeps one line under the headings for "No events". That lets you wrap it in a
Brim without checking for an empty week first.
See Also
- WeeklyCalendar - Hourly weekly view
- MultiWeekCalendar - Multi-week grid calendar
- MonthlyCalendar - Monthly grid calendar
- ScheduleCalendar - Schedule view with vertical event list