schedule

binds state

Blocks laid out on time from a list: a week of shifts, the day's room bookings, an itinerary by hour (times as HH:MM), or a project plan across dates (view=timeline, dates as YYYY-MM-DD). Overlapping blocks sit side by side; it scrolls sideways when wide.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props"text"

view

Props

"text"textThe title above it, e.g. Support rota.optional

itemsexpressionThe list of records, e.g. items=shifts. At most 200.required

viewday · week · timelineday: one day down a time axis, a column per rows= value. week: a column per day, at most 7. timeline: dates across, a bar per item, with a Today line.week

datenameField with each item's day as YYYY-MM-DD. In a timeline, used for an item with no start date (a one-day bar).date

startnameField with the start: a time as HH:MM (09:30) in day and week, a date as YYYY-MM-DD in a timeline.start

endnameField with the end, written the same way. Missing: an hour after the start, or the same day in a timeline.end

labelnameField with what each block says, e.g. label=name.title

rowsnameField that splits blocks into lanes, e.g. rows=room: a column each in day view, a row each in a timeline; shown on the block in week view.—

tonenameField that colors each block: a value good, warn, bad, accent or muted uses that tone; other values (a team, a type) each get their own color, with a key.—

keynameThe field that identifies each item, e.g. key=id. Needed for bind=.id

bindstateState that holds the selected item's key. Pressing a block sets it.—

onactionActions to run after a block is pressed, with bind= already set, e.g. emit:changed. Separate several with ;—

ifconditionShow only when this expression is true, e.g. if=done or if={count>0}. Every element takes it.—

tipstringA short explanation shown on hover, keyboard focus or a tap, e.g. tip="Orders not yet shipped": for a term or a number some people won't know, instead of more words on screen. It makes the element a Tab stop if it isn't one. Every element takes it.—

For your model

The exact guide entry a model gets for schedule, generated from the same definition.

  schedule "<text>"  — Blocks laid out on time from a list: a week of shifts, the day's room bookings, an itinerary by hour (times as HH:MM), or a project plan across dates (view=timeline, dates as YYYY-MM-DD). Overlapping blocks sit side by side; it scrolls sideways when wide.
    "<text>"  The title above it, e.g. Support rota.
    items=<expression, required>  The list of records, e.g. items=shifts. At most 200.
    view=<day|week|timeline>  day: one day down a time axis, a column per rows= value. week: a column per day, at most 7. timeline: dates across, a bar per item, with a Today line.
    date=<name>  Field with each item's day as YYYY-MM-DD. In a timeline, used for an item with no start date (a one-day bar).
    start=<name>  Field with the start: a time as HH:MM (09:30) in day and week, a date as YYYY-MM-DD in a timeline.
    end=<name>  Field with the end, written the same way. Missing: an hour after the start, or the same day in a timeline.
    label=<name>  Field with what each block says, e.g. label=name.
    rows=<name>  Field that splits blocks into lanes, e.g. rows=room: a column each in day view, a row each in a timeline; shown on the block in week view.
    tone=<name>  Field that colors each block: a value good, warn, bad, accent or muted uses that tone; other values (a team, a type) each get their own color, with a key.
    key=<name>  The field that identifies each item, e.g. key=id. Needed for bind=.
    bind=<state>  State that holds the selected item's key. Pressing a block sets it.
    on=<action>  Actions to run after a block is pressed, with bind= already set, e.g. emit:changed. Separate several with ;
    example:
      state picked=0 shifts=[{id: 1, day: "2026-11-09", from: "08:00", to: "16:00", name: "Ana Ruiz", tier: "Tier 1"}, {id: 2, day: "2026-11-09", from: "12:00", to: "20:00", name: "Ben Okafor", tier: "Tier 2"}, {id: 3, day: "2026-11-10", from: "08:00", to: "16:00", name: "Chloe Park", tier: "Tier 1"}]
      schedule "Support rota" items=shifts date=day start=from end=to label=name tone=tier view=week bind=picked

More data

stat rating chart chart-line chart-rule chart-note meter table table-column compare compare-row details detail board tree flow map pin

All data elements on one page →