Calendar Availability Patterns

Slot Readback

A static availability card shows July 16, 2026, 10:30 AM, 30 minutes, and Available slot status.

Program

Availability readbacks should show the selected slot clearly before any booking, without running calendar or hold services.

available_slot_readback.html
Visuals: captured from real browser rendering
<section class="slot-readback" aria-labelledby="slot-readback-title"><h2 id="slot-readback-title">Available slot readback</h2><dl>
  <div><dt>Date</dt><dd>July 16, 2026</dd></div>
  <div><dt>Time</dt><dd>10:30 AM</dd></div><div><dt>Duration</dt><dd>30 minutes</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Available slot</span></dd></div></dl>
  <p class="check">Learner check: this selected slot is visible before any booking starts.</p>
  <p class="note">Static slot readback only; no live calendar, availability lookup, booking engine, hold service, storage, route, API, network, script, form submit, analytics, timers, or live booking runs.</p></section>
<style>
  .slot-readback { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #0f766e; padding: 12px; background: #f0fdfa; }
  .slot-readback dl { display: grid; gap: 8px; margin: 0; }
  .slot-readback dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .slot-readback dt { color: #475569; }
  .slot-readback dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #ccfbf1; padding: 2px 8px; }
  .note { color: #475569; }
</style>

  1. Label the slot readback.

    The section is labelled by its visible heading.
    The section is labelled by its visible heading.

  2. Show the date row.

    The date is exact pinned data.
    The date is exact pinned data.

  3. Show time and duration.

    The time and duration are exact pinned data.
    The time and duration are exact pinned data.

  4. Render the available status.

    The status badge says the slot is available.
    The status badge says the slot is available.

  5. Check selected-slot readback.

    The check says this is a visible readback before booking.
    The check says this is a visible readback before booking.

  6. Check slot honesty.

    Date, time, duration, status, and no live booking.
    Date, time, duration, status, and no live booking.
step flow step(1) labels the source, step(2) shows the date, step(3) shows time and duration, step(4) shows the available status, step(5) checks the selected-slot readback, and step(6) checks the honesty note.
slot readback The section heading names the available slot readback surface.
slot rows Date, Time, Duration, and Status values are exact pinned data.
no live booking The lesson should not imply live calendars, availability lookups, booking engines, hold services, storage, routes, APIs, networks, scripts, form submits, analytics, timers, or live booking.