DayCard

One day of the studio at a glance, as Okami shows it in the owner's chat: who's working and when, then the bookings in order, and a way into the calendar for the rest.

Playground

Fri, Nov 6

In

  • Miro9:00–18:00
  • Katka10:00–12:00, 14:00–18:00

Bookings

  • 09:30EvaHaircut
  • 11:00JanaColour
  • 14:00PeterHaircut
Open in schedule
DayCard

API

PropTypeDefaultDescription
dayDayPicture—The date, who works it with the hours that apply (exceptions included), and its bookings (dayPicture).
localestring—How the date reads in the heading.
hrefstring—The day in the calendar. Leave it out to show no link.
onOpen() => void—Opens it in place instead of following the link: a client route, and the app pane on a phone.
labelsPartial<DayCardLabels>EnglishEvery word, the empty states included.

Rows

DayCard and TodayCard build a day from the same rows (day-rows.tsx), so a day reads the same whichever card tells it: a DaySection labels its rows 10px above them (TodayCard heads them with a CardSection, the rows alone a DayList), rows 6px apart; a DayRow is a name and its value at the far end; a BookingRow is one line, when · who, then what.

Fri, Nov 6

In

  • Miro9:00–18:00
  • Katka10:00–12:00, 14:00–18:00

Bookings

  • 09:30EvaHaircut · Miro
  • 11:00JanaColour · Katka
PropTypeDefaultDescription
DaySection labelstring—The section's label: text-xs, a step up on touch, a step under the card's type.
DaySection emptystring—Shown in the rows' place when there are none: “No bookings.”
DayRow name, valuestring—Someone and their day: the name truncates, the value sits at the far end in tabular figures.
BookingRow timestring—The start, two-digit (09:30), so the times stand in one column.
BookingRow client, detailstring—Who, then what: the service, plus whose it is when the card shows the whole team. The detail truncates first; the client keeps its name up to half the line.

Guidelines

  • It answers “who's in?” and “what's booked?”; the calendar beside the chat has the rest, a tap away.
  • Times are the studio's, in its time zone, whatever the viewer's clock says.