Packs

Scheduling components

The scheduling pack's 5 components: time: a month calendar, events, time slots to pick, a day's agenda and countdowns.

View as Markdown

Add it with packs: ["scheduling"], or leave packs out for every pack.

Calendar

A month with marked days, from the Markdown table inside: the date as YYYY-MM-DD, then what's on.

Between its tags: a Markdown table (first column labels, the others series).

Attribute Type Required Values
month text
title text
October
MonTueWedThuFriSatSun
1234
56Sprint planning7891011
12131415Design review161718
1920Launch2122232425
262728293031Quarter closes
  • Sprint planning
  • Design review
  • Launch
  • Quarter closes
The model's answer
<Calendar month="2026-10" title="October">
| Date | What |
|---|---|
| 2026-10-06 | Sprint planning |
| 2026-10-15 | Design review |
| 2026-10-20 | Launch |
| 2026-10-31 | Quarter closes |
</Calendar>

Event

One event; details between the tags.

Between its tags: inline text: its label.

Attribute Type Required Values
title text yes
start text yes
end text
where text
tone one of neutral (default), info, success, warning, danger

Launch party

Rooftop, 5th floor

Bring a guest. Drinks and food from 18:30.

The model's answer
<Event title="Launch party" start="2026-10-20T18:00" end="2026-10-20T21:00" where="Rooftop, 5th floor" tone="info">Bring a guest. Drinks and food from 18:30.</Event>

TimeSlots

A form field: pick one of the times.

Between its tags: nothing: it closes itself (<Name ... />).

Attribute Type Required Values
label text yes
options values split by ` ` yes
name text
value text
hint text
required true or false
Pick a time on Thursday *
The model's answer
<Form name="book">
<TimeSlots label="Pick a time on Thursday" name="slot" options="09:00 | 09:30 | 10:00 | 11:30 | 14:30 | 16:00" required="true" />
<Button>Book</Button>
</Form>

Agenda

A day in time order, from the Markdown table inside: the time, then what.

Between its tags: a Markdown table (first column labels, the others series).

Attribute Type Required Values
title text
Conference, day one
  1. Keynote: the next ten years of the web
  2. Rust on phones
  3. Lunch
  4. Designing for streaming UIs
The model's answer
<Agenda title="Conference, day one">
| Time | Talk |
|---|---|
| 9:00-9:45am | Keynote: the next ten years of the web |
| 10:30-11:15am | Rust on phones |
| 12:30–1:00pm | Lunch |
| 1:30-2:15pm | Designing for streaming UIs |
</Agenda>

Countdown

Time left until a moment, given as YYYY-MM-DDTHH:MM.

Between its tags: nothing: it closes itself (<Name ... />).

Attribute Type Required Values
label text yes
until text yes
Until the year ends
The model's answer
<Countdown label="Until the year ends" until="2027-01-01T00:00" />