Build / Molecules

EventSchedule

molecule
play-fn

The running order of a day — what happens, and when.

A real description list, which most of Deck's lists are not: here the time genuinely is the term and the session is what it means, so dt/dd is the honest markup rather than a ul of rows that happen to start with a number. It also gives assistive tech the pairing for free — a time and its session are read together instead of as two loose strings.

Times share a column of their own so the day can be scanned down the left edge, which is the only thing anyone does with an agenda they have already read once.

import { EventSchedule } from '@meetcard/deck'

Example

<EventSchedule label="Schedule" entries={[ { time: '9:00 AM', title: 'Doors and coffee' }, { time: '10:00 AM', title: 'Keynote: Pipeline you can trust' }, ]} />

Stories

Every preview below is the real component, rendered in this page from the same story Storybook runs. The width control resizes each preview's container; CSS media queries still follow the browser window, so breakpoint behaviour is worth checking in Storybook.

A conference day, read down its left edge.

Default

Source

const Default = () => <div style={{ maxWidth: 480 }}>
    <EventSchedule
        entries={[
          { time: '9:00 AM', title: 'Doors and coffee' },
          { time: '10:00 AM', title: 'Keynote: Pipeline you can trust' },
          { time: '12:30 PM', title: 'Lunch and card exchange' },
          { time: '2:00 PM', title: 'Breakouts' },
          { time: '4:30 PM', title: 'Closing reception' },
        ]}
        label="Schedule for RevOps Summit" />
</div>;

An evening with two things in it is still a schedule.

Short Evening

Source

const ShortEvening = () => <div style={{ maxWidth: 480 }}>
    <EventSchedule
        entries={[
          { time: '7:00 PM', title: 'Drinks' },
          { time: '8:00 PM', title: 'Dinner, six to a table' },
        ]}
        label="Schedule for RevOps Summit" />
</div>;

Long session names wrap in their own column; the times stay put.

Long Session Names

Source

const LongSessionNames = () => <div style={{ maxWidth: 480 }}>
    <EventSchedule
        entries={[
          {
            time: '10:00 AM',
            title:
              'Keynote: Pipeline you can trust, and the seven spreadsheets nobody admits to running the business on',
          },
          { time: '11:30 AM', title: 'Panel' },
        ]}
        label="Schedule for RevOps Summit" />
</div>;

Props

Prop	Type	Default	Description
`entries`required	`EventScheduleEntry[]`	—	In the order they happen. Left in the caller's order rather than sorted here: a schedule that silently reorders itself hides a bug in whatever produced it.
`label`	`string`	`'Schedule'`	Accessible name, e.g. "Schedule for RevOps Summit".

Also accepts everything from Omit, so id, data-* and event handlers pass straight through.