Description
Timeline is a month‑based view that organises events by team member, with team hierarchy arranged vertically. It is designed for understanding how events are distributed across people within a single month, rather than for navigating across different time ranges.
Timeline is an overview‑only view, focused on patterns and distribution rather than day‑level state.
Note: Timeline is not integrated with Outlook.
Anatomy
Timeline uses an event‑driven interaction model. Events are interactive and focusable. Date cells provide structure and context but do not trigger actions.
Anatomy
Views
Timeline uses the same interaction model across all views, with layout and controls adapting to available space.
Views offer fixed time ranges, not free‑range time navigation.
- On large viewports, the legend is open by default
- On smaller viewports, the legend is collapsed
- Controls may become icon‑only as space decreases
- Month and adjacent month labels may be abbreviated or hidden when space is limited
- Work location is not shown or editable in Timeline.
- The selected timeline view persists between visits.
Month view (>768px)
Month view (768px and smaller)
4 week view (>768px)
4 week view (768px and smaller)
2 week view (>768px)
2 week view (768px and smaller)
1 week view (>768px)
1 week view (768px and smaller)
Navigation and controls
Period navigation
Period navigation
Actions
Change timeline view
Create new event
View event details
Legend
Both calendar and timeline use the event legend pattern to aid understanding of event status, duration, and types.
- It's open by default on large viewports.
- It's configurable, and the event names and colors shown in the selector must match those shown in the event-type picker and event blocks.
Event blocks
Timeline prioritises pattern recognition over individual event detail.
- Event names and icons are shown when the selected time range and available space allow for clear identification (for example, in one‑week or two‑week views).
- As the visible range increases, Timeline prioritises position, length, colour, and pattern to support scanning across people.
- Detail is reduced progressively to preserve readability at higher densities.
Dos and don'ts
Do
- Use vertical scroll to move through people.
- Use one horizontal scroll container to pan time across all people at once.
- Keep the time axis consistent across rows.
- Provide clear cues that horizontal scrolling is available (cut‑off days, snap points, controls).
- Offer non‑gesture alternatives to change time-range (for example, week / month controls).
- Do use the event sidebar layout to manage a single event in context.
Don’t
- Don’t allow independent horizontal scrolling per row.
- Don’t combine multiple competing horizontal scroll areas.
- Don’t require horizontal scrolling to read essential profile information.
- Don't show more than 2 events for each slot. When there are more than 2 events, use the +2 calendar icon.