Use calendar view when scheduled items must be understood by date, time, duration, recurrence, and visual overlap; use date picker, timeline, or list view when the task is narrower.
Use calendar view when scheduled items must be understood by date, time, duration, recurrence, and visual overlap; use date picker, timeline, or list view when the task is narrower.
Practice the judgment: Imagine this situation: A responsive layout crushes event titles into unreadable cells instead of switching to an agenda list. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Calendar view | Date picker | Timeline | List view |
|---|---|---|---|---|
| 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 | Calendar navigation resets filters, selected calendars, selected date, or opened event unexpectedly. | A grid of unlabeled numbers uses pale grey for unavailable dates but still lets users click them before showing a late error. | A dense audit table is squeezed into timeline cards and hides changed fields, exact actor identity, and retention proof. | Every row has five unlabeled icon buttons, and the whole row also navigates. |
| 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 tries to preview a file but the row click opens navigation while the small trailing icon deletes the file. |
| 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. | The date is far in the past, such as a birthday or historic document date. | 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. | Give the calendar button an accessible name and state that distinguishes opening from closing the menu. | 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. | Omitting dates, actors, or event summaries and expecting icons to communicate the sequence. | Putting too many independent controls in every row until the list becomes a keyboard trap. |