Planning-widget
Een tijdlijn van komende periodes — tarieven, bezorgvensters, diensten — met de periode die nu loopt uitgelicht.
Dit gedeelte beschrijft een functie in een app-update die door de App Store wordt beoordeeld. Zodra de update live is, wordt het hier automatisch ontgrendeld.
The schedule template draws a bar per period across a timeline and highlights whichever
period contains the current time. Energy spot prices are the motivating case, but the shape fits any
series of timed values: delivery windows, on-call shifts, pollen forecasts, court bookings.
Fields
| Field | Type | Notes |
|---|---|---|
template | string | Required. Must be "schedule" |
periods | object[] | Required. Between 1 and 48 periods (two days of hourly data), in strictly increasing start order |
periods[].start | string | Required. RFC 3339 timestamp the period begins. Must be strictly after the previous period's start, after 2000-01-01, and no more than 366 days ahead |
periods[].value | float | Required. The value for that period — price, load, headcount. Must be finite. Unit-agnostic; label it with the content-level unit |
periods[].level | string | low / medium / high. Sets the band color for that bar. Absent means the client derives bands from the posted range |
unit | string | Unit or currency symbol rendered with the values (e.g. "¢", "kW"). Max 32 characters |
label, subtitle, icon, accent_color, background_color, text_color | string | Shared content fields — see the API reference |
Example: hourly tariff
{
"content": {
"template": "schedule",
"label": "Tariff",
"subtitle": "Spot price · today",
"icon": "bolt.badge.clock.fill",
"unit": "¢",
"accent_color": "yellow",
"periods": [
{ "start": "2027-05-10T08:00:00Z", "value": 14.2 },
{ "start": "2027-05-10T09:00:00Z", "value": 12.8 },
{ "start": "2027-05-10T10:00:00Z", "value": 11.9, "level": "low" },
{ "start": "2027-05-10T11:00:00Z", "value": 13.4 },
{ "start": "2027-05-10T12:00:00Z", "value": 18.7 },
{ "start": "2027-05-10T13:00:00Z", "value": 22.4, "level": "high" },
{ "start": "2027-05-10T14:00:00Z", "value": 24.1, "level": "high" },
{ "start": "2027-05-10T15:00:00Z", "value": 19.8 },
{ "start": "2027-05-10T16:00:00Z", "value": 15.2 },
{ "start": "2027-05-10T17:00:00Z", "value": 12.1, "level": "low" }
]
}
}Behavior
A period runs until the next period's start, which is why starts must strictly
increase — two equal starts would render a zero-width band, and a reversed pair an inverted one.
The last period has no successor, so it extends to the edge of the chart. The widget finds the
period containing the current time and highlights it, re-evaluating on device as the clock moves,
so an hourly tariff needs one push per publish rather than one per hour.
level is optional per period. When you omit it everywhere, the widget splits the posted
range into terciles and colors each bar by which third its value falls in — good enough for a price
curve and free of any tuning. Set it explicitly when the bands mean something specific (a supplier's
own off-peak / peak definition, a staffing threshold). Mixing the two within one payload is allowed
but reads inconsistently, so prefer all or nothing.
Like every array in widget content, periods is replaced wholesale by a merge patch. Publish the whole window you want drawn — typically today plus tomorrow once tomorrow's prices land — rather than appending period by period.
Build a curve and scrub through the day on the playground to see how the current-period highlight behaves.