Calendar Availability Patterns

Slot Notice

A static unavailable slot notice shows July 16, 2026 at 10:30 AM, Team standup, 11:30 AM, and Unavailable slot status.

Program

Unavailable slot notices should explain why a selected time is blocked and show the next visible option without running conflict checks.

unavailable_slot_notice.html
Visuals: captured from real browser rendering
<section class="slot-notice" aria-labelledby="slot-notice-title"><h2 id="slot-notice-title">Unavailable slot notice</h2><dl>
  <div><dt>Requested</dt><dd>July 16, 2026 at 10:30 AM</dd></div>
  <div><dt>Reason</dt><dd>Team standup</dd></div><div><dt>Next open</dt><dd>11:30 AM</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Unavailable slot</span></dd></div></dl>
  <p class="check">Learner check: the reason and next open time are visible static data.</p>
  <p class="note">Static unavailable notice only; no live calendar, conflict detection, availability lookup, booking engine, hold service, storage, route, API, network, script, form submit, analytics, timers, or live conflict checks run.</p></section>
<style>
  .slot-notice { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #b45309; padding: 12px; background: #fffbeb; }
  .slot-notice dl { display: grid; gap: 8px; margin: 0; }
  .slot-notice dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .slot-notice dt { color: #475569; }
  .slot-notice dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #fef3c7; padding: 2px 8px; }
  .note { color: #475569; }
</style>

  1. Label the unavailable notice.

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

  2. Show requested slot.

    The requested slot is exact pinned data.
    The requested slot is exact pinned data.

  3. Show reason and next open time.

    The reason and next open time are exact pinned data.
    The reason and next open time are exact pinned data.

  4. Render unavailable status.

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

  5. Check unavailable explanation.

    The check says the reason and next open time are visible static data.
    The check says the reason and next open time are visible static data.

  6. Check notice honesty.

    Requested slot, reason, next open time, status, and no live conflict checks.
    Requested slot, reason, next open time, status, and no live conflict checks.
step flow step(1) labels the source, step(2) shows the requested time, step(3) shows the reason and next open time, step(4) shows the unavailable status, step(5) checks the static explanation, and step(6) checks the honesty note.
unavailable readback The section heading names the unavailable slot notice surface.
notice rows Requested, Reason, Next open, and Status values are exact pinned data.
no conflict checks The lesson should not imply live calendars, conflict detection, availability lookups, booking engines, hold services, storage, routes, APIs, networks, scripts, form submits, analytics, timers, or live conflict checks.