Calendar
A calendar component to be used to display and pick dates.
Calendar
The calendar component relies on table elements, using specific aria roles and attributes so it is presented to the user as a grid.
Used in combination with the Input and components you can create complex data picking functionalities.
The calendar will expand to occupy the entire available width, in the examples bellow we se the minimum width for the calendar in the wrapping div, but this is not a rule and should be evaluated how much space is necessary for each use case. In many cases, setting a width is not even required as the component might just fit with your layout.
Modifiers
There are many class modifiers for different elements of the calendar:
Calendar modifiers
flix-calendar--flat- Flat style removes box shadows and rounded borders.
flix-calendar--horizontal- Shows months horizontally.
Day cells modifiers
flix-calendar__cell--selected- Marks the currently selected day in the calendar when it's not a range selection.
flix-calendar__cell--current- Should be used to highlight the current date (today).
flix-calendar__cell--hover- Applies the mouse over state styles to a cell, used to preview the days that will be selected with a given preset control.
flix-calendar__cell--startflix-calendar__cell--end- Respectively mark the start and end of a range selection;
flix-calendar__cell--range- Should be used for all days between the started and the end of a range selection to highlight the date range selected.
Day buttons modifiers
flix-calendar__btn--disabled- Can be used to mark the days that aren't available for selection;
Certain modifiers can be combined, e.g. any day can have a --current modifier, as well as --disabled no matter if it's selected or not, or it's a part of a selected date range.
Accessibility
- The role at play is
role="grid"added to the table element to ensure it is presented as a grid (not tabular data) to the end user. - The second important aspect is writing out the full name of the abbreviated week days in the column headers. Add the full week day name as
aria-labelon eachthelement inside of thethead. This replaces the somewhat meaningless 2 letters with the actual name of the day for screen readers. - The disabled buttons must also have
aria-disabled="true"on the grid cell elements. Then the buttons can be disabled or replaced with a span. - The selected day should have not only the class modifier for appearance but also
aria-selected="true"for screen readers. - The current day, if present, should have
aria-current="date"in the cell attributes for screen readers.
Examples
The default calendar displays one month at a time, with single day selection.
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | |||
<div style="max-width: 35em">
<div class="flix-calendar">
<div class="flix-calendar__months">
<div class="flix-calendar__month">
<table role="grid" id="default" aria-live="polite" class="flix-calendar__table">
<caption class="flix-calendar__caption">September 2019</caption>
<thead>
<tr>
<th class="flix-calendar__cell" aria-label="Monday">Mo</th>
<th class="flix-calendar__cell" aria-label="Tuesday">Tu</th>
<th class="flix-calendar__cell" aria-label="Wednesday">We</th>
<th class="flix-calendar__cell" aria-label="Thursday">Th</th>
<th class="flix-calendar__cell" aria-label="Friday">Fr</th>
<th class="flix-calendar__cell" aria-label="Saturday">Sa</th>
<th class="flix-calendar__cell" aria-label="Sunday">Su</th>
</tr>
</thead>
<tbody>
<tr>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">1</span>
</td>
</tr>
<tr>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">2</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">3</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">4</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">5</span>
</td>
<td class="flix-calendar__cell flix-calendar__cell--current" aria-current="date">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 6">6</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 7">7</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 8">8</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 9">9</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, September 10">10</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, September 11">11</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, September 12">12</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 13">13</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 14">14</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 15">15</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 16">16</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, September 17">17</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, September 18">18</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, September 19">19</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 20">20</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 21">21</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 22">22</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 23">23</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, September 24">24</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, September 25">25</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, September 26">26</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 27">27</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 28">28</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 29">29</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 30">30</button>
</td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>You can also hide the box shadows and rounded borders by adding the --flat modifier to the main calendar element.
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | |||
<div style="max-width: 35em">
<div class="flix-calendar flix-calendar--flat">
<div class="flix-calendar__months">
<div class="flix-calendar__month">
<table role="grid" id="default" aria-live="polite" class="flix-calendar__table">
<caption class="flix-calendar__caption">September 2019</caption>
<thead>
<tr>
<th class="flix-calendar__cell" aria-label="Monday">Mo</th>
<th class="flix-calendar__cell" aria-label="Tuesday">Tu</th>
<th class="flix-calendar__cell" aria-label="Wednesday">We</th>
<th class="flix-calendar__cell" aria-label="Thursday">Th</th>
<th class="flix-calendar__cell" aria-label="Friday">Fr</th>
<th class="flix-calendar__cell" aria-label="Saturday">Sa</th>
<th class="flix-calendar__cell" aria-label="Sunday">Su</th>
</tr>
</thead>
<tbody>
<tr>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">1</span>
</td>
</tr>
<tr>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">2</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">3</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">4</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">5</span>
</td>
<td class="flix-calendar__cell flix-calendar__cell--current" aria-current="date">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 6">6</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 7">7</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 8">8</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 9">9</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, September 10">10</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, September 11">11</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, September 12">12</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 13">13</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 14">14</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 15">15</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 16">16</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, September 17">17</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, September 18">18</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, September 19">19</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 20">20</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 21">21</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 22">22</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 23">23</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, September 24">24</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, September 25">25</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, September 26">26</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 27">27</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 28">28</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 29">29</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 30">30</button>
</td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>Header appearances
The calendar-header wrapper should be added before the table element, as it contains the controls for the calendar.
The controls (buttons or select elements) will change the days rendered in the calendar when they change, so for that to be accessible there are some things we need to take care of:
- Add an
idto the grids (table element with role="grid") so you can associate it with its controls. - Add
aria-controls="{calendar-id}"to each element that is responsible for changing the calendar content. - Add
aria-live="polite"to the grid, as it will enable screen readers to announce changes in the content of this element when they happen.
The simple header replaces the table caption and adds navigation buttons to change the displayed month. It can be used in most cases.
September 2019
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | |||
<div style="max-width: 35em">
<div class="flix-calendar">
<div class="flix-calendar__months">
<div class="flix-calendar__month">
<div class="flix-calendar-header flix-calendar-header--simple">
<button type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--disabled "
disabled aria-label="Previous month" aria-controls="simple-header">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-left"></flix-icon>
</button>
<h3 id="simple-header-title" class="flix-calendar-header__title">September 2019</h3>
<button type="button" class="flix-btn flix-btn--link flix-btn--square" aria-label="Next month"
aria-controls="simple-header">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-right"></flix-icon>
</button>
</div>
<table role="grid" id="simple-header" aria-live="polite" class="flix-calendar__table" aria-labelledby="simple-header-title">
<thead>
<tr>
<th class="flix-calendar__cell" aria-label="Monday">Mo</th>
<th class="flix-calendar__cell" aria-label="Tuesday">Tu</th>
<th class="flix-calendar__cell" aria-label="Wednesday">We</th>
<th class="flix-calendar__cell" aria-label="Thursday">Th</th>
<th class="flix-calendar__cell" aria-label="Friday">Fr</th>
<th class="flix-calendar__cell" aria-label="Saturday">Sa</th>
<th class="flix-calendar__cell" aria-label="Sunday">Su</th>
</tr>
</thead>
<tbody>
<tr>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">1</span>
</td>
</tr>
<tr>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">2</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">3</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">4</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">5</span>
</td>
<td class="flix-calendar__cell flix-calendar__cell--current" aria-current="date">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 6">6</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 7">7</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 8">8</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 9">9</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, September 10">10</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, September 11">11</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, September 12">12</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 13">13</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 14">14</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 15">15</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 16">16</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, September 17">17</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, September 18">18</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, September 19">19</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 20">20</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 21">21</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 22">22</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 23">23</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, September 24">24</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, September 25">25</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, September 26">26</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 27">27</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 28">28</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 29">29</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 30">30</button>
</td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>The compact header shows a select box for month selection, along with navigation buttons and the calendar displays one month at a time.
- Use the
buttoncomponent with the following modifiers:appearance="link"display="square"
- Use the
selectcomponent with no visible label (addaria-labelinstead) and add theflix-calendar-header__selectclass name to it.
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | |||
<div style="max-width: 35em">
<div class="flix-calendar">
<div class="flix-calendar__months">
<div class="flix-calendar__month">
<div class="flix-calendar-header flix-calendar-header--compact">
<button type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--disabled" disabled aria-label="Previous month" aria-controls="compact-header">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-left"></flix-icon>
</button>
<div class="flix-select flix-select--no-label flix-calendar-header__select">
<div class="flix-select__container">
<select id="compact-picker" class="flix-select__field" aria-errormessage="compact-picker-info-error" aria-label="Select month and year" aria-controls="compact-header">
<option value="0">February 2019</option>
<option value="1">March 2019</option>
<option value="2">April 2019</option>
<option value="3">May 2019</option>
<option value="4">June 2019</option>
<option value="5">July 2019</option>
<option value="6">August 2019</option>
<option value="7" selected>September 2019</option>
<option value="8">October 2019</option>
<option value="9">November 2019</option>
</select>
</div>
</div>
<button type="button" class="flix-btn flix-btn--link flix-btn--square" aria-label="Next month" aria-controls="compact-header">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-right"></flix-icon>
</button>
</div>
<table role="grid" id="compact-header" aria-live="polite" class="flix-calendar__table" aria-label="September 2019">
<thead>
<tr>
<th class="flix-calendar__cell" aria-label="Monday">Mo</th>
<th class="flix-calendar__cell" aria-label="Tuesday">Tu</th>
<th class="flix-calendar__cell" aria-label="Wednesday">We</th>
<th class="flix-calendar__cell" aria-label="Thursday">Th</th>
<th class="flix-calendar__cell" aria-label="Friday">Fr</th>
<th class="flix-calendar__cell" aria-label="Saturday">Sa</th>
<th class="flix-calendar__cell" aria-label="Sunday">Su</th>
</tr>
</thead>
<tbody>
<tr>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">1</span>
</td>
</tr>
<tr>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">2</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">3</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">4</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">5</span>
</td>
<td class="flix-calendar__cell flix-calendar__cell--current" aria-current="date">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 6">6</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 7">7</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 8">8</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 9">9</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, September 10">10</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, September 11">11</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, September 12">12</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 13">13</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 14">14</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 15">15</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 16">16</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, September 17">17</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, September 18">18</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, September 19">19</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 20">20</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 21">21</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 22">22</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 23">23</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, September 24">24</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, September 25">25</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, September 26">26</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 27">27</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 28">28</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 29">29</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 30">30</button>
</td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>The birthday header is designed for birthday selection, it shows two select boxes for month and year selection and displays one month at a time.
- When days are selected they update the value input field.
- Since the input field value can be changed by external controls, it should have
aria-live="polite"to allow screen readers to announce when the value changes. - You can group the input field and the calendar using the
fieldsetcomponent. - The margin between the input field and the calendar should be spacing-half, to achieve that, add
--space-halfmodifier on the fieldset item that contains the calendar. - Make sure to match the calendar width with the input field size, in case the input field is smaller than 276px, centralize the calendar relative to the input.
<fieldset class="flix-fieldset" style="max-width: fit-content;">
<div class="flix-fieldset__items">
<div class="flix-fieldset__item">
<div class="flix-input ">
<label class="flix-label flix-input__label" for="input-example">
Birthday
</label>
<div class="flix-input__container">
<input class="flix-input__field" id="input-example" type="text" value="1.1.2000" aria-errormessage="input-example-info-error" aria-live="polite" />
<span class="flix-input__feedback-icon" aria-hidden="true"></span>
</div>
<span class="flix-input__info" id="input-example-info-error" role="alert" aria-live="assertive"></span>
</div>
</div>
<div class="flix-fieldset__item flix-space-half-top">
<div class="flix-calendar">
<div class="flix-calendar__months">
<div class="flix-calendar__month">
<div class="flix-calendar-header flix-calendar-header--birthday">
<div class="flix-select flix-select--no-label flix-calendar-header__select">
<div class="flix-select__container">
<select id="birthday-month" class="flix-select__field" aria-errormessage="birthday-month-info-error" aria-label="Select month" aria-controls="birthday-header">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8" selected>September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
</div>
</div>
<div class="flix-select flix-select--no-label flix-calendar-header__select">
<div class="flix-select__container">
<select id="birthday-year" class="flix-select__field" aria-errormessage="birthday-year-info-error" aria-label="Select year" aria-controls="birthday-header">
<option value="0">1999</option>
<option value="1">2000</option>
<option value="2">2001</option>
<option value="3">2002</option>
<option value="4">2003</option>
<option value="5">2004</option>
<option value="6">2005</option>
<option value="7">2006</option>
<option value="8">2007</option>
<option value="9">2008</option>
<option value="10">2009</option>
<option value="11">2010</option>
<option value="12">2011</option>
<option value="13">2012</option>
<option value="14">2013</option>
<option value="15">2014</option>
<option value="16">2015</option>
<option value="17">2016</option>
<option value="18">2017</option>
<option value="19">2018</option>
<option value="20" selected>2019</option>
</select>
</div>
</div>
</div>
<table role="grid" id="birthday-header" aria-live="polite" class="flix-calendar__table" aria-label="September 2019">
<thead>
<tr>
<th class="flix-calendar__cell" aria-label="Monday">Mo</th>
<th class="flix-calendar__cell" aria-label="Tuesday">Tu</th>
<th class="flix-calendar__cell" aria-label="Wednesday">We</th>
<th class="flix-calendar__cell" aria-label="Thursday">Th</th>
<th class="flix-calendar__cell" aria-label="Friday">Fr</th>
<th class="flix-calendar__cell" aria-label="Saturday">Sa</th>
<th class="flix-calendar__cell" aria-label="Sunday">Su</th>
</tr>
</thead>
<tbody>
<tr>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">1</span>
</td>
</tr>
<tr>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">2</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">3</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">4</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">5</span>
</td>
<td class="flix-calendar__cell flix-calendar__cell--current" aria-current="date">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 6">6</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 7">7</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 8">8</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 9">9</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, September 10">10</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, September 11">11</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, September 12">12</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 13">13</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 14">14</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 15">15</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 16">16</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, September 17">17</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, September 18">18</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, September 19">19</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 20">20</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 21">21</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 22">22</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 23">23</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, September 24">24</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, September 25">25</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, September 26">26</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 27">27</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 28">28</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 29">29</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 30">30</button>
</td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</fieldset>Horizontal layout
Some examples bellow will use the horizontal layout. This layout uses horizontal space to show months side by side and can be further customized to creating a monthly navigation with some of the other variations such as the simple header and the month navigation arrows.
Keep in mind that on smaller screens that do not fit the horizontal navigation you should show the months in the vertical layout (on top of each other).
The next examples will be shown in both vertical and horizontal layout.
Range selection
For range selection it is important to note the following:
- Add the
aria-multiselectable="true"attribute to the grid (table element). - The cell containing the selected departure day should also have the
--startmodifier (in addition to the other class names and attributes) to add the decorative arrows. - When the return day is selected, add the
--endmodifier to the cell. - All cells in between should have
--rangemodifier to add the highlight.
You can show multiple months inside of the same calendar component, simply copy the calendar__month element and update the content to fit your calendar.
For wider screens you can show them side by side by using the --horizontal class modifier. Make sure to set enough width on the calendar container so both months fit side by side.
September 2019
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | |||
October 2019
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
| 26 | 27 | |||||
| 28 | 29 | 30 |
<div style="max-width: 55em">
<div class="flix-calendar flix-calendar--horizontal">
<div class="flix-calendar__months">
<div class="flix-calendar__month">
<div class="flix-calendar-header flix-calendar-header--simple">
<button type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--disabled" disabled aria-label="Previous month" aria-controls="range">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-left"></flix-icon>
</button>
<h3 id="range-title" class="flix-calendar-header__title">September 2019</h3>
</div>
<table role="grid" id="range" aria-live="polite" class="flix-calendar__table" aria-multiselectable="true" aria-labelledby="range-title">
<thead>
<tr>
<th class="flix-calendar__cell" aria-label="Monday">Mo</th>
<th class="flix-calendar__cell" aria-label="Tuesday">Tu</th>
<th class="flix-calendar__cell" aria-label="Wednesday">We</th>
<th class="flix-calendar__cell" aria-label="Thursday">Th</th>
<th class="flix-calendar__cell" aria-label="Friday">Fr</th>
<th class="flix-calendar__cell" aria-label="Saturday">Sa</th>
<th class="flix-calendar__cell" aria-label="Sunday">Su</th>
</tr>
</thead>
<tbody>
<tr>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">1</span>
</td>
</tr>
<tr>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">2</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">3</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">4</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">5</span>
</td>
<td class="flix-calendar__cell flix-calendar__cell--current" aria-current="date">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 6">6</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 7">7</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 8">8</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 9">9</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, September 10">10</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, September 11">11</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, September 12">12</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 13">13</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 14">14</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 15">15</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 16">16</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, September 17">17</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, September 18">18</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, September 19">19</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 20">20</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 21">21</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 22">22</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 23">23</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, September 24">24</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--start" aria-selected="true">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, September 25">25</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, September 26">26</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 27">27</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 28">28</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 29">29</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 30">30</button>
</td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
</tr>
</tbody>
</table>
</div>
<div class="flix-calendar__month">
<div class="flix-calendar-header flix-calendar-header--simple">
<h3 id="range-2-title" class="flix-calendar-header__title">October 2019</h3>
<button type="button" class="flix-btn flix-btn--link flix-btn--square" aria-label="Next month" aria-controls="range-2">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-right"></flix-icon>
</button>
</div>
<table role="grid" id="range-2" aria-live="polite" class="flix-calendar__table" aria-multiselectable="true" aria-labelledby="range-2-title">
<thead>
<tr>
<th class="flix-calendar__cell" aria-label="Monday">Mo</th>
<th class="flix-calendar__cell" aria-label="Tuesday">Tu</th>
<th class="flix-calendar__cell" aria-label="Wednesday">We</th>
<th class="flix-calendar__cell" aria-label="Thursday">Th</th>
<th class="flix-calendar__cell" aria-label="Friday">Fr</th>
<th class="flix-calendar__cell" aria-label="Saturday">Sa</th>
<th class="flix-calendar__cell" aria-label="Sunday">Su</th>
</tr>
</thead>
<tbody>
<tr>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, October 1">1</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, October 2">2</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, October 3">3</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Friday, October 4">4</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, October 5">5</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, October 6">6</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Monday, October 7">7</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, October 8">8</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, October 9">9</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--end" aria-selected="true">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, October 10">10</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, October 11">11</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, October 12">12</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, October 13">13</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, October 14">14</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, October 15">15</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, October 16">16</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, October 17">17</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, October 18">18</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, October 19">19</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, October 20">20</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, October 21">21</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, October 22">22</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, October 23">23</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, October 24">24</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, October 25">25</button>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">26</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">27</span>
</td>
</tr>
<tr>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">28</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">29</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">30</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>If there is not enough space you must switch to vertical layout.
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | |||
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
| 26 | 27 | |||||
| 28 | 29 | 30 |
<div style="max-width: 35em">
<div class="flix-calendar">
<div class="flix-calendar__months">
<div class="flix-calendar__month">
<table role="grid" id="range" aria-live="polite" class="flix-calendar__table" aria-multiselectable="true">
<caption class="flix-calendar__caption">September 2019</caption>
<thead>
<tr>
<th class="flix-calendar__cell" aria-label="Monday">Mo</th>
<th class="flix-calendar__cell" aria-label="Tuesday">Tu</th>
<th class="flix-calendar__cell" aria-label="Wednesday">We</th>
<th class="flix-calendar__cell" aria-label="Thursday">Th</th>
<th class="flix-calendar__cell" aria-label="Friday">Fr</th>
<th class="flix-calendar__cell" aria-label="Saturday">Sa</th>
<th class="flix-calendar__cell" aria-label="Sunday">Su</th>
</tr>
</thead>
<tbody>
<tr>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">1</span>
</td>
</tr>
<tr>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">2</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">3</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">4</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">5</span>
</td>
<td class="flix-calendar__cell flix-calendar__cell--current" aria-current="date">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 6">6</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 7">7</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 8">8</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 9">9</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, September 10">10</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, September 11">11</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, September 12">12</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 13">13</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 14">14</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 15">15</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 16">16</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, September 17">17</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, September 18">18</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, September 19">19</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 20">20</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 21">21</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 22">22</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 23">23</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, September 24">24</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--start" aria-selected="true">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, September 25">25</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, September 26">26</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 27">27</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 28">28</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 29">29</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 30">30</button>
</td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
</tr>
</tbody>
</table>
</div>
<div class="flix-calendar__month">
<table role="grid" id="range-2" aria-live="polite" class="flix-calendar__table" aria-multiselectable="true">
<caption class="flix-calendar__caption">October 2019</caption>
<thead>
<tr>
<th class="flix-calendar__cell" aria-label="Monday">Mo</th>
<th class="flix-calendar__cell" aria-label="Tuesday">Tu</th>
<th class="flix-calendar__cell" aria-label="Wednesday">We</th>
<th class="flix-calendar__cell" aria-label="Thursday">Th</th>
<th class="flix-calendar__cell" aria-label="Friday">Fr</th>
<th class="flix-calendar__cell" aria-label="Saturday">Sa</th>
<th class="flix-calendar__cell" aria-label="Sunday">Su</th>
</tr>
</thead>
<tbody>
<tr>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, October 1">1</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, October 2">2</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, October 3">3</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Friday, October 4">4</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, October 5">5</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, October 6">6</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Monday, October 7">7</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, October 8">8</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, October 9">9</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--end" aria-selected="true">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, October 10">10</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, October 11">11</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, October 12">12</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, October 13">13</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, October 14">14</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, October 15">15</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, October 16">16</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, October 17">17</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, October 18">18</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, October 19">19</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, October 20">20</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, October 21">21</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, October 22">22</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, October 23">23</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, October 24">24</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, October 25">25</button>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">26</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">27</span>
</td>
</tr>
<tr>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">28</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">29</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">30</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>Preset controls
The calendar supports controls that can be added on the __controls element next to the calendar months. Usually the controls are a collection of Tag elements that can be used to quickly select a specific date or date range.
You can also use the --hover modifier to highlight the days that will be selected when the user hovers the presets. This is useful for showing a preview of the selection before it is confirmed with a click.
Examples of other presets are: current month, next week, previous week, etcetera.
When using controls in the horizontal variation, the controls should then be added after the months.
September 2019
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | |||
October 2019
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
| 26 | 27 | |||||
| 28 | 29 | 30 |
<div style="max-width: 55em">
<div class="flix-calendar flix-calendar--horizontal">
<div class="flix-calendar__months">
<div class="flix-calendar__month">
<div class="flix-calendar-header flix-calendar-header--simple">
<button type="button" class="flix-btn flix-btn--link flix-btn--square flix-btn--disabled" disabled aria-label="Previous month" aria-controls="with-controls-horizontal">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-left"></flix-icon>
</button>
<h3 id="with-controls-horizontal-title" class="flix-calendar-header__title">September 2019</h3>
</div>
<table role="grid" id="with-controls-horizontal" aria-live="polite" class="flix-calendar__table" aria-multiselectable="true" aria-labelledby="with-controls-horizontal-title">
<thead>
<tr>
<th class="flix-calendar__cell" aria-label="Monday">Mo</th>
<th class="flix-calendar__cell" aria-label="Tuesday">Tu</th>
<th class="flix-calendar__cell" aria-label="Wednesday">We</th>
<th class="flix-calendar__cell" aria-label="Thursday">Th</th>
<th class="flix-calendar__cell" aria-label="Friday">Fr</th>
<th class="flix-calendar__cell" aria-label="Saturday">Sa</th>
<th class="flix-calendar__cell" aria-label="Sunday">Su</th>
</tr>
</thead>
<tbody>
<tr>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">1</span>
</td>
</tr>
<tr>
<td class="flix-calendar__cell flix-calendar__cell--hover" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">2</span>
</td>
<td class="flix-calendar__cell flix-calendar__cell--hover" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">3</span>
</td>
<td class="flix-calendar__cell flix-calendar__cell--hover" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">4</span>
</td>
<td class="flix-calendar__cell flix-calendar__cell--hover" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">5</span>
</td>
<td class="flix-calendar__cell flix-calendar__cell--current flix-calendar__cell--hover" aria-current="date">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 6">6</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--hover">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 7">7</button>
</td>
<td class="flix-calendar__cell flix-calendar__cell--hover">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 8">8</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 9">9</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, September 10">10</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, September 11">11</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, September 12">12</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 13">13</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 14">14</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 15">15</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 16">16</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, September 17">17</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, September 18">18</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, September 19">19</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 20">20</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 21">21</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 22">22</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 23">23</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, September 24">24</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, September 25">25</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, September 26">26</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 27">27</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 28">28</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 29">29</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 30">30</button>
</td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
</tr>
</tbody>
</table>
</div>
<div class="flix-calendar__month">
<div class="flix-calendar-header flix-calendar-header--simple">
<h3 id="with-controls-horizontal-2-title" class="flix-calendar-header__title">October 2019</h3>
<button type="button" class="flix-btn flix-btn--link flix-btn--square" aria-label="Next month" aria-controls="with-controls-horizontal-2">
<flix-icon aria-hidden="true" class="flix-btn__icon" name="arrow-right"></flix-icon>
</button>
</div>
<table role="grid" id="with-controls-horizontal-2" aria-live="polite" class="flix-calendar__table" aria-multiselectable="true" aria-labelledby="with-controls-horizontal-2-title">
<thead>
<tr>
<th class="flix-calendar__cell" aria-label="Monday">Mo</th>
<th class="flix-calendar__cell" aria-label="Tuesday">Tu</th>
<th class="flix-calendar__cell" aria-label="Wednesday">We</th>
<th class="flix-calendar__cell" aria-label="Thursday">Th</th>
<th class="flix-calendar__cell" aria-label="Friday">Fr</th>
<th class="flix-calendar__cell" aria-label="Saturday">Sa</th>
<th class="flix-calendar__cell" aria-label="Sunday">Su</th>
</tr>
</thead>
<tbody>
<tr>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, October 1">1</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, October 2">2</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, October 3">3</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, October 4">4</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, October 5">5</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, October 6">6</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, October 7">7</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, October 8">8</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, October 9">9</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, October 10">10</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, October 11">11</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, October 12">12</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, October 13">13</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, October 14">14</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, October 15">15</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, October 16">16</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, October 17">17</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, October 18">18</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, October 19">19</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, October 20">20</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, October 21">21</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, October 22">22</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, October 23">23</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, October 24">24</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, October 25">25</button>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">26</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">27</span>
</td>
</tr>
<tr>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">28</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">29</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">30</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="flix-calendar__controls">
<button type="button" class="flix-tag flix-tag--outlined">Previous week </button>
<button type="button" class="flix-tag flix-tag--outlined">Previous month </button>
<button type="button" class="flix-tag flix-tag--outlined">Today </button>
<button type="button" class="flix-tag flix-tag--subtle">
<flix-icon class="flix-tag__icon" aria-hidden="true" name="checkmark"></flix-icon> Current week
</button>
<button type="button" class="flix-tag flix-tag--outlined">Current month </button>
</div>
</div>
</div>On smaller screen sizes you should use the vertical layout and the controls should come before the months, so they appear on top of them.
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | |||
<div style="max-width: 35em">
<div class="flix-calendar">
<div class="flix-calendar__controls">
<button type="button" class="flix-tag flix-tag--outlined">Previous week</button>
<button type="button" class="flix-tag flix-tag--outlined">Previous month</button>
<button type="button" class="flix-tag flix-tag--outlined">Today</button>
<button type="button" class="flix-tag flix-tag--subtle">
<flix-icon class="flix-tag__icon" aria-hidden="true" name="checkmark"></flix-icon> Current week
</button>
<button type="button" class="flix-tag flix-tag--outlined">Current month</button>
</div>
<div class="flix-calendar__months">
<div class="flix-calendar__month">
<table role="grid" id="with-controls" aria-live="polite" class="flix-calendar__table">
<caption class="flix-calendar__caption">September 2019</caption>
<thead>
<tr>
<th class="flix-calendar__cell" aria-label="Monday">Mo</th>
<th class="flix-calendar__cell" aria-label="Tuesday">Tu</th>
<th class="flix-calendar__cell" aria-label="Wednesday">We</th>
<th class="flix-calendar__cell" aria-label="Thursday">Th</th>
<th class="flix-calendar__cell" aria-label="Friday">Fr</th>
<th class="flix-calendar__cell" aria-label="Saturday">Sa</th>
<th class="flix-calendar__cell" aria-label="Sunday">Su</th>
</tr>
</thead>
<tbody>
<tr>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">1</span>
</td>
</tr>
<tr>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">2</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">3</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">4</span>
</td>
<td class="flix-calendar__cell" aria-disabled="true">
<span class="flix-calendar__btn flix-calendar__btn--disabled">5</span>
</td>
<td class="flix-calendar__cell flix-calendar__cell--current" aria-current="date">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 6">6</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 7">7</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 8">8</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 9">9</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, September 10">10</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, September 11">11</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, September 12">12</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 13">13</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 14">14</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 15">15</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 16">16</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, September 17">17</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, September 18">18</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, September 19">19</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 20">20</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 21">21</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 22">22</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 23">23</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Tuesday, September 24">24</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Wednesday, September 25">25</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Thursday, September 26">26</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Friday, September 27">27</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Saturday, September 28">28</button>
</td>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Sunday, September 29">29</button>
</td>
</tr>
<tr>
<td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="Monday, September 30">30</button>
</td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
<td class="flix-calendar__cell" aria-disabled="true"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>