@patternfly/patternfly
Version:
Assets, source, tooling, and content for PatternFly 4
1,474 lines (1,455 loc) • 59 kB
Markdown
---
id: 'Calendar month'
section: components
subsection: date-and-time
cssPrefix: pf-v5-c-calendar-month
---## Examples
### Date selected
```html
<div class="pf-v5-c-calendar-month">
<div class="pf-v5-c-calendar-month__header">
<div class="pf-v5-c-calendar-month__header-nav-control pf-m-prev-month">
<button
class="pf-v5-c-button pf-m-plain"
type="button"
aria-label="Previous month"
>
<i class="fas fa-angle-left" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-input-group">
<div class="pf-v5-c-input-group__item pf-m-fill">
<div class="pf-v5-c-calendar-month__header-month">
<div class="pf-v5-c-select">
<span
id="calendar-month-date-selected-month-select-label"
hidden
>Month</span>
<button
class="pf-v5-c-select__toggle"
type="button"
id="calendar-month-date-selected-month-select-toggle"
aria-haspopup="true"
aria-expanded="false"
aria-labelledby="calendar-month-date-selected-month-select-label calendar-month-date-selected-month-select-toggle"
>
<div class="pf-v5-c-select__toggle-wrapper">
<span class="pf-v5-c-select__toggle-text">October</span>
</div>
<span class="pf-v5-c-select__toggle-arrow">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</button>
<ul
class="pf-v5-c-select__menu"
role="listbox"
aria-labelledby="calendar-month-date-selected-month-select-label"
hidden
>
<li role="presentation">
<button class="pf-v5-c-select__menu-item" role="option">Running</button>
</li>
<li role="presentation">
<button
class="pf-v5-c-select__menu-item pf-m-selected"
role="option"
aria-selected="true"
>
Stopped
<span class="pf-v5-c-select__menu-item-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="pf-v5-c-select__menu-item" role="option">Down</button>
</li>
<li role="presentation">
<button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
</li>
<li role="presentation">
<button
class="pf-v5-c-select__menu-item"
role="option"
>Needs maintenance</button>
</li>
</ul>
</div>
</div>
</div>
<div class="pf-v5-c-input-group__item">
<div class="pf-v5-c-calendar-month__header-year">
<span class="pf-v5-c-form-control">
<input
type="number"
value="2020"
id="calendar-month-date-selected-year"
aria-label="Select year"
/>
</span>
</div>
</div>
</div>
<div class="pf-v5-c-calendar-month__header-nav-control pf-m-next-month">
<button
class="pf-v5-c-button pf-m-plain"
type="button"
aria-label="Next month"
>
<i class="fas fa-angle-right" aria-hidden="true"></i>
</button>
</div>
</div>
<table class="pf-v5-c-calendar-month__calendar">
<thead class="pf-v5-c-calendar-month__days" scope="col">
<tr class="pf-v5-c-calendar-month__days-row">
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Sunday</span>
<span aria-hidden="true">S</span>
</th>
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Monday</span>
<span aria-hidden="true">M</span>
</th>
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Tuesday</span>
<span aria-hidden="true">T</span>
</th>
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Wednesday</span>
<span aria-hidden="true">W</span>
</th>
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Thursday</span>
<span aria-hidden="true">T</span>
</th>
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Friday</span>
<span aria-hidden="true">F</span>
</th>
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Saturday</span>
<span aria-hidden="true">S</span>
</th>
</tr>
</thead>
<tbody class="pf-v5-c-calendar-month__dates">
<tr class="pf-v5-c-calendar-month__dates-row">
<td class="pf-v5-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="29 October 2020"
>29</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="30 October 2020"
>30</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="1 October 2020"
>1</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="2 October 2020"
>2</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="3 October 2020"
>3</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="4 October 2020"
>4</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="5 October 2020"
>5</button>
</td>
</tr>
<tr class="pf-v5-c-calendar-month__dates-row">
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="6 October 2020"
>6</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="7 October 2020"
>7</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="8 October 2020"
>8</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-current">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="9 October 2020"
>9</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="10 October 2020"
>10</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="11 October 2020"
>11</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="12 October 2020"
>12</button>
</td>
</tr>
<tr class="pf-v5-c-calendar-month__dates-row">
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="13 October 2020"
>13</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="14 October 2020"
>14</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="15 October 2020"
>15</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="16 October 2020"
>16</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="17 October 2020"
>17</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="18 October 2020"
>18</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="19 October 2020"
>19</button>
</td>
</tr>
<tr class="pf-v5-c-calendar-month__dates-row">
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="20 October 2020"
>20</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-selected">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="21 October 2020"
>21</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="22 October 2020"
>22</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="23 October 2020"
>23</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="24 October 2020"
>24</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="25 October 2020"
>25</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="26 October 2020"
>26</button>
</td>
</tr>
<tr class="pf-v5-c-calendar-month__dates-row">
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="27 October 2020"
>27</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="28 October 2020"
>28</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="29 October 2020"
>29</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="30 October 2020"
>30</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="31 October 2020"
>31</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="1 October 2020"
>1</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="2 October 2020"
>2</button>
</td>
</tr>
</tbody>
</table>
</div>
```
### Range start date selected, end date hovered
```html
<div class="pf-v5-c-calendar-month">
<div class="pf-v5-c-calendar-month__header">
<div class="pf-v5-c-calendar-month__header-nav-control pf-m-prev-month">
<button
class="pf-v5-c-button pf-m-plain"
type="button"
aria-label="Previous month"
>
<i class="fas fa-angle-left" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-input-group">
<div class="pf-v5-c-input-group__item pf-m-fill">
<div class="pf-v5-c-calendar-month__header-month">
<div class="pf-v5-c-select">
<span
id="calendar-month-range-start-date-selected-month-select-label"
hidden
>Month</span>
<button
class="pf-v5-c-select__toggle"
type="button"
id="calendar-month-range-start-date-selected-month-select-toggle"
aria-haspopup="true"
aria-expanded="false"
aria-labelledby="calendar-month-range-start-date-selected-month-select-label calendar-month-range-start-date-selected-month-select-toggle"
>
<div class="pf-v5-c-select__toggle-wrapper">
<span class="pf-v5-c-select__toggle-text">October</span>
</div>
<span class="pf-v5-c-select__toggle-arrow">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</button>
<ul
class="pf-v5-c-select__menu"
role="listbox"
aria-labelledby="calendar-month-range-start-date-selected-month-select-label"
hidden
>
<li role="presentation">
<button class="pf-v5-c-select__menu-item" role="option">Running</button>
</li>
<li role="presentation">
<button
class="pf-v5-c-select__menu-item pf-m-selected"
role="option"
aria-selected="true"
>
Stopped
<span class="pf-v5-c-select__menu-item-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="pf-v5-c-select__menu-item" role="option">Down</button>
</li>
<li role="presentation">
<button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
</li>
<li role="presentation">
<button
class="pf-v5-c-select__menu-item"
role="option"
>Needs maintenance</button>
</li>
</ul>
</div>
</div>
</div>
<div class="pf-v5-c-input-group__item">
<div class="pf-v5-c-calendar-month__header-year">
<span class="pf-v5-c-form-control">
<input
type="number"
value="2020"
id="calendar-month-range-start-date-selected-year"
aria-label="Select year"
/>
</span>
</div>
</div>
</div>
<div class="pf-v5-c-calendar-month__header-nav-control pf-m-next-month">
<button
class="pf-v5-c-button pf-m-plain"
type="button"
aria-label="Next month"
>
<i class="fas fa-angle-right" aria-hidden="true"></i>
</button>
</div>
</div>
<table class="pf-v5-c-calendar-month__calendar">
<thead class="pf-v5-c-calendar-month__days" scope="col">
<tr class="pf-v5-c-calendar-month__days-row">
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Sunday</span>
<span aria-hidden="true">S</span>
</th>
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Monday</span>
<span aria-hidden="true">M</span>
</th>
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Tuesday</span>
<span aria-hidden="true">T</span>
</th>
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Wednesday</span>
<span aria-hidden="true">W</span>
</th>
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Thursday</span>
<span aria-hidden="true">T</span>
</th>
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Friday</span>
<span aria-hidden="true">F</span>
</th>
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Saturday</span>
<span aria-hidden="true">S</span>
</th>
</tr>
</thead>
<tbody class="pf-v5-c-calendar-month__dates">
<tr class="pf-v5-c-calendar-month__dates-row">
<td class="pf-v5-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="29 October 2020"
>29</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="30 October 2020"
>30</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="1 October 2020"
>1</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="2 October 2020"
>2</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="3 October 2020"
>3</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="4 October 2020"
>4</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="5 October 2020"
>5</button>
</td>
</tr>
<tr class="pf-v5-c-calendar-month__dates-row">
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="6 October 2020"
>6</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="7 October 2020"
>7</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="8 October 2020"
>8</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-current">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="9 October 2020"
>9</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="10 October 2020"
>10</button>
</td>
<td
class="pf-v5-c-calendar-month__dates-cell pf-m-selected pf-m-start-range pf-m-in-range"
>
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="11 October 2020"
>11</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="12 October 2020"
>12</button>
</td>
</tr>
<tr class="pf-v5-c-calendar-month__dates-row">
<td class="pf-v5-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="13 October 2020"
>13</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="14 October 2020"
>14</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="15 October 2020"
>15</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="16 October 2020"
>16</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="17 October 2020"
>17</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="18 October 2020"
>18</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="19 October 2020"
>19</button>
</td>
</tr>
<tr class="pf-v5-c-calendar-month__dates-row">
<td
class="pf-v5-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="20 October 2020"
disabled
>20</button>
</td>
<td
class="pf-v5-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="21 October 2020"
disabled
>21</button>
</td>
<td
class="pf-v5-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="22 October 2020"
disabled
>22</button>
</td>
<td
class="pf-v5-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="23 October 2020"
disabled
>23</button>
</td>
<td
class="pf-v5-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="24 October 2020"
disabled
>24</button>
</td>
<td
class="pf-v5-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="25 October 2020"
disabled
>25</button>
</td>
<td
class="pf-v5-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="26 October 2020"
disabled
>26</button>
</td>
</tr>
<tr class="pf-v5-c-calendar-month__dates-row">
<td class="pf-v5-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="27 October 2020"
>27</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="28 October 2020"
>28</button>
</td>
<td
class="pf-v5-c-calendar-month__dates-cell pf-m-selected pf-m-in-range pf-m-end-range"
>
<button
class="pf-v5-c-calendar-month__date pf-m-hover"
type="button"
aria-label="29 October 2020"
>29</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="30 October 2020"
>30</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="31 October 2020"
>31</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="1 October 2020"
>1</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="2 October 2020"
>2</button>
</td>
</tr>
</tbody>
</table>
</div>
```
### Range end date selected, start date focused
```html
<div class="pf-v5-c-calendar-month">
<div class="pf-v5-c-calendar-month__header">
<div class="pf-v5-c-calendar-month__header-nav-control pf-m-prev-month">
<button
class="pf-v5-c-button pf-m-plain"
type="button"
aria-label="Previous month"
>
<i class="fas fa-angle-left" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-input-group">
<div class="pf-v5-c-input-group__item pf-m-fill">
<div class="pf-v5-c-calendar-month__header-month">
<div class="pf-v5-c-select">
<span
id="calendar-month-range-end-date-selected-month-select-label"
hidden
>Month</span>
<button
class="pf-v5-c-select__toggle"
type="button"
id="calendar-month-range-end-date-selected-month-select-toggle"
aria-haspopup="true"
aria-expanded="false"
aria-labelledby="calendar-month-range-end-date-selected-month-select-label calendar-month-range-end-date-selected-month-select-toggle"
>
<div class="pf-v5-c-select__toggle-wrapper">
<span class="pf-v5-c-select__toggle-text">October</span>
</div>
<span class="pf-v5-c-select__toggle-arrow">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</button>
<ul
class="pf-v5-c-select__menu"
role="listbox"
aria-labelledby="calendar-month-range-end-date-selected-month-select-label"
hidden
>
<li role="presentation">
<button class="pf-v5-c-select__menu-item" role="option">Running</button>
</li>
<li role="presentation">
<button
class="pf-v5-c-select__menu-item pf-m-selected"
role="option"
aria-selected="true"
>
Stopped
<span class="pf-v5-c-select__menu-item-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="pf-v5-c-select__menu-item" role="option">Down</button>
</li>
<li role="presentation">
<button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
</li>
<li role="presentation">
<button
class="pf-v5-c-select__menu-item"
role="option"
>Needs maintenance</button>
</li>
</ul>
</div>
</div>
</div>
<div class="pf-v5-c-input-group__item">
<div class="pf-v5-c-calendar-month__header-year">
<span class="pf-v5-c-form-control">
<input
type="number"
value="2020"
id="calendar-month-range-end-date-selected-year"
aria-label="Select year"
/>
</span>
</div>
</div>
</div>
<div class="pf-v5-c-calendar-month__header-nav-control pf-m-next-month">
<button
class="pf-v5-c-button pf-m-plain"
type="button"
aria-label="Next month"
>
<i class="fas fa-angle-right" aria-hidden="true"></i>
</button>
</div>
</div>
<table class="pf-v5-c-calendar-month__calendar">
<thead class="pf-v5-c-calendar-month__days" scope="col">
<tr class="pf-v5-c-calendar-month__days-row">
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Sunday</span>
<span aria-hidden="true">S</span>
</th>
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Monday</span>
<span aria-hidden="true">M</span>
</th>
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Tuesday</span>
<span aria-hidden="true">T</span>
</th>
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Wednesday</span>
<span aria-hidden="true">W</span>
</th>
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Thursday</span>
<span aria-hidden="true">T</span>
</th>
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Friday</span>
<span aria-hidden="true">F</span>
</th>
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Saturday</span>
<span aria-hidden="true">S</span>
</th>
</tr>
</thead>
<tbody class="pf-v5-c-calendar-month__dates">
<tr class="pf-v5-c-calendar-month__dates-row">
<td class="pf-v5-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="29 October 2020"
>29</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="30 October 2020"
>30</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="1 October 2020"
>1</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="2 October 2020"
>2</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="3 October 2020"
>3</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="4 October 2020"
>4</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="5 October 2020"
>5</button>
</td>
</tr>
<tr class="pf-v5-c-calendar-month__dates-row">
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="6 October 2020"
>6</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="7 October 2020"
>7</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="8 October 2020"
>8</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-current">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="9 October 2020"
>9</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="10 October 2020"
>10</button>
</td>
<td
class="pf-v5-c-calendar-month__dates-cell pf-m-selected pf-m-start-range pf-m-in-range"
>
<button
class="pf-v5-c-calendar-month__date pf-m-focus"
type="button"
aria-label="11 October 2020"
>11</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="12 October 2020"
>12</button>
</td>
</tr>
<tr class="pf-v5-c-calendar-month__dates-row">
<td class="pf-v5-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="13 October 2020"
>13</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="14 October 2020"
>14</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="15 October 2020"
>15</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="16 October 2020"
>16</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="17 October 2020"
>17</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="18 October 2020"
>18</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="19 October 2020"
>19</button>
</td>
</tr>
<tr class="pf-v5-c-calendar-month__dates-row">
<td
class="pf-v5-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="20 October 2020"
disabled
>20</button>
</td>
<td
class="pf-v5-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="21 October 2020"
disabled
>21</button>
</td>
<td
class="pf-v5-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="22 October 2020"
disabled
>22</button>
</td>
<td
class="pf-v5-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="23 October 2020"
disabled
>23</button>
</td>
<td
class="pf-v5-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="24 October 2020"
disabled
>24</button>
</td>
<td
class="pf-v5-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="25 October 2020"
disabled
>25</button>
</td>
<td
class="pf-v5-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="26 October 2020"
disabled
>26</button>
</td>
</tr>
<tr class="pf-v5-c-calendar-month__dates-row">
<td class="pf-v5-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="27 October 2020"
>27</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="28 October 2020"
>28</button>
</td>
<td
class="pf-v5-c-calendar-month__dates-cell pf-m-selected pf-m-in-range pf-m-end-range"
>
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="29 October 2020"
>29</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="30 October 2020"
>30</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="31 October 2020"
>31</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="1 October 2020"
>1</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="2 October 2020"
>2</button>
</td>
</tr>
</tbody>
</table>
</div>
```
### Range start and end dates selected
```html
<div class="pf-v5-c-calendar-month">
<div class="pf-v5-c-calendar-month__header">
<div class="pf-v5-c-calendar-month__header-nav-control pf-m-prev-month">
<button
class="pf-v5-c-button pf-m-plain"
type="button"
aria-label="Previous month"
>
<i class="fas fa-angle-left" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-input-group">
<div class="pf-v5-c-input-group__item pf-m-fill">
<div class="pf-v5-c-calendar-month__header-month">
<div class="pf-v5-c-select">
<span
id="calendar-month-range-start-and-end-dates-selected-month-select-label"
hidden
>Month</span>
<button
class="pf-v5-c-select__toggle"
type="button"
id="calendar-month-range-start-and-end-dates-selected-month-select-toggle"
aria-haspopup="true"
aria-expanded="false"
aria-labelledby="calendar-month-range-start-and-end-dates-selected-month-select-label calendar-month-range-start-and-end-dates-selected-month-select-toggle"
>
<div class="pf-v5-c-select__toggle-wrapper">
<span class="pf-v5-c-select__toggle-text">October</span>
</div>
<span class="pf-v5-c-select__toggle-arrow">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</button>
<ul
class="pf-v5-c-select__menu"
role="listbox"
aria-labelledby="calendar-month-range-start-and-end-dates-selected-month-select-label"
hidden
>
<li role="presentation">
<button class="pf-v5-c-select__menu-item" role="option">Running</button>
</li>
<li role="presentation">
<button
class="pf-v5-c-select__menu-item pf-m-selected"
role="option"
aria-selected="true"
>
Stopped
<span class="pf-v5-c-select__menu-item-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button class="pf-v5-c-select__menu-item" role="option">Down</button>
</li>
<li role="presentation">
<button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
</li>
<li role="presentation">
<button
class="pf-v5-c-select__menu-item"
role="option"
>Needs maintenance</button>
</li>
</ul>
</div>
</div>
</div>
<div class="pf-v5-c-input-group__item">
<div class="pf-v5-c-calendar-month__header-year">
<span class="pf-v5-c-form-control">
<input
type="number"
value="2020"
id="calendar-month-range-start-and-end-dates-selected-year"
aria-label="Select year"
/>
</span>
</div>
</div>
</div>
<div class="pf-v5-c-calendar-month__header-nav-control pf-m-next-month">
<button
class="pf-v5-c-button pf-m-plain"
type="button"
aria-label="Next month"
>
<i class="fas fa-angle-right" aria-hidden="true"></i>
</button>
</div>
</div>
<table class="pf-v5-c-calendar-month__calendar">
<thead class="pf-v5-c-calendar-month__days" scope="col">
<tr class="pf-v5-c-calendar-month__days-row">
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Sunday</span>
<span aria-hidden="true">S</span>
</th>
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Monday</span>
<span aria-hidden="true">M</span>
</th>
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Tuesday</span>
<span aria-hidden="true">T</span>
</th>
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Wednesday</span>
<span aria-hidden="true">W</span>
</th>
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Thursday</span>
<span aria-hidden="true">T</span>
</th>
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Friday</span>
<span aria-hidden="true">F</span>
</th>
<th class="pf-v5-c-calendar-month__day">
<span class="pf-v5-screen-reader">Saturday</span>
<span aria-hidden="true">S</span>
</th>
</tr>
</thead>
<tbody class="pf-v5-c-calendar-month__dates">
<tr class="pf-v5-c-calendar-month__dates-row">
<td class="pf-v5-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="29 October 2020"
>29</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="30 October 2020"
>30</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="1 October 2020"
>1</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="2 October 2020"
>2</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="3 October 2020"
>3</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="4 October 2020"
>4</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="5 October 2020"
>5</button>
</td>
</tr>
<tr class="pf-v5-c-calendar-month__dates-row">
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="6 October 2020"
>6</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="7 October 2020"
>7</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="8 October 2020"
>8</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-current">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="9 October 2020"
>9</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="10 October 2020"
>10</button>
</td>
<td
class="pf-v5-c-calendar-month__dates-cell pf-m-selected pf-m-start-range pf-m-in-range"
>
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="11 October 2020"
>11</button>
</td>
<td class="pf-v5-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v5-c-calendar-month__date"
type="button"
aria-label="12 October 2020"
>12</button>