package.docs.components.CalendarMonth.examples.CalendarMonth.md Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation
Show all versions of patternfly Show documentation
Assets, source, tooling, and content for PatternFly 4
The newest version!
---
id: 'Calendar month'
section: components
subsection: date-and-time
cssPrefix: pf-v6-c-calendar-month
---## Examples
### Date selected
```html
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
```
### Range start date selected, end date hovered
```html
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
```
### Range end date selected, start date focused
```html
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
```
### Range start and end dates selected
```html
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
```
## 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 a date is selected. **Required when the parent is `.pf-v6-c-calendar-month__dates-cell.pf-m-disabled`** |
| `aria-label="[date] [month] [year]"` | `.pf-v6-c-calendar-month__date` | Provides an accessible label for the date button. **Required** |
### Usage
| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-calendar-month` | `` | Initiates the calendar month component. **Required** |
| `.pf-v6-c-calendar-month__header` | `` | Initiates the calendar month header. **Required** |
| `.pf-v6-c-calendar-month__header-nav-control` | `` | Initiates a nav control for navigating by month. **Required** |
| `.pf-v6-c-calendar-month__header-month` | `` | Initiates the month select. **Required** |
| `.pf-v6-c-calendar-month__header-year` | `` | Initiates the year input. **Required** |
| `.pf-v6-c-calendar-month__calendar` | `` | Initiates the calendar. **Required** |
| `.pf-v6-c-calendar-month__days` | `` | Initiates the calendar days section. **Required** |
| `.pf-v6-c-calendar-month__days-row` | `` | Initiates the calendar days row. **Required** |
| `.pf-v6-c-calendar-month__day` | `` | Initiates a calendar day. **Required** |
| `.pf-v6-c-calendar-month__dates` | ` ` | Initiates the calendar dates section. **Required** |
| `.pf-v6-c-calendar-month__dates-row` | `` | Initiates a calendar dates row. **Required** |
| `.pf-v6-c-calendar-month__dates-cell` | `` | Initiates a calendar date cell. **Required** |
| `.pf-v6-c-calendar-month__date` | `