| UI or UX | UI + UX - Date and time grid for scheduled events, availability, and conflicts | UI + UX - Single-date text field with attached calendar menu | UI + UX - Bounded chronological record of past, current, or expected events | UI + UX - Vertical object-summary browsing surface |
| UI guidance | Render a calendar view around a visible date range, mode switcher, today marker, weekday or time-axis labels, timezone, selected date, and event blocks with start, end, title, status, and all-day or timed placement. | Render a labelled date text field with a persistent format hint and a calendar button that opens a month grid aligned to the field. | Render the timeline as a labelled chronological sequence where each event has a visible date or time, event title, actor or system source when known, status or type, and a short summary. | Render a labelled vertical list where each row has a strong primary label, concise supporting text, metadata, status, optional leading media, and row-scoped actions with clear hit targets. |
| UX guidance | Use calendar view when users need to understand or manage scheduled items by their position in time: date, weekday, duration, overlap, availability, recurrence, or resource assignment. | Use a date picker when choosing a date requires calendar context such as weekday, nearby availability, booking windows, deadlines, or recent/future scheduling. | Use timeline when users need to understand what happened, where they are now, and what may happen next in a case, claim, application, order, incident, or process. | Use list view when scanning and opening object summaries is faster than comparing columns or inspecting large visual cards. |
| Good UI | A clinic schedule shows June 2026 week view, today marker, timezone, business hours, all-day staff training, timed appointments, room labels, overlap warning, and a More link for crowded days. | An appointment booking field shows Appointment date, hint mm/dd/yyyy, a calendar button, July 2026 grid, disabled weekends, today marker, and selected July 14 date. | A benefits application timeline groups events by date and shows Application submitted, Evidence requested, Evidence received, Decision pending, and Next review, with actor, timestamp, and status marker. | A ticket list row shows TCK-2048 Database backup failed, a one-line incident summary, Critical status, owner, updated time, selected state, and a labelled More actions menu. |
| Bad UI | A decorative month grid contains colored dots with no event titles, no timezone, no overflow count, and no selected-day detail. | A date of birth field opens today with no text fallback and forces users to page backward month by month through decades. | A vertical line lists Approved, More, Update, and Done with no dates, actors, status, or explanation. | A list row shows columns of owner, amount, due date, and status but no headers or column sort state. |
| Good UX | A dispatcher switches from month to week, opens Wednesday, sees three overlapping room bookings, chooses an available slot, and receives conflict-aware feedback before saving. | A user opens the calendar, sees weekends unavailable, moves to August, chooses Tuesday 11 August 2026, and reviews stored value 2026-08-11. | A caseworker filters the timeline to System events, sees two date groups hidden, restores all events, and the event order and current marker stay stable. | A user filters tickets to Critical, selects two rows, opens the details panel for one ticket, then clears the filter and the selected count and active ticket remain understandable. |
| Bad UX | A user taps +3 more in a crowded date cell but the calendar navigates away instead of showing the hidden events for that day. | A user selects a disabled Saturday because it was only dimmed, then loses their previous month when the error appears. | A user sees a future appointment marker styled like completed history and assumes the appointment already happened. | A user selects rows, changes sort order, and the bulk action count still includes hidden rows without saying which rows are affected. |
| Best fit | Users need to scan or manage scheduled events across dates, days, weeks, months, or resources. | Users are scheduling, booking, planning, or selecting a recent or future date. | Users need a chronological record of important events for one object, case, order, application, or process. | Users need to scan and act on a collection of objects using compact summaries. |
| Avoid when | Users only need to select one date for a form field. | Users already know the exact date and do not need calendar context. | The surface is a live stream whose content keeps arriving and must preserve reader position. | Users need to compare many records across shared attributes. |
| Required state | Default calendar state with visible range, view mode, timezone, today marker, selected date, and event count. | Closed labelled text field with visible date-format hint and calendar button. | Default timeline with heading, order label, date or phase groups, and event markers. | Default list state with label or heading, row count or context, visible row summaries, and primary row identity. |
| Accessibility burden | Expose date navigation, mode switch, visible range, selected date, today, timezone, and event count as text. | Use a visible label and persistent hint for the text field; do not rely only on text inside the field. | Use semantic list or ordered-list structure with date-group headings and text event labels. | Use semantic list markup for ordinary object lists; use listbox only when rows are options in a single control. |
| Common misuse | Using calendar view as a decorative month card for unscheduled content. | Using a calendar picker for a date of birth or other remembered historic date. | Using timeline as decorative chrome around a normal list with no meaningful time sequence. | Using list view as a table without column headers or column-state feedback. |