Component
Calendar view
A month of departures, bookings or deadlines laid out on the days they fall.
Plain-text source, for agents and clipboard use: /components/source/calendar.txt
When to use it
Shows when things happen across a month, so a planner can see the busy weeks, the gaps and the departure that needs attention. It is a table: weekdays are column headers, each cell is a day, and each event is a link to its record. Days outside the month are muted, today is marked, and events that need action carry the warning tone, an icon and hidden text, never colour alone.
Not this
Not for choosing a date in a form; use the Date picker. Not for a sequence of days in one trip; use the Itinerary. Not when the dates matter less than the records; use a Table sorted by date, which also reads better on a phone.
Examples
Month
Departures in October. The glacier walk on the 7th has no guide, so it carries the attention tone.
October 2026
html
<div class="flux-calendar">
<div class="flux-calendar__header">
<h2 class="flux-calendar__title" id="calendar-title">October 2026</h2>
<button class="flux-button flux-button--ghost flux-button--sm" type="button">Today</button>
<button class="flux-calendar__nav" type="button" aria-label="Previous month"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 4l-4 4 4 4" /></svg></button>
<button class="flux-calendar__nav" type="button" aria-label="Next month"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 4l4 4-4 4" /></svg></button>
</div>
<div class="flux-calendar__scroll" role="region" aria-labelledby="calendar-title" tabindex="0">
<table class="flux-calendar__grid">
<caption class="flux-visually-hidden">Departures, October 2026</caption>
<thead>
<tr><th scope="col"><abbr title="Monday">Mon</abbr></th><th scope="col"><abbr title="Tuesday">Tue</abbr></th><th scope="col"><abbr title="Wednesday">Wed</abbr></th><th scope="col"><abbr title="Thursday">Thu</abbr></th><th scope="col"><abbr title="Friday">Fri</abbr></th><th scope="col"><abbr title="Saturday">Sat</abbr></th><th scope="col"><abbr title="Sunday">Sun</abbr></th></tr>
</thead>
<tbody>
<tr><td data-outside><time class="flux-calendar__date" datetime="2026-09-28">28</time></td><td data-outside><time class="flux-calendar__date" datetime="2026-09-29">29</time></td><td data-outside><time class="flux-calendar__date" datetime="2026-09-30">30</time></td><td><time class="flux-calendar__date" datetime="2026-10-01">1</time></td><td><time class="flux-calendar__date" datetime="2026-10-02">2</time><ul class="flux-calendar__events"><li><a class="flux-calendar__event" href="#" title="Golden Circle"><span class="flux-calendar__event-label">Golden Circle</span></a></li></ul></td><td><time class="flux-calendar__date" datetime="2026-10-03">3</time></td><td><time class="flux-calendar__date" datetime="2026-10-04">4</time></td></tr>
<tr><td><time class="flux-calendar__date" datetime="2026-10-05">5</time><ul class="flux-calendar__events"><li><a class="flux-calendar__event" href="#" title="South Coast"><span class="flux-calendar__event-label">South Coast</span></a></li></ul></td><td><time class="flux-calendar__date" datetime="2026-10-06">6</time></td><td aria-current="date"><time class="flux-calendar__date" datetime="2026-10-07">7</time><ul class="flux-calendar__events"><li><a class="flux-calendar__event" href="#" title="Northern Lights"><span class="flux-calendar__event-label">Northern Lights</span></a></li><li><a class="flux-calendar__event flux-calendar__event--attention" href="#" title="Glacier walk, needs a guide"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 4v4.5M8 11.5v.01" /></svg><span class="flux-calendar__event-label">Glacier walk</span><span class="flux-visually-hidden">, needs a guide</span></a></li><li><a class="flux-calendar__more" href="#" aria-label="2 more departures on 7 October">+2 more</a></li></ul></td><td><time class="flux-calendar__date" datetime="2026-10-08">8</time></td><td><time class="flux-calendar__date" datetime="2026-10-09">9</time><ul class="flux-calendar__events"><li><a class="flux-calendar__event" href="#" title="Ring Road, 8 days"><span class="flux-calendar__event-label">Ring Road, 8 days</span></a></li></ul></td><td><time class="flux-calendar__date" datetime="2026-10-10">10</time></td><td><time class="flux-calendar__date" datetime="2026-10-11">11</time></td></tr>
<tr><td><time class="flux-calendar__date" datetime="2026-10-12">12</time></td><td><time class="flux-calendar__date" datetime="2026-10-13">13</time></td><td><time class="flux-calendar__date" datetime="2026-10-14">14</time><ul class="flux-calendar__events"><li><a class="flux-calendar__event" href="#" title="Golden Circle"><span class="flux-calendar__event-label">Golden Circle</span></a></li><li><a class="flux-calendar__event flux-calendar__event--attention" href="#" title="Whale watching, below minimum numbers"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 4v4.5M8 11.5v.01" /></svg><span class="flux-calendar__event-label">Whale watching</span><span class="flux-visually-hidden">, below minimum numbers</span></a></li></ul></td><td><time class="flux-calendar__date" datetime="2026-10-15">15</time></td><td><time class="flux-calendar__date" datetime="2026-10-16">16</time><ul class="flux-calendar__events"><li><a class="flux-calendar__event" href="#" title="South Coast"><span class="flux-calendar__event-label">South Coast</span></a></li></ul></td><td><time class="flux-calendar__date" datetime="2026-10-17">17</time></td><td><time class="flux-calendar__date" datetime="2026-10-18">18</time></td></tr>
<tr><td><time class="flux-calendar__date" datetime="2026-10-19">19</time></td><td><time class="flux-calendar__date" datetime="2026-10-20">20</time></td><td><time class="flux-calendar__date" datetime="2026-10-21">21</time><ul class="flux-calendar__events"><li><a class="flux-calendar__event" href="#" title="Golden Circle"><span class="flux-calendar__event-label">Golden Circle</span></a></li></ul></td><td><time class="flux-calendar__date" datetime="2026-10-22">22</time></td><td><time class="flux-calendar__date" datetime="2026-10-23">23</time><ul class="flux-calendar__events"><li><a class="flux-calendar__event" href="#" title="Northern Lights"><span class="flux-calendar__event-label">Northern Lights</span></a></li></ul></td><td><time class="flux-calendar__date" datetime="2026-10-24">24</time></td><td><time class="flux-calendar__date" datetime="2026-10-25">25</time></td></tr>
<tr><td><time class="flux-calendar__date" datetime="2026-10-26">26</time></td><td><time class="flux-calendar__date" datetime="2026-10-27">27</time></td><td><time class="flux-calendar__date" datetime="2026-10-28">28</time><ul class="flux-calendar__events"><li><a class="flux-calendar__event" href="#" title="Golden Circle"><span class="flux-calendar__event-label">Golden Circle</span></a></li></ul></td><td><time class="flux-calendar__date" datetime="2026-10-29">29</time></td><td><time class="flux-calendar__date" datetime="2026-10-30">30</time><ul class="flux-calendar__events"><li><a class="flux-calendar__event flux-calendar__event--attention" href="#" title="Snæfellsnes, needs a guide"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 4v4.5M8 11.5v.01" /></svg><span class="flux-calendar__event-label">Snæfellsnes</span><span class="flux-visually-hidden">, needs a guide</span></a></li></ul></td><td><time class="flux-calendar__date" datetime="2026-10-31">31</time></td><td data-outside><time class="flux-calendar__date" datetime="2026-11-01">1</time></td></tr>
</tbody>
</table>
</div>
</div>Anatomy
| Part | Description |
|---|---|
| Header | The month as a heading, then Today and the previous and next month buttons. |
| Grid | A table with one column per weekday, scope="col" headers and a visually hidden caption. It scrolls sideways below 48rem. |
| Day | A cell with its date in mono. Outside days sit on layer-02; today has aria-current="date" and a brand date chip. |
| Event | A link on layer-02 that truncates to one line, with the full text in its title. flux-calendar__event--attention adds the warning tone and an icon. |
| More link | Past three events a day shows two and a link to the rest, named with the count and the date. |
API
| Name | Kind | Description |
|---|---|---|
flux-calendar | class | The wrapper for the header and the grid. |
flux-calendar__header | __title | __nav | class | The month heading, a ghost small Button for Today, and the icon-only previous and next buttons. |
flux-calendar__scroll | class | The horizontal scroll container. Give it role="region", a name and tabindex="0". |
flux-calendar__grid | class | On the table. |
data-outside | attribute | On a td for a day in the previous or next month. |
aria-current="date" | attribute | On today’s td. |
flux-calendar__date | class | The day number, ideally a time element with datetime. |
flux-calendar__events | __event | __event-label | class | The list of events in a day, each event link and its truncating label. |
flux-calendar__event--attention | class | An event that needs action. Add the alert icon and visually hidden text saying why. |
flux-calendar__more | class | The link to the rest of a day’s events. |
States
| State | Treatment |
|---|---|
| Today | Brand date chip and aria-current="date". |
| Outside the month | layer-02 ground and a subtle date. |
| Event hover | The chip steps to layer-hover-02. |
| Needs attention | Warning-subtle ground, the alert icon and hidden text. |
| Narrow | The grid keeps 48rem and the scroll container scrolls sideways. |
Keyboard
| Keys | Action |
|---|---|
Tab | Moves through the month buttons, the scroll region and each event link in reading order. |
Arrow keys | Scroll the grid when the scroll region has focus. |
Accessibility
- It is a table, so screen readers announce the weekday with each cell. Keep the caption naming what the calendar holds.
- Give each event link its full text: truncation is visual only, and the title attribute shows the rest on hover.
- The attention state carries an icon and hidden text, so it is not signalled by colour alone.
- Name the more link with the count and the date; “+2 more” alone does not say of what.
Tokens
The tier-3 and tier-2 tokens this component binds to. Change the token, not the component.
- --flux-calendar-bg | -border | -outside-bg | -min-width
- --flux-calendar-day-min-height | -day-padding | -date
- --flux-calendar-today-bg | -today-text
- --flux-calendar-event-bg | -event-hover | -event-attention
Do and don’t
Do
- Start weeks on the day the market expects; Monday in Europe.
- Link every event to its record.
Don’t
- Do not colour events by product or by agent; the chart palette is for charts. Use the attention variant for the one thing that needs action.
- Do not shrink the grid to fit a phone. Let it scroll, or offer a list view.