Commonly used as the contents of a popover when composing date-picker, rarely used on its own as a standalone component.
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 .
Calendar structure
Following classes describe block structure of calendar component.
.fd-calendar - calendar main container, defines width of calendar
.fd-calendar__header - header section of calendar
.fd-calendar__navigation - container used for grouping row of navigation controls
.fd-calendar__action - action buttons of calendar.fd-calendar__close-button--navigation - close button inside navigation for calendar on mobile devices without dialog header
.fd-calendar__close-button - close button inside dialog header for calendar on mobile devices
.fd-calendar__content - calendar body container
.fd-calendar__table - groups table elements representing calendar items
.fd-calendar__group - groups calendar rows with the same destination
.fd-calendar__row - groups calendar grid items in one row
.fd-calendar__item - represents calendar grid item
.fd-calendar__text - represents content of calendar grid item
.fd-calendar__special-day - represents calendar grid item with special marker
Calendar modifiers
This are classes used to describe the look general look of calendar.
.fd-calendar--compactClass used to style calendar in compact mode
.fd-calendar--mobile-landscapeClass used to style calendar for mobile devices in landscape orientation.
.fd-calendar--mobile-portraitClass used to style calendar for mobile devices in portrait orientation.
.fd-calendar__content--monthsClass used to style calendar content when calendar displays months
.fd-calendar__content--yearsClass used to style calendar content when calendar displays years
Calendar navigation modifiers
This are classes used to describe the look of calendar action buttons.
.fd-calendar__navigation--mainClass used to limit main navigation width on mobile devices in landscape orientation and create space for optional close button
.fd-calendar__action--arrow-leftClass used to style "Previous" navigation button
.fd-calendar__action--arrow-rightClass used to style "Next" navigation button
.fd-calendar__close-button--navigationClass used to correctly place close button inside calendar navigation panel
Calendar grid elements modifiers
This are classes used to describe the look of calendar grid element.
.fd-calendar__itemBase class used to represent calendar cell
30
.fd-calendar__item--weekendClass used to style weekend days
30
.fd-calendar__item--other-monthClass used to style days outside of current month
30
.fd-calendar__item--currentClass used to style current day, month or year
30
.fd-calendar__item--rangeClass used to style calendar elements placed between range start and end elements
30
.fd-calendar__item--side-helperClass used for styling calendar grid side-helpers like week number or day shortcut
30
Calendar elements state modifiers
This are classes used to describe state of calendar grid element.
.is-focusClass used to style focused calendar elements
30
.is-activeClass used to style calendar elements selected by user
30
.is-disabledClass used to style disabled calendar elements
30
Calendar special days
This are classes used to describe the look of calendar grid element.
.fd-calendar__special-day--1--2--3--4--5--6--7--8--9--10--11--12--13--14--15--16--17--18--19--20
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
30
Example calendar with days
S
M
T
W
T
F
S
1
30
31
1
2
3
4
5
2
6
7
8
9
10
11
12
3
13
14
15
16
17
18
19
4
20
21
22
23
24
25
26
5
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 fd-calendar__action--arrow-left" >
<button type= "button" class= "fd-button fd-button--transparent sap-icon--slim-arrow-left" aria-label= "Previous" aria-selected= "false" ></button>
</div>
<div class= "fd-calendar__action" >
<button type= "button" class= "fd-button fd-button--transparent" aria-selected= "false" > January</button>
</div>
<div class= "fd-calendar__action" >
<button type= "button" class= "fd-button fd-button--transparent" aria-selected= "false" > 2018</button>
</div>
<div class= "fd-calendar__action fd-calendar__action--arrow-right" >
<button type= "button" class= "fd-button fd-button--transparent sap-icon--slim-arrow-right" aria-label= "Next" aria-selected= "false" ></button>
</div>
</div>
</header>
<div class= "fd-calendar__content fd-calendar__content--dates" id= "IO0cp341" >
<table class= "fd-calendar__table" role= "grid" >
<thead class= "fd-calendar__group" >
<tr class= "fd-calendar__row" >
<th class= "fd-calendar__item fd-calendar__item--side-helper" ></th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > S</span>
</th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > M</span>
</th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > T</span>
</th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > W</span>
</th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > T</span>
</th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > F</span>
</th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > S</span>
</th>
</tr>
</thead>
<tbody class= "fd-calendar__group" >
<tr class= "fd-calendar__row" >
<td class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > 1</span>
</td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--other-month" >
<span class= "fd-calendar__text" role= "button" > 30</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--other-month" >
<span class= "fd-calendar__text" role= "button" > 31</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 1</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 3</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend" >
<span class= "fd-calendar__text" role= "button" > 4</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend" >
<span class= "fd-calendar__text" role= "button" > 5</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > 2</span>
</td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 6</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 7</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 8</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 9</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 10</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend" >
<span class= "fd-calendar__text" role= "button" > 11</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend" >
<span class= "fd-calendar__text" role= "button" > 12</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > 3</span>
</td>
<td role= "gridcell" class= "fd-calendar__item is-active fd-calendar__item--range" >
<span class= "fd-calendar__text" role= "button" > 13</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--range" >
<span class= "fd-calendar__text" role= "button" > 14</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--range" >
<span class= "fd-calendar__text" role= "button" > 15</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--range" >
<span class= "fd-calendar__text" role= "button" > 16</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--range" >
<span class= "fd-calendar__text" role= "button" > 17</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend fd-calendar__item--current is-active fd-calendar__special-day--1" >
<span class= "fd-calendar__text" role= "button" > 18</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend fd-calendar__special-day--1" >
<span class= "fd-calendar__text" role= "button" > 19</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > 4</span>
</td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 20</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 21</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 22</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 23</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__special-day--3" >
<span class= "fd-calendar__text" role= "button" > 24</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend fd-calendar__special-day--3" >
<span class= "fd-calendar__text" role= "button" > 25</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend" >
<span class= "fd-calendar__text" role= "button" > 26</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > 5</span>
</td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 27</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 28</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--other-month" >
<span class= "fd-calendar__text" role= "button" > 1</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--other-month" >
<span class= "fd-calendar__text" role= "button" > 2</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--other-month" >
<span class= "fd-calendar__text" role= "button" > 3</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--other-month" >
<span class= "fd-calendar__text" role= "button" > 4</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--other-month" >
<span class= "fd-calendar__text" role= "button" > 5</span></td>
</tr>
</tbody>
</table>
</div>
</div>
Example calendar with months
January
February
March
April
May
June
July
August
September
October
November
December
<div class= "fd-calendar" >
<header class= "fd-calendar__header" >
<div class= "fd-calendar__navigation" >
<div class= "fd-calendar__action fd-calendar__action--arrow-left" >
<button type= "button" class= "fd-button fd-button--transparent sap-icon--slim-arrow-left" aria-label= "Previous" aria-selected= "false" ></button>
</div>
<div class= "fd-calendar__action" >
<button type= "button" class= "fd-button fd-button--transparent" aria-selected= "false" > January</button>
</div>
<div class= "fd-calendar__action" >
<button type= "button" class= "fd-button fd-button--transparent" aria-selected= "false" > 2018</button>
</div>
<div class= "fd-calendar__action fd-calendar__action--arrow-right" >
<button type= "button" class= "fd-button fd-button--transparent sap-icon--slim-arrow-right" aria-label= "Next" aria-selected= "false" ></button>
</div>
</div>
</header>
<div class= "fd-calendar__content fd-calendar__content--months" id= "1jjVw927" >
<table class= "fd-calendar__table" role= "grid" >
<tbody class= "fd-calendar__group" >
<tr class= "fd-calendar__row" >
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--current" >
<span class= "fd-calendar__text" role= "button" > January</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > February</span></td>
<td role= "gridcell" class= "fd-calendar__item is-active" >
<span class= "fd-calendar__text" role= "button" > March</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > April</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > May</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > June</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > July</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > August</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > September</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > October</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > November</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > December</span></td>
</tr>
</tbody>
</table>
</div>
</div>
Example calendar with years
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2010 - 2020
2021 - 2031
2032 - 2042
2043 - 2053
2054 - 2064
2065 - 2075
2076 - 2086
2087 - 2097
2098 - 2108
2109 - 2119
2120 - 2130
2131 - 2141
2010 BC - 2020 BC
2021 BC - 2031 BC
2032 BC - 2042 BC
2043 BC - 2053 BC
2054 BC - 2064 BC
2065 BC - 2075 BC
2076 BC - 2086 BC
2087 BC - 2097 BC
2010 Showa - 2020 Showa
2021 Showa - 2031 Showa
2032 Showa - 2042 Showa
2043 Showa - 2053 Showa
<div style= "display: flex; justify-content: space-around; margin-bottom: 1rem;" >
<div class= "fd-calendar" >
<header class= "fd-calendar__header" >
<div class= "fd-calendar__navigation" >
<div class= "fd-calendar__action fd-calendar__action--arrow-left" >
<button type= "button" class= "fd-button fd-button--transparent sap-icon--slim-arrow-left" aria-label= "Previous" aria-selected= "false" ></button>
</div>
<div class= "fd-calendar__action" >
<button type= "button" class= "fd-button fd-button--transparent" aria-selected= "false" > January</button>
</div>
<div class= "fd-calendar__action" >
<button type= "button" class= "fd-button fd-button--transparent" aria-selected= "false" > 2018</button>
</div>
<div class= "fd-calendar__action fd-calendar__action--arrow-right" >
<button type= "button" class= "fd-button fd-button--transparent sap-icon--slim-arrow-right" aria-label= "Next" aria-selected= "false" ></button>
</div>
</div>
</header>
<div class= "fd-calendar__content fd-calendar__content--years " id= "57YUZ521" >
<table class= "fd-calendar__table" role= "grid" >
<tbody class= "fd-calendar__group" >
<tr class= "fd-calendar__row" >
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--current" >
<span class= "fd-calendar__text" role= "button" > 2018</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2019</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2020</span></td>
<td role= "gridcell" class= "fd-calendar__item is-selected" >
<span class= "fd-calendar__text" role= "button" > 2021</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2022</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2023</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2024</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2025</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2026</span></td>
<td role= "gridcell" class= "fd-calendar__item is-active" >
<span class= "fd-calendar__text" role= "button" > 2027</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2028</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2029</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2030</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2031</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2032</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2033</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2034</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2035</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2036</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2037</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class= "fd-calendar" >
<header class= "fd-calendar__header" >
<div class= "fd-calendar__navigation" >
<div class= "fd-calendar__action fd-calendar__action--arrow-left" >
<button type= "button" class= "fd-button fd-button--transparent sap-icon--slim-arrow-left" aria-label= "Previous" aria-selected= "false" ></button>
</div>
<div class= "fd-calendar__action" >
<button type= "button" class= "fd-button fd-button--transparent" aria-selected= "false" > January</button>
</div>
<div class= "fd-calendar__action" >
<button type= "button" class= "fd-button fd-button--transparent" aria-selected= "false" > 2018</button>
</div>
<div class= "fd-calendar__action fd-calendar__action--arrow-right" >
<button type= "button" class= "fd-button fd-button--transparent sap-icon--slim-arrow-right" aria-label= "Next" aria-selected= "false" ></button>
</div>
</div>
</header>
<div class= "fd-calendar__content fd-calendar__content--years " id= "57YUZ522" >
<table class= "fd-calendar__table" role= "grid" >
<tbody class= "fd-calendar__group" >
<tr class= "fd-calendar__row" >
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2010 - 2020</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2021 - 2031</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2032 - 2042</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2043 - 2053</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2054 - 2064</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2065 - 2075</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--current" >
<span class= "fd-calendar__text" role= "button" > 2076 - 2086</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2087 - 2097</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2098 - 2108</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2109 - 2119</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2120 - 2130</span></td>
<td role= "gridcell" class= "fd-calendar__item is-active" >
<span class= "fd-calendar__text" role= "button" > 2131 - 2141</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div style= "display: flex; justify-content: space-around;" >
<div class= "fd-calendar" >
<header class= "fd-calendar__header" >
<div class= "fd-calendar__navigation" >
<div class= "fd-calendar__action fd-calendar__action--arrow-left" >
<button type= "button" class= "fd-button fd-button--transparent sap-icon--slim-arrow-left" aria-label= "Previous" aria-selected= "false" ></button>
</div>
<div class= "fd-calendar__action" >
<button type= "button" class= "fd-button fd-button--transparent" aria-selected= "false" > January</button>
</div>
<div class= "fd-calendar__action" >
<button type= "button" class= "fd-button fd-button--transparent" aria-selected= "false" > 2018</button>
</div>
<div class= "fd-calendar__action fd-calendar__action--arrow-right" >
<button type= "button" class= "fd-button fd-button--transparent sap-icon--slim-arrow-right" aria-label= "Next" aria-selected= "false" ></button>
</div>
</div>
</header>
<div class= "fd-calendar__content fd-calendar__content--years " id= "57YUZ523" >
<table class= "fd-calendar__table" role= "grid" >
<tbody class= "fd-calendar__group" >
<tr class= "fd-calendar__row" >
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2010 BC - 2020 BC</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2021 BC - 2031 BC</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td role= "gridcell" class= "fd-calendar__item is-active" >
<span class= "fd-calendar__text" role= "button" > 2032 BC - 2042 BC</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2043 BC - 2053 BC</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--current" >
<span class= "fd-calendar__text" role= "button" > 2054 BC - 2064 BC</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2065 BC - 2075 BC</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2076 BC - 2086 BC</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2087 BC - 2097 BC</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class= "fd-calendar" >
<header class= "fd-calendar__header" >
<div class= "fd-calendar__navigation" >
<div class= "fd-calendar__action fd-calendar__action--arrow-left" >
<button type= "button" class= "fd-button fd-button--transparent sap-icon--slim-arrow-left" aria-label= "Previous" aria-selected= "false" ></button>
</div>
<div class= "fd-calendar__action" >
<button type= "button" class= "fd-button fd-button--transparent" aria-selected= "false" > January</button>
</div>
<div class= "fd-calendar__action" >
<button type= "button" class= "fd-button fd-button--transparent" aria-selected= "false" > 2018</button>
</div>
<div class= "fd-calendar__action fd-calendar__action--arrow-right" >
<button type= "button" class= "fd-button fd-button--transparent sap-icon--slim-arrow-right" aria-label= "Next" aria-selected= "false" ></button>
</div>
</div>
</header>
<div class= "fd-calendar__content fd-calendar__content--years " id= "57YUZ524" >
<table class= "fd-calendar__table" role= "grid" >
<tbody class= "fd-calendar__group" >
<tr class= "fd-calendar__row" >
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2010 Showa - 2020 Showa</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--current is-active" >
<span class= "fd-calendar__text" role= "button" > 2021 Showa - 2031 Showa</span></td>
</tr>
<tr class= "fd-calendar__row is-active" >
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2032 Showa - 2042 Showa</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2043 Showa - 2053 Showa</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Example calendar in compact mode
S
M
T
W
T
F
S
1
30
31
1
2
3
4
5
2
6
7
8
9
10
11
12
3
13
14
15
16
17
18
19
4
20
21
22
23
24
25
26
5
27
28
1
2
3
4
5
<div class= "fd-calendar fd-calendar--compact" >
<header class= "fd-calendar__header" >
<div class= "fd-calendar__navigation" >
<div class= "fd-calendar__action fd-calendar__action--arrow-left" >
<button type= "button" class= "fd-button fd-button--compact fd-button--transparent sap-icon--slim-arrow-left" aria-label= "Previous" ></button>
</div>
<div class= "fd-calendar__action" >
<button type= "button" class= "fd-button fd-button--compact fd-button--transparent" aria-selected= "false" aria-expanded= "false" aria-controls= "fm3cr569" > January</button>
</div>
<div class= "fd-calendar__action" >
<button type= "button" class= "fd-button fd-button--compact fd-button--transparent" aria-selected= "true" aria-expanded= "true" aria-controls= "bufLe361" > 2018</button>
</div>
<div class= "fd-calendar__action fd-calendar__action--arrow-right" >
<button type= "button" class= "fd-button fd-button--compact fd-button--transparent sap-icon--slim-arrow-right" aria-label= "Next" ></button>
</div>
</div>
</header>
<div class= "fd-calendar__content fd-calendar__content--dates" id= "IO0cp341" >
<table class= "fd-calendar__table" role= "grid" >
<thead class= "fd-calendar__group" >
<tr class= "fd-calendar__row" >
<th class= "fd-calendar__item fd-calendar__item--side-helper" ></th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > S</span>
</th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > M</span>
</th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > T</span>
</th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > W</span>
</th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > T</span>
</th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > F</span>
</th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > S</span>
</th>
</tr>
</thead>
<tbody class= "fd-calendar__group" >
<tr class= "fd-calendar__row" >
<td class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > 1</span>
</td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--other-month" >
<span class= "fd-calendar__text" role= "button" > 30</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--other-month" >
<span class= "fd-calendar__text" role= "button" > 31</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 1</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 3</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend" >
<span class= "fd-calendar__text" role= "button" > 4</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend" >
<span class= "fd-calendar__text" role= "button" > 5</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > 2</span>
</td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 6</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 7</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 8</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 9</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 10</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend" >
<span class= "fd-calendar__text" role= "button" > 11</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend" >
<span class= "fd-calendar__text" role= "button" > 12</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > 3</span>
</td>
<td role= "gridcell" class= "fd-calendar__item is-active fd-calendar__item--range" >
<span class= "fd-calendar__text" role= "button" > 13</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--range" >
<span class= "fd-calendar__text" role= "button" > 14</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--range" >
<span class= "fd-calendar__text" role= "button" > 15</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--range" >
<span class= "fd-calendar__text" role= "button" > 16</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--range" >
<span class= "fd-calendar__text" role= "button" > 17</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend fd-calendar__item--current is-active fd-calendar__special-day--1" >
<span class= "fd-calendar__text" role= "button" > 18</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend fd-calendar__special-day--1" >
<span class= "fd-calendar__text" role= "button" > 19</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > 4</span>
</td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 20</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 21</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 22</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 23</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__special-day--3" >
<span class= "fd-calendar__text" role= "button" > 24</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend fd-calendar__special-day--3" >
<span class= "fd-calendar__text" role= "button" > 25</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend" >
<span class= "fd-calendar__text" role= "button" > 26</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > 5</span>
</td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 27</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 28</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--other-month" >
<span class= "fd-calendar__text" role= "button" > 1</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--other-month" >
<span class= "fd-calendar__text" role= "button" > 2</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--other-month" >
<span class= "fd-calendar__text" role= "button" > 3</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--other-month" >
<span class= "fd-calendar__text" role= "button" > 4</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--other-month" >
<span class= "fd-calendar__text" role= "button" > 5</span></td>
</tr>
</tbody>
</table>
</div>
</div>
Example calendar in mobile mode lanscape orientation
On mobile devices calendar is composed into Dialog window taking full width and height of the device.
For landscape orientation no Dialog header element should be used. Dialog footer element is optional.
Remember that if .fd-calendar__close-button is placed inside navigation section of the calendar then:
.fd-calendar__navigation - requires .fd-calendar__navigation--main modifier.fd-calendar__close-button - requires .fd-calendar__close-button--navigation modifier
S
M
T
W
T
F
S
1
29
30
31
1
2
3
4
2
5
6
7
8
9
10
11
3
12
13
14
15
16
17
18
4
19
20
21
22
23
24
25
5
26
27
28
29
30
1
2
<div class= "fd-dialog-docs-static fd-calendar-mobile-docs-static--landscape fd-dialog fd-dialog--active" >
<div class= "fd-dialog__content fd-dialog__content--s fd-dialog__content--mobile" >
<div class= "fd-dialog__body fd-dialog__body--no-vertical-padding" >
<div class= "fd-calendar fd-calendar--mobile-landscape" >
<header class= "fd-calendar__header" >
<div class= "fd-calendar__navigation fd-calendar__navigation--main" >
<div class= "fd-calendar__action fd-calendar__action--arrow-left" >
<button type= "button" class= "fd-button fd-button--transparent sap-icon--slim-arrow-left" aria-label= "Previous" aria-selected= "false" ></button>
</div>
<div class= "fd-calendar__action" >
<button type= "button" class= "fd-button fd-button--transparent" aria-selected= "false" > January</button>
</div>
<div class= "fd-calendar__action" >
<button type= "button" class= "fd-button fd-button--transparent" aria-selected= "false" > 2018</button>
</div>
<div class= "fd-calendar__action fd-calendar__action--arrow-right" >
<button type= "button" class= "fd-button fd-button--transparent sap-icon--slim-arrow-right" aria-label= "Next" aria-selected= "false" ></button>
</div>
<button type= "button" class= "fd-button fd-button--transparent fd-calendar__close-button fd-calendar__close-button--navigation" aria-label= "Close" aria-selected= "false" ></button>
</div>
</header>
<div class= "fd-calendar__content fd-calendar__content--dates" id= "Xh8Gr283" >
<table class= "fd-calendar__table" role= "grid" >
<thead class= "fd-calendar__group" >
<tr class= "fd-calendar__row" >
<th class= "fd-calendar__item fd-calendar__item--side-helper" ></th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > S</span>
</th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > M</span>
</th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > T</span>
</th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > W</span>
</th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > T</span>
</th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > F</span>
</th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > S</span>
</th>
</tr>
</thead>
<tbody class= "fd-calendar__group" >
<tr class= "fd-calendar__row" >
<td class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > 1</span>
</td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--other-month" >
<span class= "fd-calendar__text" role= "button" > 29</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--other-month" >
<span class= "fd-calendar__text" role= "button" > 30</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--other-month" >
<span class= "fd-calendar__text" role= "button" > 31</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 1</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend" >
<span class= "fd-calendar__text" role= "button" > 3</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend" >
<span class= "fd-calendar__text" role= "button" > 4</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > 2</span>
</td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 5</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--current" >
<span class= "fd-calendar__text" role= "button" > 6</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 7</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 8</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 9</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend" >
<span class= "fd-calendar__text" role= "button" > 10</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend" >
<span class= "fd-calendar__text" role= "button" > 11</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > 3</span>
</td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 12</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 13</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 14</span></td>
<td role= "gridcell" class= "fd-calendar__item is-active" >
<span class= "fd-calendar__text" role= "button" > 15</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 16</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend" >
<span class= "fd-calendar__text" role= "button" > 17</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend" >
<span class= "fd-calendar__text" role= "button" > 18</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > 4</span>
</td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 19</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 20</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 21</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 22</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 23</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend" >
<span class= "fd-calendar__text" role= "button" > 24</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend" >
<span class= "fd-calendar__text" role= "button" > 25</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > 5</span>
</td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 26</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 27</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 28</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 29</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 30</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--other-month" >
<span class= "fd-calendar__text" role= "button" > 1</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--other-month" >
<span class= "fd-calendar__text" role= "button" > 2</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<footer class= "fd-dialog__footer fd-bar fd-bar--footer fd-bar--cosy" >
<div class= "fd-bar__right" >
<div class= "fd-bar__element" >
<button class= "fd-dialog__decisive-button fd-button fd-button--emphasized" aria-selected= "false" >
OK
</button>
</div>
</div>
</footer>
</div>
</div>
Example calendar in mobile mode portrait orientation
On mobile devices calendar is composed into Dialog window taking full width and height of the device.
For portrait orientation Dialog header should always be used, but footer remains optional.
S
M
T
W
T
F
S
1
29
30
31
1
2
3
4
2
5
6
7
8
9
10
11
3
12
13
14
15
16
17
18
4
19
20
21
22
23
24
25
5
26
27
28
29
30
1
2
<div class= "fd-dialog-docs-static fd-calendar-mobile-docs-static--portrait fd-dialog fd-dialog--active" >
<div class= "fd-dialog__content fd-dialog__content--s fd-dialog__content--mobile" >
<header class= "fd-dialog__header fd-bar fd-bar--header fd-bar--cosy" >
<div class= "fd-bar__left" >
<div class= "fd-bar__element" >
<h3 class= "fd-dialog__title" >
Pick a date
</h3>
</div>
</div>
<div class= "fd-bar__right" >
<div class= "fd-bar__element" >
<button type= "button" class= "fd-button fd-button--transparent fd-calendar__close-button" aria-label= "Close" aria-selected= "false" ></button>
</div>
</div>
</header>
<div class= "fd-dialog__body fd-dialog__body--no-vertical-padding" >
<div class= "fd-calendar fd-calendar--mobile-portrait" >
<header class= "fd-calendar__header" >
<div class= "fd-calendar__navigation" >
<div class= "fd-segmented-button" role= "group" aria-label= "Switch Date/Time picker" >
<button class= "fd-button is-active" aria-selected= "true" > Date</button>
<button class= "fd-button" aria-selected= "false" > Time</button>
</div>
</div>
<div class= "fd-calendar__navigation" >
<div class= "fd-calendar__action fd-calendar__action--arrow-left" >
<button type= "button" class= "fd-button fd-button--transparent sap-icon--slim-arrow-left" aria-label= "Previous" aria-selected= "false" ></button>
</div>
<div class= "fd-calendar__action" >
<button type= "button" class= "fd-button fd-button--transparent" aria-selected= "false" > January</button>
</div>
<div class= "fd-calendar__action" >
<button type= "button" class= "fd-button fd-button--transparent" aria-selected= "false" > 2018</button>
</div>
<div class= "fd-calendar__action fd-calendar__action--arrow-right" >
<button type= "button" class= "fd-button fd-button--transparent sap-icon--slim-arrow-right" aria-label= "Next" aria-selected= "false" ></button>
</div>
</div>
</header>
<div class= "fd-calendar__content fd-calendar__content--dates" id= "Xh8Gr283" >
<table class= "fd-calendar__table" role= "grid" >
<thead class= "fd-calendar__group" >
<tr class= "fd-calendar__row" >
<th class= "fd-calendar__item fd-calendar__item--side-helper" ></th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > S</span>
</th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > M</span>
</th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > T</span>
</th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > W</span>
</th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > T</span>
</th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > F</span>
</th>
<th class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > S</span>
</th>
</tr>
</thead>
<tbody class= "fd-calendar__group" >
<tr class= "fd-calendar__row" >
<td class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > 1</span>
</td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--other-month" >
<span class= "fd-calendar__text" role= "button" > 29</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--other-month" >
<span class= "fd-calendar__text" role= "button" > 30</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--other-month" >
<span class= "fd-calendar__text" role= "button" > 31</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 1</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 2</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend" >
<span class= "fd-calendar__text" role= "button" > 3</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend" >
<span class= "fd-calendar__text" role= "button" > 4</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > 2</span>
</td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 5</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--current" >
<span class= "fd-calendar__text" role= "button" > 6</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 7</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 8</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 9</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend" >
<span class= "fd-calendar__text" role= "button" > 10</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend" >
<span class= "fd-calendar__text" role= "button" > 11</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > 3</span>
</td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 12</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 13</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 14</span></td>
<td role= "gridcell" class= "fd-calendar__item is-active" >
<span class= "fd-calendar__text" role= "button" > 15</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 16</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend" >
<span class= "fd-calendar__text" role= "button" > 17</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend" >
<span class= "fd-calendar__text" role= "button" > 18</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > 4</span>
</td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 19</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 20</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 21</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 22</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 23</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend" >
<span class= "fd-calendar__text" role= "button" > 24</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--weekend" >
<span class= "fd-calendar__text" role= "button" > 25</span></td>
</tr>
<tr class= "fd-calendar__row" >
<td class= "fd-calendar__item fd-calendar__item--side-helper" >
<span class= "fd-calendar__text" role= "button" > 5</span>
</td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 26</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 27</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 28</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 29</span></td>
<td role= "gridcell" class= "fd-calendar__item" >
<span class= "fd-calendar__text" role= "button" > 30</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--other-month" >
<span class= "fd-calendar__text" role= "button" > 1</span></td>
<td role= "gridcell" class= "fd-calendar__item fd-calendar__item--other-month" >
<span class= "fd-calendar__text" role= "button" > 2</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<footer class= "fd-dialog__footer fd-bar fd-bar--footer fd-bar--cosy" >
<div class= "fd-bar__right" >
<div class= "fd-bar__element" >
<button class= "fd-dialog__decisive-button fd-button fd-button--emphasized" aria-selected= "false" >
OK
</button>
</div>
</div>
</footer>
</div>
</div>