@patternfly/patternfly
Version:
Assets, source, tooling, and content for PatternFly 4
1,509 lines (1,494 loc) • 52.6 kB
Markdown
---
id: 'Calendar month'
section: components
subsection: date-and-time
cssPrefix: pf-v6-c-calendar-month
---## Examples
### Date selected
```html
<div class="pf-v6-c-calendar-month">
<div class="pf-v6-c-calendar-month__header">
<div class="pf-v6-c-calendar-month__header-nav-control pf-m-prev-month">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Previous month"
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="pf-v6-c-input-group">
<div class="pf-v6-c-input-group__item pf-m-fill">
<div class="pf-v6-c-calendar-month__header-month">
<button
class="pf-v6-c-menu-toggle"
type="button"
aria-expanded="false"
id="calendar-month-date-selected-month-select"
>
<span class="pf-v6-c-menu-toggle__text">October</span>
<span class="pf-v6-c-menu-toggle__controls">
<span class="pf-v6-c-menu-toggle__toggle-icon">
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
</span>
</span>
</button>
</div>
</div>
<div class="pf-v6-c-input-group__item">
<div class="pf-v6-c-calendar-month__header-year">
<span class="pf-v6-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-v6-c-calendar-month__header-nav-control pf-m-next-month">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Next month"
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</button>
</div>
</div>
<table class="pf-v6-c-calendar-month__calendar">
<thead class="pf-v6-c-calendar-month__days" scope="col">
<tr class="pf-v6-c-calendar-month__days-row">
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Sunday</span>
<span aria-hidden="true">S</span>
</th>
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Monday</span>
<span aria-hidden="true">M</span>
</th>
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Tuesday</span>
<span aria-hidden="true">T</span>
</th>
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Wednesday</span>
<span aria-hidden="true">W</span>
</th>
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Thursday</span>
<span aria-hidden="true">T</span>
</th>
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Friday</span>
<span aria-hidden="true">F</span>
</th>
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Saturday</span>
<span aria-hidden="true">S</span>
</th>
</tr>
</thead>
<tbody class="pf-v6-c-calendar-month__dates">
<tr class="pf-v6-c-calendar-month__dates-row">
<td class="pf-v6-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="29 October 2020"
>29</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="30 October 2020"
>30</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="1 October 2020"
>1</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="2 October 2020"
>2</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="3 October 2020"
>3</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="4 October 2020"
>4</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="5 October 2020"
>5</button>
</td>
</tr>
<tr class="pf-v6-c-calendar-month__dates-row">
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="6 October 2020"
>6</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="7 October 2020"
>7</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="8 October 2020"
>8</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-current">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="9 October 2020"
>9</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="10 October 2020"
>10</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="11 October 2020"
>11</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="12 October 2020"
>12</button>
</td>
</tr>
<tr class="pf-v6-c-calendar-month__dates-row">
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="13 October 2020"
>13</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="14 October 2020"
>14</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="15 October 2020"
>15</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="16 October 2020"
>16</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="17 October 2020"
>17</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="18 October 2020"
>18</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="19 October 2020"
>19</button>
</td>
</tr>
<tr class="pf-v6-c-calendar-month__dates-row">
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="20 October 2020"
>20</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-selected">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="21 October 2020"
>21</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="22 October 2020"
>22</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="23 October 2020"
>23</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="24 October 2020"
>24</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="25 October 2020"
>25</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="26 October 2020"
>26</button>
</td>
</tr>
<tr class="pf-v6-c-calendar-month__dates-row">
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="27 October 2020"
>27</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="28 October 2020"
>28</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="29 October 2020"
>29</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="30 October 2020"
>30</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="31 October 2020"
>31</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="1 October 2020"
>1</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v6-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-v6-c-calendar-month">
<div class="pf-v6-c-calendar-month__header">
<div class="pf-v6-c-calendar-month__header-nav-control pf-m-prev-month">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Previous month"
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="pf-v6-c-input-group">
<div class="pf-v6-c-input-group__item pf-m-fill">
<div class="pf-v6-c-calendar-month__header-month">
<button
class="pf-v6-c-menu-toggle"
type="button"
aria-expanded="false"
id="calendar-month-range-start-date-selected-month-select"
>
<span class="pf-v6-c-menu-toggle__text">October</span>
<span class="pf-v6-c-menu-toggle__controls">
<span class="pf-v6-c-menu-toggle__toggle-icon">
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
</span>
</span>
</button>
</div>
</div>
<div class="pf-v6-c-input-group__item">
<div class="pf-v6-c-calendar-month__header-year">
<span class="pf-v6-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-v6-c-calendar-month__header-nav-control pf-m-next-month">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Next month"
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</button>
</div>
</div>
<table class="pf-v6-c-calendar-month__calendar">
<thead class="pf-v6-c-calendar-month__days" scope="col">
<tr class="pf-v6-c-calendar-month__days-row">
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Sunday</span>
<span aria-hidden="true">S</span>
</th>
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Monday</span>
<span aria-hidden="true">M</span>
</th>
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Tuesday</span>
<span aria-hidden="true">T</span>
</th>
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Wednesday</span>
<span aria-hidden="true">W</span>
</th>
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Thursday</span>
<span aria-hidden="true">T</span>
</th>
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Friday</span>
<span aria-hidden="true">F</span>
</th>
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Saturday</span>
<span aria-hidden="true">S</span>
</th>
</tr>
</thead>
<tbody class="pf-v6-c-calendar-month__dates">
<tr class="pf-v6-c-calendar-month__dates-row">
<td class="pf-v6-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="29 October 2020"
>29</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="30 October 2020"
>30</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="1 October 2020"
>1</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="2 October 2020"
>2</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="3 October 2020"
>3</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="4 October 2020"
>4</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="5 October 2020"
>5</button>
</td>
</tr>
<tr class="pf-v6-c-calendar-month__dates-row">
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="6 October 2020"
>6</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="7 October 2020"
>7</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="8 October 2020"
>8</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-current">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="9 October 2020"
>9</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="10 October 2020"
>10</button>
</td>
<td
class="pf-v6-c-calendar-month__dates-cell pf-m-selected pf-m-start-range pf-m-in-range"
>
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="11 October 2020"
>11</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="12 October 2020"
>12</button>
</td>
</tr>
<tr class="pf-v6-c-calendar-month__dates-row">
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="13 October 2020"
>13</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="14 October 2020"
>14</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="15 October 2020"
>15</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="16 October 2020"
>16</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="17 October 2020"
>17</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="18 October 2020"
>18</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="19 October 2020"
>19</button>
</td>
</tr>
<tr class="pf-v6-c-calendar-month__dates-row">
<td
class="pf-v6-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="20 October 2020"
disabled
>20</button>
</td>
<td
class="pf-v6-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="21 October 2020"
disabled
>21</button>
</td>
<td
class="pf-v6-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="22 October 2020"
disabled
>22</button>
</td>
<td
class="pf-v6-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="23 October 2020"
disabled
>23</button>
</td>
<td
class="pf-v6-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="24 October 2020"
disabled
>24</button>
</td>
<td
class="pf-v6-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="25 October 2020"
disabled
>25</button>
</td>
<td
class="pf-v6-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="26 October 2020"
disabled
>26</button>
</td>
</tr>
<tr class="pf-v6-c-calendar-month__dates-row">
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="27 October 2020"
>27</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="28 October 2020"
>28</button>
</td>
<td
class="pf-v6-c-calendar-month__dates-cell pf-m-selected pf-m-in-range pf-m-end-range"
>
<button
class="pf-v6-c-calendar-month__date pf-m-hover"
type="button"
aria-label="29 October 2020"
>29</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="30 October 2020"
>30</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="31 October 2020"
>31</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="1 October 2020"
>1</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v6-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-v6-c-calendar-month">
<div class="pf-v6-c-calendar-month__header">
<div class="pf-v6-c-calendar-month__header-nav-control pf-m-prev-month">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Previous month"
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="pf-v6-c-input-group">
<div class="pf-v6-c-input-group__item pf-m-fill">
<div class="pf-v6-c-calendar-month__header-month">
<button
class="pf-v6-c-menu-toggle"
type="button"
aria-expanded="false"
id="calendar-month-range-end-date-selected-month-select"
>
<span class="pf-v6-c-menu-toggle__text">October</span>
<span class="pf-v6-c-menu-toggle__controls">
<span class="pf-v6-c-menu-toggle__toggle-icon">
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
</span>
</span>
</button>
</div>
</div>
<div class="pf-v6-c-input-group__item">
<div class="pf-v6-c-calendar-month__header-year">
<span class="pf-v6-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-v6-c-calendar-month__header-nav-control pf-m-next-month">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Next month"
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</button>
</div>
</div>
<table class="pf-v6-c-calendar-month__calendar">
<thead class="pf-v6-c-calendar-month__days" scope="col">
<tr class="pf-v6-c-calendar-month__days-row">
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Sunday</span>
<span aria-hidden="true">S</span>
</th>
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Monday</span>
<span aria-hidden="true">M</span>
</th>
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Tuesday</span>
<span aria-hidden="true">T</span>
</th>
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Wednesday</span>
<span aria-hidden="true">W</span>
</th>
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Thursday</span>
<span aria-hidden="true">T</span>
</th>
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Friday</span>
<span aria-hidden="true">F</span>
</th>
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Saturday</span>
<span aria-hidden="true">S</span>
</th>
</tr>
</thead>
<tbody class="pf-v6-c-calendar-month__dates">
<tr class="pf-v6-c-calendar-month__dates-row">
<td class="pf-v6-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="29 October 2020"
>29</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="30 October 2020"
>30</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="1 October 2020"
>1</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="2 October 2020"
>2</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="3 October 2020"
>3</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="4 October 2020"
>4</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="5 October 2020"
>5</button>
</td>
</tr>
<tr class="pf-v6-c-calendar-month__dates-row">
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="6 October 2020"
>6</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="7 October 2020"
>7</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="8 October 2020"
>8</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-current">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="9 October 2020"
>9</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="10 October 2020"
>10</button>
</td>
<td
class="pf-v6-c-calendar-month__dates-cell pf-m-selected pf-m-start-range pf-m-in-range"
>
<button
class="pf-v6-c-calendar-month__date pf-m-focus"
type="button"
aria-label="11 October 2020"
>11</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="12 October 2020"
>12</button>
</td>
</tr>
<tr class="pf-v6-c-calendar-month__dates-row">
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="13 October 2020"
>13</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="14 October 2020"
>14</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="15 October 2020"
>15</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="16 October 2020"
>16</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="17 October 2020"
>17</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="18 October 2020"
>18</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="19 October 2020"
>19</button>
</td>
</tr>
<tr class="pf-v6-c-calendar-month__dates-row">
<td
class="pf-v6-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="20 October 2020"
disabled
>20</button>
</td>
<td
class="pf-v6-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="21 October 2020"
disabled
>21</button>
</td>
<td
class="pf-v6-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="22 October 2020"
disabled
>22</button>
</td>
<td
class="pf-v6-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="23 October 2020"
disabled
>23</button>
</td>
<td
class="pf-v6-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="24 October 2020"
disabled
>24</button>
</td>
<td
class="pf-v6-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="25 October 2020"
disabled
>25</button>
</td>
<td
class="pf-v6-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="26 October 2020"
disabled
>26</button>
</td>
</tr>
<tr class="pf-v6-c-calendar-month__dates-row">
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="27 October 2020"
>27</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="28 October 2020"
>28</button>
</td>
<td
class="pf-v6-c-calendar-month__dates-cell pf-m-selected pf-m-in-range pf-m-end-range"
>
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="29 October 2020"
>29</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="30 October 2020"
>30</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="31 October 2020"
>31</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="1 October 2020"
>1</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v6-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-v6-c-calendar-month">
<div class="pf-v6-c-calendar-month__header">
<div class="pf-v6-c-calendar-month__header-nav-control pf-m-prev-month">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Previous month"
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="pf-v6-c-input-group">
<div class="pf-v6-c-input-group__item pf-m-fill">
<div class="pf-v6-c-calendar-month__header-month">
<button
class="pf-v6-c-menu-toggle"
type="button"
aria-expanded="false"
id="calendar-month-range-start-and-end-dates-selected-month-select"
>
<span class="pf-v6-c-menu-toggle__text">October</span>
<span class="pf-v6-c-menu-toggle__controls">
<span class="pf-v6-c-menu-toggle__toggle-icon">
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
</span>
</span>
</button>
</div>
</div>
<div class="pf-v6-c-input-group__item">
<div class="pf-v6-c-calendar-month__header-year">
<span class="pf-v6-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-v6-c-calendar-month__header-nav-control pf-m-next-month">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Next month"
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</button>
</div>
</div>
<table class="pf-v6-c-calendar-month__calendar">
<thead class="pf-v6-c-calendar-month__days" scope="col">
<tr class="pf-v6-c-calendar-month__days-row">
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Sunday</span>
<span aria-hidden="true">S</span>
</th>
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Monday</span>
<span aria-hidden="true">M</span>
</th>
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Tuesday</span>
<span aria-hidden="true">T</span>
</th>
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Wednesday</span>
<span aria-hidden="true">W</span>
</th>
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Thursday</span>
<span aria-hidden="true">T</span>
</th>
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Friday</span>
<span aria-hidden="true">F</span>
</th>
<th class="pf-v6-c-calendar-month__day">
<span class="pf-v6-screen-reader">Saturday</span>
<span aria-hidden="true">S</span>
</th>
</tr>
</thead>
<tbody class="pf-v6-c-calendar-month__dates">
<tr class="pf-v6-c-calendar-month__dates-row">
<td class="pf-v6-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="29 October 2020"
>29</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="30 October 2020"
>30</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="1 October 2020"
>1</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="2 October 2020"
>2</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="3 October 2020"
>3</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="4 October 2020"
>4</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="5 October 2020"
>5</button>
</td>
</tr>
<tr class="pf-v6-c-calendar-month__dates-row">
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="6 October 2020"
>6</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="7 October 2020"
>7</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="8 October 2020"
>8</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-current">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="9 October 2020"
>9</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="10 October 2020"
>10</button>
</td>
<td
class="pf-v6-c-calendar-month__dates-cell pf-m-selected pf-m-start-range pf-m-in-range"
>
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="11 October 2020"
>11</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="12 October 2020"
>12</button>
</td>
</tr>
<tr class="pf-v6-c-calendar-month__dates-row">
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="13 October 2020"
>13</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="14 October 2020"
>14</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="15 October 2020"
>15</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="16 October 2020"
>16</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="17 October 2020"
>17</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="18 October 2020"
>18</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="19 October 2020"
>19</button>
</td>
</tr>
<tr class="pf-v6-c-calendar-month__dates-row">
<td
class="pf-v6-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="20 October 2020"
disabled
>20</button>
</td>
<td
class="pf-v6-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="21 October 2020"
disabled
>21</button>
</td>
<td
class="pf-v6-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="22 October 2020"
disabled
>22</button>
</td>
<td
class="pf-v6-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="23 October 2020"
disabled
>23</button>
</td>
<td
class="pf-v6-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="24 October 2020"
disabled
>24</button>
</td>
<td
class="pf-v6-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="25 October 2020"
disabled
>25</button>
</td>
<td
class="pf-v6-c-calendar-month__dates-cell pf-m-in-range pf-m-disabled"
>
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="26 October 2020"
disabled
>26</button>
</td>
</tr>
<tr class="pf-v6-c-calendar-month__dates-row">
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="27 October 2020"
>27</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-in-range">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="28 October 2020"
>28</button>
</td>
<td
class="pf-v6-c-calendar-month__dates-cell pf-m-selected pf-m-in-range pf-m-end-range"
>
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="29 October 2020"
>29</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="30 October 2020"
>30</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="31 October 2020"
>31</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="1 October 2020"
>1</button>
</td>
<td class="pf-v6-c-calendar-month__dates-cell pf-m-adjacent-month">
<button
class="pf-v6-c-calendar-month__date"
type="button"
aria-label="2 October 2020"
>2</button>
</td>
</tr>
</tbody>
</table>
</div>
```
## Documentation
### Accessibility
| Attribute | Applied to | Outcome |
| -- | -- | -- |
| `aria-hidden="true"` | `.pf-v6-c-calendar-month__header-nav-control > button > [icon]` | Hides the nav control icon from assistive technologies. **Required** |
| `aria-hidden="true"` | `.pf-v6-c-calendar-month__day > span` | Hides the visual day of the month label from assistive technologies. **Required** |
| `.pf-v6-screen-reader` | `.pf-v6-c-calendar-month__day > span` | Hides the full day of the month text visually. **Required** |
| `aria-label="[Prev/Next] month"` | `.pf-v6-c-calendar-month__header-nav-control` | Provides an accessible label for the nav controls. **Required** |
| `disabled` | `.pf-v6-c-calendar-month__date` | Indicates that