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>