Calendar

fiori 3 a11y themeable

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

These are classes used to describe the general look of calendar.

.fd-calendar--compact

Class used to style calendar in compact mode

.fd-calendar--mobile-landscape

Class used to style calendar for mobile devices in landscape orientation.

.fd-calendar--mobile-portrait

Class used to style calendar for mobile devices in portrait orientation.

.fd-calendar__content--months

Class used to style calendar content when calendar displays months

.fd-calendar__content--years

Class used to style calendar content when calendar displays years

.fd-calendar__content--screen-reader-only

Class used to style calendar content when only readable to screen readers

These are classes used to describe the look of calendar action buttons.

.fd-calendar__navigation--main

Class used to limit main navigation width on mobile devices in landscape orientation and create space for optional close button

.fd-calendar__action--arrow-left

Class used to style "Previous" navigation button

.fd-calendar__action--arrow-right

Class used to style "Next" navigation button

.fd-calendar__close-button--navigation

Class used to correctly place close button inside calendar navigation panel

Calendar grid elements modifiers

These are classes used to describe the look of calendar grid element.

.fd-calendar__item

Base class used to represent calendar cell

.fd-calendar__item--weekend

Class used to style weekend days

.fd-calendar__item--other-month

Class used to style days outside of current month

.fd-calendar__item--current

Class used to style current day, month or year

.fd-calendar__item--range

Class used to style calendar elements placed between range start and end elements

.fd-calendar__item--side-helper

Class used for styling calendar grid side-helpers like week number or day shortcut

Calendar elements state modifiers

These are classes used to describe state of calendar grid element.

.is-focus

Class used to style focused calendar elements

.is-active

Class used to style calendar elements selected by user

.is-disabled

Class used to style disabled calendar elements

Calendar special days

These 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

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 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"></button>
                </div>
                <div class="fd-calendar__action">
                    <button type="button" class="fd-button fd-button--transparent">January</button>
                </div>
                <div class="fd-calendar__action">
                    <button type="button" class="fd-button fd-button--transparent">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"></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 aria-selected="true" 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 aria-selected="true" 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 aria-live="polite" class="fd-calendar__content fd-calendar__content--screen-reader-only">Use arrow keys to navigate dates</div>
    </div>
</div>

Example calendar with months

January	February	March
April	May	June
July	August	September
October	November	December

<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"></button>
                </div>
                <div class="fd-calendar__action">
                    <button type="button" class="fd-button fd-button--transparent">January</button>
                </div>
                <div class="fd-calendar__action">
                    <button type="button" class="fd-button fd-button--transparent">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"></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 aria-selected="true" 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 aria-live="polite" class="fd-calendar__content fd-calendar__content--screen-reader-only">Use arrow keys to navigate dates</div>
    </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; flex-wrap: wrap;">
    <div class="fd-calendar" style="margin-bottom: 1rem;">
    <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"></button>
    		</div>
    		<div class="fd-calendar__action">
    			<button type="button" class="fd-button fd-button--transparent">January</button>
    		</div>
    		<div class="fd-calendar__action">
    			<button type="button" class="fd-button fd-button--transparent">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"></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 aria-selected="true" 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 aria-live="polite" class="fd-calendar__content fd-calendar__content--screen-reader-only">Use arrow keys to navigate dates</div>
</div>
    <div class="fd-calendar" style="margin-bottom: 1rem;">
    <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"></button>
    		</div>
    		<div class="fd-calendar__action">
    			<button type="button" class="fd-button fd-button--transparent">January</button>
    		</div>
    		<div class="fd-calendar__action">
    			<button type="button" class="fd-button fd-button--transparent">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"></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 aria-selected="true" role="gridcell" class="fd-calendar__item is-active">
                        <span class="fd-calendar__text" role="button">2131 - 2141</span></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div aria-live="polite" class="fd-calendar__content fd-calendar__content--screen-reader-only">Use arrow keys to navigate dates</div>
</div>
</div>

<div style="display: flex; justify-content: space-around; flex-wrap: wrap;">
    <div class="fd-calendar" style="margin-bottom: 1rem;">
    <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"></button>
    		</div>
    		<div class="fd-calendar__action">
    			<button type="button" class="fd-button fd-button--transparent">January</button>
    		</div>
    		<div class="fd-calendar__action">
    			<button type="button" class="fd-button fd-button--transparent">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"></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 aria-selected="true" 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 aria-live="polite" class="fd-calendar__content fd-calendar__content--screen-reader-only">Use arrow keys to navigate dates</div>
</div>
    <div class="fd-calendar" style="margin-bottom: 1rem;">
    <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"></button>
    		</div>
    		<div class="fd-calendar__action">
    			<button type="button" class="fd-button fd-button--transparent">January</button>
    		</div>
    		<div class="fd-calendar__action">
    			<button type="button" class="fd-button fd-button--transparent">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"></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 aria-selected="true" 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 aria-live="polite" class="fd-calendar__content fd-calendar__content--screen-reader-only">Use arrow keys to navigate dates</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 style="display: flex; justify-content: space-around;">
    <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-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-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 aria-selected="true" 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 aria-selected="true" 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 aria-live="polite" class="fd-calendar__content fd-calendar__content--screen-reader-only">Use arrow keys to navigate dates</div>
    </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"></button>
                        </div>
                        <div class="fd-calendar__action">
                            <button type="button" class="fd-button fd-button--transparent">January</button>
                        </div>
                        <div class="fd-calendar__action">
                            <button type="button" class="fd-button fd-button--transparent">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"></button>
                        </div>
                        <button type="button" class="fd-button fd-button--transparent fd-calendar__close-button fd-calendar__close-button--navigation" aria-label="Close"></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 aria-selected="true" 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">
                        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"></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">Date</button>
                            <button class="fd-button">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"></button>
                        </div>
                        <div class="fd-calendar__action">
                            <button type="button" class="fd-button fd-button--transparent">January</button>
                        </div>
                        <div class="fd-calendar__action">
                            <button type="button" class="fd-button fd-button--transparent">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"></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 aria-selected="true" 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 aria-live="polite" class="fd-calendar__content fd-calendar__content--screen-reader-only">Use arrow keys to navigate dates</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">
                        OK
                    </button>
                </div>
            </div>
        </footer>
    </div>
</div>

	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

	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

	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

	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

	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

	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

	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

	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