Network · timetable

Timetable

The “First train / Last train” sign at a station entrance, for the times that bound something: a campaign's first and last online order and its booth hours, a form's opening and closing.

Timetable

Each row is a label and a time, big and tabular, with its date below. Shenzhen time; wib adds the WIB time for family-facing pages.

Preview

Ordering hours

First order: 09:00Mon, Mar 1
Last order: 21:00Mon, Mar 15
At the booth: 10:00–17:00Wed, Mar 17

Shenzhen time

Show code

<Timetable
  title="Ordering hours"
  line="danus"
  rows={[
    { label: "First order", at: campaign.onlineOpensAt },
    { label: "Last order", at: campaign.onlineClosesAt },
    { label: "At the booth", at: booth.start, until: booth.end },
  ]}
/>

Open-ended

A side without a limit (a null onlineOpensAt) says so in words.

Preview

Registration

Opens: Open now
Closes: 23:59Tue, Nov 10 · 22:59 WIB

Shenzhen time

Show code

<Timetable title="Registration" wib rows={[{ label: "Opens", at: null, none: "Open now" }, { label: "Closes", at: closesAt }]} />

Rules

Two to four rows. Labels are the moment, not the status: “Last order”, never “Closed”.
Times come from lib/format.ts and sit in <time dateTime> with the +08:00 offset.
No countdowns: the relative “In 3 days” belongs on the departure board, and updates per day.

Don’t

“Orders open from March 1st at 9am until the 15th at 9pm, booth on the 17th.”

A timetable with First order, Last order and At the booth.