Conflict Notice - Everyday Interface Patterns

A static calendar conflict notice shows Design review, Standup conflict, 15 minutes overlap, and Review conflict status.

Program

Conflict notices should make overlap visible without running a calendar or scheduling engine.

calendar_conflict_notice.html

Visuals: captured from real browser rendering

<section class="calendar-conflict" aria-labelledby="calendar-conflict-title"><h2 id="calendar-conflict-title">Calendar conflict notice</h2><dl>
  <div><dt>Event</dt><dd>Design review</dd></div>
  <div><dt>Conflict</dt><dd>Standup</dd></div><div><dt>Overlap</dt><dd>15 minutes</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Review conflict</span></dd></div></dl>
  <p class="check">Learner check: the conflict is visible without running a calendar engine.</p>
  <p class="note">Static calendar conflict notice only; no calendar service, RSVP service, invite sending, mailbox access, scheduling engine, notification service, storage, cookie, route, API, network, script, event listener, form submit, input, radio control, checkbox, analytics, timer, object URL, download, service worker, account/session behavior, or live submission runs.</p></section>
<style>
  .calendar-conflict { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #b45309; padding: 12px; background: #fffbeb; }
  .calendar-conflict dl { display: grid; gap: 8px; margin: 0; }
  .calendar-conflict dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .calendar-conflict dt { color: #475569; }
  .calendar-conflict dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #fde68a; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the calendar conflict notice.
The section is labelled by its visible heading.
Show event row.
The event is exact pinned data.
Show conflict and overlap rows.
The conflict and overlap are exact pinned data.
Render review-conflict status.
The status badge says to review the conflict.
Check conflict readback.
The check says the conflict is visible without running a calendar engine.
Check conflict honesty.
Event, conflict, overlap, status, and no live submission.

step flow step(1) labels the source, step(2) shows the event, step(3) shows conflict and overlap rows, step(4) shows review-conflict status, step(5) checks the conflict readback, and step(6) checks the honesty note.

conflict readback The section heading names the calendar conflict notice surface.

conflict rows Event, Conflict, Overlap, and Status values are exact pinned data.

no calendar engine The lesson should not imply calendar services, RSVP services, invite sending, mailbox access, scheduling engines, notification services, storage, cookies, routes, APIs, networks, scripts, event listeners, form submits, inputs, radio controls, checkboxes, analytics, timers, object URLs, downloads, service workers, account/session behavior, or live submissions.