Calendar
Available since 1.1.0
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.
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">30</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month" role="gridcell">
<span class="fd-calendar__text">31</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">1</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">2</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">3</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">4</span>
</td>
<td class="fd-calendar__item is-selected is-selected-range-first" role="gridcell">
<span class="fd-calendar__text">5</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item is-selected-range" role="gridcell">
<span class="fd-calendar__text">6</span>
</td>
<td class="fd-calendar__item is-selected-range" role="gridcell">
<span class="fd-calendar__text">7</span>
</td>
<td class="fd-calendar__item is-selected-range" role="gridcell">
<span class="fd-calendar__text">8</span>
</td>
<td class="fd-calendar__item is-selected-range" role="gridcell">
<span class="fd-calendar__text">9</span>
</td>
<td class="fd-calendar__item is-selected-range" role="gridcell">
<span class="fd-calendar__text">10</span>
</td>
<td class="fd-calendar__item is-selected-range" role="gridcell">
<span class="fd-calendar__text">11</span>
</td>
<td class="fd-calendar__item is-selected-range" role="gridcell">
<span class="fd-calendar__text">12</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item is-selected-range" role="gridcell">
<span class="fd-calendar__text">13</span>
</td>
<td class="fd-calendar__item is-selected-range" role="gridcell">
<span class="fd-calendar__text">14</span>
</td>
<td class="fd-calendar__item is-selected-range" role="gridcell">
<span class="fd-calendar__text">15</span>
</td>
<td class="fd-calendar__item is-selected-range" role="gridcell">
<span class="fd-calendar__text">16</span>
</td>
<td class="fd-calendar__item is-selected-range" role="gridcell">
<span class="fd-calendar__text">17</span>
</td>
<td class="fd-calendar__item is-selected-range" role="gridcell">
<span class="fd-calendar__text">18</span>
</td>
<td class="fd-calendar__item fd-calendar__item--current is-selected-range" role="gridcell">
<span class="fd-calendar__text">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">20</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">21</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">22</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">23</span>
</td>
<td class="fd-calendar__item is-blocked" role="gridcell">
<span class="fd-calendar__text">24</span>
</td>
<td class="fd-calendar__item is-blocked" role="gridcell">
<span class="fd-calendar__text">25</span>
</td>
<td class="fd-calendar__item is-blocked" role="gridcell">
<span class="fd-calendar__text">26</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item is-blocked" role="gridcell">
<span class="fd-calendar__text">27</span>
</td>
<td class="fd-calendar__item is-blocked" role="gridcell">
<span class="fd-calendar__text">28</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month" role="gridcell">
<span class="fd-calendar__text">1</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month" role="gridcell">
<span class="fd-calendar__text">2</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month" role="gridcell">
<span class="fd-calendar__text">3</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month" role="gridcell">
<span class="fd-calendar__text">4</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month" role="gridcell">
<span class="fd-calendar__text">5</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="fd-calendar__months" id="crM8l491" aria-hidden="true">
<ul class="fd-calendar__list">
<li class="fd-calendar__item">
<span class="fd-calendar__text">Jan.</span></li>
<li class="fd-calendar__item fd-calendar__item--current">
<span class="fd-calendar__text">Feb.</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">Mar.</span></li>
<li class="fd-calendar__item is-selected">
<span class="fd-calendar__text">Apr.</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">May</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">Jun.</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">Jul.</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">Aug.</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">Sep.</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">Oct.</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">Nov.</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">Dec.</span></li>
</ul>
</div>
<div class="fd-calendar__years" aria-hidden="true" id="FTXrD591">
<ul class="fd-calendar__list">
<li class="fd-calendar__item fd-calendar__item--current">
<span class="fd-calendar__text">2018</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">2019</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">2020</span></li>
<li class="fd-calendar__item is-selected">
<span class="fd-calendar__text">2021</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">2022</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">2023</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">2024</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">2025</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">2026</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">2027</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">2028</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">2029</span></li>
</ul>
</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">29</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month is-disabled" role="gridcell">
<span class="fd-calendar__text">30</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month is-disabled" role="gridcell">
<span class="fd-calendar__text">31</span>
</td>
<td class="fd-calendar__item is-disabled" role="gridcell">
<span class="fd-calendar__text">1</span>
</td>
<td class="fd-calendar__item is-disabled" role="gridcell">
<span class="fd-calendar__text">2</span>
</td>
<td class="fd-calendar__item is-disabled" role="gridcell">
<span class="fd-calendar__text">3</span>
</td>
<td class="fd-calendar__item is-disabled" role="gridcell">
<span class="fd-calendar__text">4</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item is-disabled" role="gridcell">
<span class="fd-calendar__text">5</span>
</td>
<td class="fd-calendar__item fd-calendar__item--current" role="gridcell">
<span class="fd-calendar__text">6</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">7</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">8</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">9</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">10</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">11</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">12</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">13</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">14</span>
</td>
<td class="fd-calendar__item is-selected" role="gridcell">
<span class="fd-calendar__text">15</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">16</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">17</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">18</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">19</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">20</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">21</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">22</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">23</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">24</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">25</span>
</td>
</tr>
<tr class="fd-calendar__row">
<td class="fd-calendar__item is-blocked" role="gridcell">
<span class="fd-calendar__text">26</span>
</td>
<td class="fd-calendar__item is-blocked" role="gridcell">
<span class="fd-calendar__text">27</span>
</td>
<td class="fd-calendar__item is-blocked" role="gridcell">
<span class="fd-calendar__text">28</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">29</span>
</td>
<td class="fd-calendar__item" role="gridcell">
<span class="fd-calendar__text">30</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month" role="gridcell">
<span class="fd-calendar__text">1</span>
</td>
<td class="fd-calendar__item fd-calendar__item--other-month" role="gridcell">
<span class="fd-calendar__text">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">
<ul class="fd-calendar__list">
<li class="fd-calendar__item fd-calendar__item--current">
<span class="fd-calendar__text">Jan.</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">Feb.</span></li>
<li class="fd-calendar__item is-selected">
<span class="fd-calendar__text">Mar.</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">Apr.</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">May</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">Jun.</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">Jul.</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">Aug.</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">Sep.</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">Oct.</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">Nov.</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">Dec.</span></li>
</ul>
</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">
<ul class="fd-calendar__list">
<li class="fd-calendar__item fd-calendar__item--current">
<span class="fd-calendar__text">2018</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">2019</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">2020</span></li>
<li class="fd-calendar__item is-selected">
<span class="fd-calendar__text">2021</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">2022</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">2023</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">2024</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">2025</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">2026</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">2027</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">2028</span></li>
<li class="fd-calendar__item">
<span class="fd-calendar__text">2029</span></li>
</ul>
</div>
</div>
</div>