# Flux 2.0 — Calendar view A month of departures, bookings or deadlines laid out on the days they fall. Reference: https://flux.kaptio.com/components/calendar/ Requires: https://flux.kaptio.com/tokens/v2/flux.css and flux-components.css ## Use it when 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. ## Do not use it when 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. ## Markup ### Month

October 2026

Departures, October 2026
MonTueWedThuFriSatSun
## API - 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. ## 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. ## Keyboard - 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. ## Tokens - --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 - Start weeks on the day the market expects; Monday in Europe. - Link every event to its record. ## Do not - 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.