Calendar
Commonly used as the contents of a popover when composing date-picker, rarely used on its own as a standalone component.
The .fd-calendar__item container takes the majority of styling. The rest of the markup provides the structure and layout.
Classes available for .fd-calendar__item. All are available to dates, months, and years.
Looking for Date Picker? From a style perspective, a date-picker is simply a composition of our existing calendar, input group and popover, but contains no new styles of its own. Therefore, we consider it a pattern. See the date picker pattern here.
Modifiers
These are static classes set at load time, not affected by any user selections in the calendar itself
.fd-calendar__item
|
Base class defaulted to an interactive element |
20
|
.fd-calendar__item--other-month
|
Apply to dates outside the current month |
20
|
.fd-calendar__item--current
|
Apply to the current today, this month, this year |
20
|
.fd-calendar__item--disabled
|
Cannot be selected, usually applied to a large range of past or future dates |
20
|
.fd-calendar__item--blocked
|
Cannot be selected, usually applied to blackout or booked dates mixed in with available dates |
20
|
States
These are dynamic classes which are affected by user selections
.is-disabled
|
(redundant) Cannot be selected, usually applied to a large range of past or future dates |
20
|
.is-blocked
|
(redundant) Cannot be selected, usually applied to blackout or booked dates mixed in with available dates |
20
|
.is-selected
|
Currently selected date AND the first and last dates in a range |
20
|
.is-selected-range
|
A date in the range between the first and last selected dates |
20
|
.is-selected-range-first*
|
The first date in a selected range |
20
|
.is-selected-range-last*
|
The last date in a selected range |
20
|
* These are -first and -last classes are only necessary to adjust the border radius.
|
Example: Dates, Months, Years
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
| 30 | 31 | 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 1 | 2 | 3 | 4 | 5 |
<div class="fd-calendar">
<header class="fd-calendar__header">
<div class="fd-calendar__navigation">
<div class="fd-calendar__action">
<button class="fd-button--standard fd-button--light fd-button--compact sap-icon--slim-arrow-left" aria-label="Previous" aria-disabled="false"></button>
</div>
<div class="fd-calendar__action">
<button class="fd-button--light fd-button--compact" aria-selected="false" aria-expanded="false" aria-controls="crM8l491">February</button>
</div>
<div class="fd-calendar__action">
<button class="fd-button--light fd-button--compact" aria-selected="false" aria-expanded="false" aria-controls="FTXrD591">2018</button>
</div>
<div class="fd-calendar__action">
<button class="fd-button--standard fd-button--light fd-button--compact sap-icon--slim-arrow-right" aria-label="Next"></button>
</div>
</div>
</header>
<div class="fd-calendar__content">
<div class="fd-calendar__dates" id="XVXTR263" aria-hidden="false">
<table class="fd-calendar__table" role="grid">
<thead class="fd-calendar__group">
<tr class="fd-calendar__row">
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">S</span>
</th>
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">M</span>
</th>
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">T</span>
</th>
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">W</span>
</th>
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">T</span>
</th>
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">F</span>
</th>
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">S</span>
</th>
</tr>
</thead>
<tbody class="fd-calendar__group">
<tr class="fd-calendar__row">
<td class="fd-calendar__item fd-calendar__item--other-month" role="gridcell">
<span class="fd-calendar__text" role="button">30</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month" role="gridcell">
<span class="fd-calendar__text" role="button">31</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text" role="button">1</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text" role="button">2</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text" role="button">3</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text" role="button">4</span>
</td>
<td class="fd-calendar__item is-selected is-selected-range-first" role="gridcell">
<span class="fd-calendar__text" role="button" aria-selected="true">5</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item is-selected-range" role="gridcell">
<span class="fd-calendar__text" role="button">6</span>
</td>
<td class="fd-calendar__item is-selected-range" role="gridcell">
<span class="fd-calendar__text" role="button">7</span>
</td>
<td class="fd-calendar__item is-selected-range" role="gridcell">
<span class="fd-calendar__text" role="button">8</span>
</td>
<td class="fd-calendar__item is-selected-range" role="gridcell">
<span class="fd-calendar__text" role="button">9</span>
</td>
<td class="fd-calendar__item is-selected-range" role="gridcell">
<span class="fd-calendar__text" role="button">10</span>
</td>
<td class="fd-calendar__item is-selected-range" role="gridcell">
<span class="fd-calendar__text" role="button">11</span>
</td>
<td class="fd-calendar__item is-selected-range" role="gridcell">
<span class="fd-calendar__text" role="button">12</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item is-selected-range" role="gridcell">
<span class="fd-calendar__text" role="button">13</span>
</td>
<td class="fd-calendar__item is-selected-range" role="gridcell">
<span class="fd-calendar__text" role="button">14</span>
</td>
<td class="fd-calendar__item is-selected-range" role="gridcell">
<span class="fd-calendar__text" role="button">15</span>
</td>
<td class="fd-calendar__item is-selected-range" role="gridcell">
<span class="fd-calendar__text" role="button">16</span>
</td>
<td class="fd-calendar__item is-selected-range" role="gridcell">
<span class="fd-calendar__text" role="button">17</span>
</td>
<td class="fd-calendar__item is-selected-range" role="gridcell">
<span class="fd-calendar__text" role="button">18</span>
</td>
<td class="fd-calendar__item fd-calendar__item--current is-selected-range" role="gridcell">
<span class="fd-calendar__text" role="button">19</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item is-selected is-selected-range-last" role="gridcell">
<span class="fd-calendar__text" role="button" aria-selected="true">20</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text" role="button">21</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text" role="button">22</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text" role="button">23</span>
</td>
<td class="fd-calendar__item is-blocked" role="gridcell">
<span class="fd-calendar__text" role="button">24</span>
</td>
<td class="fd-calendar__item is-blocked" role="gridcell">
<span class="fd-calendar__text" role="button">25</span>
</td>
<td class="fd-calendar__item is-blocked" role="gridcell">
<span class="fd-calendar__text" role="button">26</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item is-blocked" role="gridcell">
<span class="fd-calendar__text" role="button">27</span>
</td>
<td class="fd-calendar__item is-blocked" role="gridcell">
<span class="fd-calendar__text" role="button">28</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month" role="gridcell">
<span class="fd-calendar__text" role="button">1</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month" role="gridcell">
<span class="fd-calendar__text" role="button">2</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month" role="gridcell">
<span class="fd-calendar__text" role="button">3</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month" role="gridcell">
<span class="fd-calendar__text" role="button">4</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month" role="gridcell">
<span class="fd-calendar__text" role="button">5</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="fd-calendar__months is-hidden" id="crM8l491" aria-hidden="true">
<table class="fd-calendar__table" role="grid">
<tbody class="fd-calendar__group">
<tr class="fd-calendar__row">
<td class="fd-calendar__item fd-calendar__item--current">
<span class="fd-calendar__text" role="button">Jan.</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">Feb.</span>
</td>
<td class="fd-calendar__item is-selected">
<span class="fd-calendar__text" role="button" aria-selected="true">Mar.</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">Apr.</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">May</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">Jun.</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">Jul.</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">Aug.</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">Sep.</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">Oct.</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">Nov.</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">Dec.</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="fd-calendar__years is-hidden" aria-hidden="true" id="FTXrD591">
<table class="fd-calendar__table" role="grid">
<tbody class="fd-calendar__group">
<tr class="fd-calendar__row">
<td class="fd-calendar__item fd-calendar__item--current">
<span class="fd-calendar__text" role="button">2018</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">2019</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">2020</span>
</td>
<td class="fd-calendar__item is-selected">
<span class="fd-calendar__text" role="button" aria-selected="true">2021</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">2022</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">2023</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">2024</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">2025</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">2026</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">2027</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">2028</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">2029</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>Example: Dates
The previous and next controls are standard buttons with all available states. For example, add disabled or aria-disabled="true" to gray out the previous button when past dates are not allowed.
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
| 29 | 30 | 31 | 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 1 | 2 |
<div class="fd-calendar">
<header class="fd-calendar__header">
<div class="fd-calendar__navigation">
<div class="fd-calendar__action">
<button class="fd-button--standard fd-button--light fd-button--compact sap-icon--slim-arrow-left" aria-label="Previous" aria-disabled="true"></button>
</div>
<div class="fd-calendar__action">
<button class="fd-button--light fd-button--compact" aria-selected="false" aria-expanded="false" aria-controls="xB1D3835">September</button>
</div>
<div class="fd-calendar__action">
<button class="fd-button--light fd-button--compact" aria-selected="false" aria-expanded="false" aria-controls="8bZhe525">2018</button>
</div>
<div class="fd-calendar__action">
<button class="fd-button--standard fd-button--light fd-button--compact sap-icon--slim-arrow-right" aria-label="Next"></button>
</div>
</div>
</header>
<div class="fd-calendar__content">
<div class="fd-calendar__dates" id="TgBx9346" aria-hidden="false">
<table class="fd-calendar__table" role="grid">
<thead class="fd-calendar__group">
<tr class="fd-calendar__row">
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">S</span>
</th>
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">M</span>
</th>
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">T</span>
</th>
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">W</span>
</th>
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">T</span>
</th>
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">F</span>
</th>
<th class="fd-calendar__column-header">
<span class="fd-calendar__day-of-week">S</span>
</th>
</tr>
</thead>
<tbody class="fd-calendar__group">
<tr class="fd-calendar__row">
<td class="fd-calendar__item fd-calendar__item--other-month is-disabled" role="gridcell">
<span class="fd-calendar__text" role="button">29</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month is-disabled" role="gridcell">
<span class="fd-calendar__text" role="button">30</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month is-disabled" role="gridcell">
<span class="fd-calendar__text" role="button">31</span>
</td>
<td class="fd-calendar__item is-disabled" role="gridcell">
<span class="fd-calendar__text" role="button">1</span>
</td>
<td class="fd-calendar__item is-disabled" role="gridcell">
<span class="fd-calendar__text" role="button">2</span>
</td>
<td class="fd-calendar__item is-disabled" role="gridcell">
<span class="fd-calendar__text" role="button">3</span>
</td>
<td class="fd-calendar__item is-disabled" role="gridcell">
<span class="fd-calendar__text" role="button">4</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item is-disabled" role="gridcell">
<span class="fd-calendar__text" role="button">5</span>
</td>
<td class="fd-calendar__item fd-calendar__item--current" role="gridcell">
<span class="fd-calendar__text" role="button">6</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text" role="button">7</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text" role="button">8</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text" role="button">9</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text" role="button">10</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text" role="button">11</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text" role="button">12</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text" role="button">13</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text" role="button">14</span>
</td>
<td class="fd-calendar__item is-selected" role="gridcell">
<span class="fd-calendar__text" role="button" aria-selected="true">15</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text" role="button">16</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text" role="button">17</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text" role="button">18</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text" role="button">19</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text" role="button">20</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text" role="button">21</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text" role="button">22</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text" role="button">23</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text" role="button">24</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text" role="button">25</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item is-blocked" role="gridcell">
<span class="fd-calendar__text" role="button">26</span>
</td>
<td class="fd-calendar__item is-blocked" role="gridcell">
<span class="fd-calendar__text" role="button">27</span>
</td>
<td class="fd-calendar__item is-blocked" role="gridcell">
<span class="fd-calendar__text" role="button">28</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text" role="button">29</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text" role="button">30</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month" role="gridcell">
<span class="fd-calendar__text" role="button">1</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month" role="gridcell">
<span class="fd-calendar__text" role="button">2</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>Example: Months
| Jan. | Feb. | Mar. | Apr. |
| May | Jun. | Jul. | Aug. |
| Sep. | Oct. | Nov. | Dec. |
<div class="fd-calendar">
<header class="fd-calendar__header">
<div class="fd-calendar__navigation">
<div class="fd-calendar__action">
<button class="fd-button--standard fd-button--light fd-button--compact sap-icon--slim-arrow-left" aria-label="Previous" aria-disabled="undefined"></button>
</div>
<div class="fd-calendar__action">
<button class="fd-button--light fd-button--compact" aria-selected="true" aria-expanded="true" aria-controls="Eo94h672">January</button>
</div>
<div class="fd-calendar__action">
<button class="fd-button--light fd-button--compact" aria-selected="false" aria-expanded="false" aria-controls="GMnxs122">2018</button>
</div>
<div class="fd-calendar__action">
<button class="fd-button--standard fd-button--light fd-button--compact sap-icon--slim-arrow-right" aria-label="Next"></button>
</div>
</div>
</header>
<div class="fd-calendar__content">
<div class="fd-calendar__months" id="Eo94h672" aria-hidden="false">
<table class="fd-calendar__table" role="grid">
<tbody class="fd-calendar__group">
<tr class="fd-calendar__row">
<td class="fd-calendar__item fd-calendar__item--current">
<span class="fd-calendar__text" role="button">Jan.</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">Feb.</span>
</td>
<td class="fd-calendar__item is-selected">
<span class="fd-calendar__text" role="button" aria-selected="true">Mar.</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">Apr.</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">May</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">Jun.</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">Jul.</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">Aug.</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">Sep.</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">Oct.</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">Nov.</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">Dec.</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>Example: Years
| 2018 | 2019 | 2020 | 2021 |
| 2022 | 2023 | 2024 | 2025 |
| 2026 | 2027 | 2028 | 2029 |
<div class="fd-calendar">
<header class="fd-calendar__header">
<div class="fd-calendar__navigation">
<div class="fd-calendar__action">
<button class="fd-button--standard fd-button--light fd-button--compact sap-icon--slim-arrow-left" aria-label="Previous" aria-disabled="undefined"></button>
</div>
<div class="fd-calendar__action">
<button class="fd-button--light fd-button--compact" aria-selected="false" aria-expanded="false" aria-controls="fm3cr569">January</button>
</div>
<div class="fd-calendar__action">
<button class="fd-button--light fd-button--compact" aria-selected="true" aria-expanded="true" aria-controls="bufLe361">2018</button>
</div>
<div class="fd-calendar__action">
<button class="fd-button--standard fd-button--light fd-button--compact sap-icon--slim-arrow-right" aria-label="Next"></button>
</div>
</div>
</header>
<div class="fd-calendar__content">
<div class="fd-calendar__years" aria-hidden="false" id="bufLe361">
<table class="fd-calendar__table" role="grid">
<tbody class="fd-calendar__group">
<tr class="fd-calendar__row">
<td class="fd-calendar__item fd-calendar__item--current">
<span class="fd-calendar__text" role="button">2018</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">2019</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">2020</span>
</td>
<td class="fd-calendar__item is-selected">
<span class="fd-calendar__text" role="button" aria-selected="true">2021</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">2022</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">2023</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">2024</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">2025</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">2026</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">2027</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">2028</span>
</td>
<td class="fd-calendar__item">
<span class="fd-calendar__text" role="button">2029</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>