---
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>
        </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>

```

## Documentation

### Accessibility

| Attribute | Applied to | Outcome |
| -- | -- | -- |
| `aria-hidden="true"` | `.pf-v5-c-calendar-month__header-nav-control > button > [icon]` | Hides the nav control icon from assistive technologies. **Required** |
| `aria-hidden="true"` | `.pf-v5-c-calendar-month__day > span` | Hides the visual day of the month label from assistive technologies. **Required** |
| `.pf-v5-screen-reader` | `.pf-v5-c-calendar-month__day > span` | Hides the full day of the month text visually. **Required** |
| `aria-label="[Prev/Next] month"` | `.pf-v5-c-calendar-month__header-nav-control` | Provides an accessible label for the nav controls. **Required** |
| `disabled` | `.pf-v5-c-calendar-month__date` | Indicates that a date is selected. **Required when the parent is `.pf-v5-c-calendar-month__dates-cell.pf-m-disabled`** |
| `aria-label="[date] [month] [year]"` | `.pf-v5-c-calendar-month__date` | Provides an accessible label for the date button. **Required** |

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v5-c-calendar-month` | `<div>` | Initiates the calendar month component. **Required** |
| `.pf-v5-c-calendar-month__header` | `<div>` | Initiates the calendar month header. **Required** |
| `.pf-v5-c-calendar-month__header-nav-control` | `<div>` | Initiates a nav control for navigating by month. **Required** |
| `.pf-v5-c-calendar-month__header-month` | `<div>` | Initiates the month select. **Required** |
| `.pf-v5-c-calendar-month__header-year` | `<div>` | Initiates the year input. **Required** |
| `.pf-v5-c-calendar-month__calendar` | `<table>` | Initiates the calendar. **Required** |
| `.pf-v5-c-calendar-month__days` | `<thead>` | Initiates the calendar days section. **Required** |
| `.pf-v5-c-calendar-month__days-row` | `<tr>` | Initiates the calendar days row. **Required** |
| `.pf-v5-c-calendar-month__day` | `<th>` | Initiates a calendar day. **Required** |
| `.pf-v5-c-calendar-month__dates` | `<tbody>` | Initiates the calendar dates section. **Required** |
| `.pf-v5-c-calendar-month__dates-row` | `<tr>` | Initiates a calendar dates row. **Required** |
| `.pf-v5-c-calendar-month__dates-cell` | `<td>` | Initiates a calendar date cell. **Required** |
| `.pf-v5-c-calendar-month__date` | `<button>` | Initiates a calendar date. **Required** |
| `.pf-m-prev-month` | `.pf-v5-c-calendar-month__header-nav-control` | Indicates a nav control is the previous month. **Required** |
| `.pf-m-next-month` | `.pf-v5-c-calendar-month__header-nav-control` | Indicates a nav control is the next month. **Required** |
| `.pf-m-current` | `.pf-v5-c-calendar-month__dates-cell` | Indicates a date is the current day. **Required** |
| `.pf-m-selected` | `.pf-v5-c-calendar-month__dates-cell` | Indicates a date is selected. |
| `.pf-m-start-range` | `.pf-v5-c-calendar-month__dates-cell` | Indicates a date is the start of a range. |
| `.pf-m-in-range` | `.pf-v5-c-calendar-month__dates-cell` | Indicates a date is in a range. |
| `.pf-m-end-range` | `.pf-v5-c-calendar-month__dates-cell` | Indicates a date is the end of a range. |
| `.pf-m-adjacent-month` | `.pf-v5-c-calendar-month__dates-cell` | Indicates a date is in an adjacent month. |
| `.pf-m-disabled` | `.pf-v5-c-calendar-month__dates-cell` | Indicates a date is disabled and unavailable. |