Components / Data display / Calendar list
D10 · Data display
Calendar list
Events split into Upcoming, This week, and Overdue.
<div class="c-tabs" role="tablist">
<button type="button" role="tab" data-bucket="upcoming" aria-selected="true">Upcoming</button>
<button type="button" role="tab" data-bucket="overdue" aria-selected="false">Overdue</button>
</div>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- Events are a list with a date, not a month grid.
- People switch among upcoming, this week, and overdue.
When not to use
- The view is a month of day cells.
- Events have no date.
Usage
<div class="c-tabs" role="tablist">
<button type="button" role="tab" data-bucket="upcoming" aria-selected="true">Upcoming</button>
<button type="button" role="tab" data-bucket="overdue" aria-selected="false">Overdue</button>
</div>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| data-bucket | upcoming, week, overdue | upcoming | Which tab is open. |
| data-event | bucket names | — | An event can sit in more than one tab. |
Keyboard
| Key | Action |
|---|---|
| Enter or Space | Selects a tab. |
| Tab | Moves from the tabs into the list. |
Accessibility
- Tabs expose aria-selected.
- Each event has a date and a time element.
- Overdue is a named tab, not only a colour.
Motion
- The list swaps without animation.
Pattern origin
Pattern type: an event list split by tabs.