Aller au contenu principal

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​

NameTypeRequiredDefaultDescription
eventsCalendarEvent[]YesN/AEvents to display
startDateDateNoN/ALeave out days before this one
daysnumberNoN/AShow only this many days, from startDate or from today
widthnumber | stringNo300Container width
heightnumber | stringNo300Container height
size"auto" | "sm" | "md" | "lg"No"auto"Text size; "auto" grows it with the width of the box
timeZonestringNoThe device's zoneTime 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​

Ouvrir Default dans Storybook

With Participants​

Ouvrir With Participants dans Storybook

Sparse Days​

Ouvrir Sparse Days dans Storybook

Many Events​

Ouvrir Many Events dans Storybook

Small Square​

Ouvrir Small Square dans Storybook

Wide Panel​

Ouvrir Wide Panel dans Storybook

Calendar Names​

Ouvrir Calendar Names dans Storybook

More Than Fit​

The list shows as many cards as fit its height, then a line counting the rest.

Ouvrir More Than Fit dans Storybook

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.

Ouvrir Slim Column dans Storybook

Headings Above​

headingPlacement="above" puts the headings above the cards at any width; "beside" keeps them beside the cards however narrow the box.

Ouvrir Headings Above dans Storybook

Next Three Days​

startDate and days show a window of days rather than every day the events are on.

Ouvrir Next Three Days dans Storybook

All-Day Events​

Ouvrir All Day Events dans Storybook

12-Hour Clock​

Ouvrir Twelve Hour Clock dans Storybook

Empty​

With nothing to list, the schedule reads "No events", centered in its box:

Ouvrir Empty Schedule dans Storybook

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.

Ouvrir Empty At Content Height dans Storybook

See Also​