ScheduleCalendar
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 schedule view that reads from across a room. Events are grouped by date, showing only days that have events: each day's weekday, date and month sit beside a stack of solid cards, one per event, with the name in bold, the time beneath and the calendar it comes from in small capitals. Today's date is in a solid circle. In a slim column the day moves above its cards, so the cards keep the whole width.
The type grows with the box, names that are too long end in "…", and the list shows as many cards as fit, with a "+N more" line for the rest. Pass startDate and days to show a window of days, such as the next three.
Import
import { ScheduleCalendar } from "~lib/calendar/schedule-calendar";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
events | CalendarEvent[] | Yes | N/A | Events to display |
startDate | Date | No | N/A | Leave out days before this one |
days | number | No | N/A | Show only this many days, from startDate or from today |
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 box |
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 |
headingPlacement | "auto" | "beside" | "above" | No | "auto" | Where each day's heading sits; "auto" moves it above the cards when the box is too narrow to keep it beside them |
Events take the same shape as in the AgendaCalendar, including allDay for events that take whole days. Give an event a calendar, such as "Work", to print the calendar it comes from on its card.
Examples
Default
With Participants
Sparse Days
Many Events
Small Square
Wide Panel
Calendar Names
More Than Fit
The list shows as many cards as fit its height, then a line counting the rest.
Slim Column
In a narrow box each day's date, weekday and month sit in a row above its cards, so names and times are not cut short.
Headings Above
headingPlacement="above" puts the headings above the cards at any width; "beside" keeps them beside the cards however narrow the box.
Next Three Days
startDate and days show a window of days rather than every day the events are on.
All-Day Events
12-Hour Clock
Empty
With nothing to list, the schedule reads "No events", centered in its box:
With height="auto" the schedule is only as tall as its content, and the message takes a line
of its own. That lets you wrap it in a Brim without
checking for an empty week first.
See Also
- AgendaCalendar - Days side by side as columns of event cards
- WeeklyCalendar - Weekly grid calendar with time slots
- MonthlyCalendar - Monthly grid calendar