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.
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.
2. 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-label on each th element inside of the thead.
This replaces the somewhat meaningless 2 letters with the actual name of the day for screen readers.
3. Just visually disabling the buttons is not enough for the disabled days, you must also add
aria-disabled="true" on the grid cell elements. Then you can either disable the button inside or
replace the element with a span.
4. The selected day should have not only the class modifier for appearance but also
aria-selected="true" for screen readers.
5. The current day, if present, should have aria-current="date" in the cell attributes for
screen readers.
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | |||
<div style="max-width:20em">
<div class="flix-calendar">
<div class="flix-calendar__month">
<table role="grid" id="simple" 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="6/9">6</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="7/9">7</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="8/9">8</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="9/9">9</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="10/9">10</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="11/9">11</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="12/9">12</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="13/9">13</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="14/9">14</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="15/9">15</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="16/9">16</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="17/9">17</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="18/9">18</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="19/9">19</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="20/9">20</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="21/9">21</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="22/9">22</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="23/9">23</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="24/9">24</button>
</td><td class="flix-calendar__cell flix-calendar__cell--selected" aria-selected="true">
<button class="flix-calendar__btn" type="button" aria-label="25/9">25</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="26/9">26</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="27/9">27</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="28/9">28</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="29/9">29</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="30/9">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>CSS modifiers for day cells
-
--selected - marks currently selected single day in the calendar;
-
--current - should be used to highlight the current date (today);
-
--disabled - Applies for the button inside, can be used to mark the days which aren't available for selection;
-
--hover - Applies the mouse over state styles to a cell, used to preview the days that will be selected with a given preset control;
-
--start -
--end - Respectively mark start and end of the selection range;
-
--range -
Should be used for all days in between
--startand--endto highlight the date range selected.
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.
With 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.
3. When the return day is selected, add the --end modifier to the cell.
4. All cells in between should have --range modifier to add the highlight.
Notice 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.
You can also show them side by side by using the --horizontal class modifier.
| 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:40em">
<div class="flix-calendar flix-calendar--horizontal">
<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="6/9">6</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="7/9">7</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="8/9">8</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="9/9">9</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="10/9">10</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="11/9">11</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="12/9">12</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="13/9">13</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="14/9">14</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="15/9">15</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="16/9">16</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="17/9">17</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="18/9">18</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="19/9">19</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="20/9">20</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="21/9">21</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="22/9">22</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="23/9">23</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="24/9">24</button>
</td><td class="flix-calendar__cell flix-calendar__cell--start" aria-selected="true">
<button class="flix-calendar__btn" type="button" aria-label="25/9">25</button>
</td><td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="26/9">26</button>
</td><td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="27/9">27</button>
</td><td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="28/9">28</button>
</td><td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="29/9">29</button>
</td></tr><tr><td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="30/9">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="1/10">1</button>
</td><td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="2/10">2</button>
</td><td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="3/10">3</button>
</td><td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="4/10">4</button>
</td><td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="5/10">5</button>
</td><td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="6/10">6</button>
</td></tr><tr><td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="7/10">7</button>
</td><td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="8/10">8</button>
</td><td class="flix-calendar__cell flix-calendar__cell--range">
<button class="flix-calendar__btn" type="button" aria-label="9/10">9</button>
</td><td class="flix-calendar__cell flix-calendar__cell--end" aria-selected="true">
<button class="flix-calendar__btn" type="button" aria-label="10/10">10</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="11/10">11</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="12/10">12</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="13/10">13</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="14/10">14</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="15/10">15</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="16/10">16</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="17/10">17</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="18/10">18</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="19/10">19</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="20/10">20</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="21/10">21</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="22/10">22</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="23/10">23</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="24/10">24</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="25/10">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>Month and year pickers
The calendar-header wrapper should be added before the table element, as it contains the
controls for the calendar.
The controls (could be button 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 grid (table element) so you can associate it with its controls. - Add
aria-controls="{calendar-id}"to each element that is responsible for changing the calendar
content.
3. Add aria-live="polite" to the table, as it will enable screen readers to announce changes in
the content of this element when they happen.
Now you can add your handlers to the controls and update the calendar days and caption as you wish.
The table header supports 2 different layouts: compact and birthday.
Compact header
Displays one month at a time, with one select box for month and year, and button for month navigation.
- Use the
buttoncomponent with the following modifiers: secondary appearance and square
display.
- Use the
selectcomponent with no visible label (addaria-labelinstead) and add the
flix-calendar-header__select class name to it, to enable the calendar component to apply the
necessary CSS adjustments.
- You can also use the
--flatmodifier to remove border radius and box shadow where needed, we
added this appearance modifier in the example bellow.
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | |||
<div style="max-width:30em">
<div class="flix-calendar flix-calendar--flat">
<div class="flix-calendar__month">
<div class="flix-calendar-header flix-calendar-header--compact">
<button type="button" class="flix-btn flix-btn--secondary flix-btn--square flix-btn--disabled" disabled="" aria-label="Previous month" aria-controls="compact-header">
<flix-icon class="flix-btn__icon" aria-hidden="true" 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-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">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--secondary flix-btn--square" aria-label="Next month" aria-controls="compact-header">
<flix-icon class="flix-btn__icon" aria-hidden="true" name="arrow-right"></flix-icon>
</button>
</div>
<table role="grid" id="compact-header" aria-live="polite" class="flix-calendar__table"><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="6/9">6</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="7/9">7</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="8/9">8</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="9/9">9</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="10/9">10</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="11/9">11</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="12/9">12</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="13/9">13</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="14/9">14</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="15/9">15</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="16/9">16</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="17/9">17</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="18/9">18</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="19/9">19</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="20/9">20</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="21/9">21</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="22/9">22</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="23/9">23</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="24/9">24</button>
</td><td class="flix-calendar__cell flix-calendar__cell--selected" aria-selected="true">
<button class="flix-calendar__btn" type="button" aria-label="25/9">25</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="26/9">26</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="27/9">27</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="28/9">28</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="29/9">29</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="30/9">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>Birthday header with input field
The birthday header renders one month at a time, and two select boxes with month and year selection.
Associating a calendar with an input field requires some attribute handling as well.
- When days are selected they update the value input field value. The days inputs must have
aria-controls="{input_id}" to inform assistive technologies of this relationship.
2. Since the input field value can be changed by external controls, it should have
aria-live="polite" to allow screen readers to announce changes.
3. You can group the input field and the calendar using the fieldset component.
4. The margin between the input field and the calendar should be 3px, to achieve that, add
--space-half modifier on the fieldset item that contains the calendar.
5. Make sure to always match the calendar width with the input field, in case the input field is
smaller than 276px, centralize the calendar relative to the input.
<div style="max-width:20em">
<fieldset class="flix-fieldset">
<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"/>
<span class="flix-input__feedback-icon" aria-hidden="true"></span>
</div>
</div>
</div>
<div class="flix-fieldset__item flix-fieldset__item--space-half">
<div class="flix-calendar">
<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-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">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-label="Select year" aria-controls="birthday-header">
<option value="0">1980</option>
<option value="1">1981</option>
<option value="2">1982</option>
<option value="3">1983</option>
<option value="4">1984</option>
<option value="5">1985</option>
<option value="6">1986</option>
<option value="7">1987</option>
<option value="8">1988</option>
<option value="9">1989</option>
<option value="10">1990</option>
<option value="11">1991</option>
<option value="12">1992</option>
<option value="13">1993</option>
<option value="14">1994</option>
<option value="15">1995</option>
</select>
</div>
</div>
</div>
<table role="grid" id="birthday-header" aria-live="polite" class="flix-calendar__table"><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="6/9" aria-controls="input-example">6</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="7/9" aria-controls="input-example">7</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="8/9" aria-controls="input-example">8</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="9/9" aria-controls="input-example">9</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="10/9" aria-controls="input-example">10</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="11/9" aria-controls="input-example">11</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="12/9" aria-controls="input-example">12</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="13/9" aria-controls="input-example">13</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="14/9" aria-controls="input-example">14</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="15/9" aria-controls="input-example">15</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="16/9" aria-controls="input-example">16</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="17/9" aria-controls="input-example">17</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="18/9" aria-controls="input-example">18</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="19/9" aria-controls="input-example">19</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="20/9" aria-controls="input-example">20</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="21/9" aria-controls="input-example">21</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="22/9" aria-controls="input-example">22</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="23/9" aria-controls="input-example">23</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="24/9" aria-controls="input-example">24</button>
</td><td class="flix-calendar__cell flix-calendar__cell--selected" aria-selected="true">
<button class="flix-calendar__btn" type="button" aria-label="25/9" aria-controls="input-example">25</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="26/9" aria-controls="input-example">26</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="27/9" aria-controls="input-example">27</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="28/9" aria-controls="input-example">28</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="29/9" aria-controls="input-example">29</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="30/9" aria-controls="input-example">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>
</fieldset>
</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.
When using controls they should be used in the horizontal variation on desktop. The controls should then be added after the months.
Examples of other presets are: current month, next week, previous week, etcetera.
| 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:50em">
<div class="flix-calendar flix-calendar--horizontal">
<div class="flix-calendar__month">
<table role="grid" id="with-controls-horizontal" 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 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="6/9">6</button>
</td><td class="flix-calendar__cell flix-calendar__cell--hover">
<button class="flix-calendar__btn" type="button" aria-label="7/9">7</button>
</td><td class="flix-calendar__cell flix-calendar__cell--hover">
<button class="flix-calendar__btn" type="button" aria-label="8/9">8</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="9/9">9</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="10/9">10</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="11/9">11</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="12/9">12</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="13/9">13</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="14/9">14</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="15/9">15</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="16/9">16</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="17/9">17</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="18/9">18</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="19/9">19</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="20/9">20</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="21/9">21</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="22/9">22</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="23/9">23</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="24/9">24</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="25/9">25</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="26/9">26</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="27/9">27</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="28/9">28</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="29/9">29</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="30/9">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="with-controls-horizontal-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">
<button class="flix-calendar__btn" type="button" aria-label="1/10">1</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="2/10">2</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="3/10">3</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="4/10">4</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="5/10">5</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="6/10">6</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="7/10">7</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="8/10">8</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="9/10">9</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="10/10">10</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="11/10">11</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="12/10">12</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="13/10">13</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="14/10">14</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="15/10">15</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="16/10">16</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="17/10">17</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="18/10">18</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="19/10">19</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="20/10">20</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="21/10">21</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="22/10">22</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="23/10">23</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="24/10">24</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="25/10">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 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 small 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:20em">
<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__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="6/9">6</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="7/9">7</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="8/9">8</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="9/9">9</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="10/9">10</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="11/9">11</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="12/9">12</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="13/9">13</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="14/9">14</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="15/9">15</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="16/9">16</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="17/9">17</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="18/9">18</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="19/9">19</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="20/9">20</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="21/9">21</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="22/9">22</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="23/9">23</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="24/9">24</button>
</td><td class="flix-calendar__cell flix-calendar__cell--selected" aria-selected="true">
<button class="flix-calendar__btn" type="button" aria-label="25/9">25</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="26/9">26</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="27/9">27</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="28/9">28</button>
</td><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="29/9">29</button>
</td></tr><tr><td class="flix-calendar__cell">
<button class="flix-calendar__btn" type="button" aria-label="30/9">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>