Examples
Range start date selected, end date hovered
| Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday |
|---|---|---|---|---|---|---|
Range end date selected, start date focused
| 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 | <div> | Initiates the calendar month component. Required |
.pf-v6-c-calendar-month__header | <div> | Initiates the calendar month header. Required |
.pf-v6-c-calendar-month__header-nav-control | <div> | Initiates a nav control for navigating by month. Required |
.pf-v6-c-calendar-month__header-month | <div> | Initiates the month select. Required |
.pf-v6-c-calendar-month__header-year | <div> | Initiates the year input. Required |
.pf-v6-c-calendar-month__calendar | <table> | Initiates the calendar. Required |
.pf-v6-c-calendar-month__days | <thead> | Initiates the calendar days section. Required |
.pf-v6-c-calendar-month__days-row | <tr> | Initiates the calendar days row. Required |
.pf-v6-c-calendar-month__day | <th> | Initiates a calendar day. Required |
.pf-v6-c-calendar-month__dates | <tbody> | Initiates the calendar dates section. Required |
.pf-v6-c-calendar-month__dates-row | <tr> | Initiates a calendar dates row. Required |
.pf-v6-c-calendar-month__dates-cell | <td> | Initiates a calendar date cell. Required |
.pf-v6-c-calendar-month__date | <button> | Initiates a calendar date. Required |
.pf-m-prev-month | .pf-v6-c-calendar-month__header-nav-control | Indicates a nav control is the previous month. Required |
.pf-m-next-month | .pf-v6-c-calendar-month__header-nav-control | Indicates a nav control is the next month. Required |
.pf-m-current | .pf-v6-c-calendar-month__dates-cell | Indicates a date is the current day. Required |
.pf-m-selected | .pf-v6-c-calendar-month__dates-cell | Indicates a date is selected. |
.pf-m-start-range | .pf-v6-c-calendar-month__dates-cell | Indicates a date is the start of a range. |
.pf-m-in-range | .pf-v6-c-calendar-month__dates-cell | Indicates a date is in a range. |
.pf-m-end-range | .pf-v6-c-calendar-month__dates-cell | Indicates a date is the end of a range. |
.pf-m-adjacent-month | .pf-v6-c-calendar-month__dates-cell | Indicates a date is in an adjacent month. |
.pf-m-disabled | .pf-v6-c-calendar-month__dates-cell | Indicates a date is disabled and unavailable. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month--PaddingBlockStart | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month--PaddingInlineEnd | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month--PaddingBlockEnd | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month--PaddingInlineStart | 1.5rem | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month--FontSize | 0.875rem | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__header--MarginBlockEnd | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__header--Gap | 0.25rem | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__header-year--Width | 9ch | ||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__header-nav-control--MarginInlineEnd | 0 | ||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__header-nav-control--MarginInlineStart | 0 | ||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__days--BorderBlockEndWidth | 1px | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__days--BorderBlockEndColor | (In light theme) #c7c7c7 | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__day--PaddingBlockEnd | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__day--FontWeight | 400 | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__day--Color | (In light theme) #151515 | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__dates-cell--PaddingBlockStart | 0.125rem | ||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__dates-cell--PaddingInlineEnd | 0.125rem | ||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__dates-cell--PaddingBlockEnd | 0.125rem | ||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__dates-cell--PaddingInlineStart | 0.125rem | ||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__dates-row--first-child__dates-cell--PaddingBlockStart | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__dates-cell--m-current__date--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__dates-cell--m-selected__date--BackgroundColor | (In light theme) #0066cc | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor | (In light theme) #0066cc | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor | (In light theme) #0066cc | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor | (In light theme) #0066cc | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__dates-cell--m-selected__date--Color | (In light theme) #ffffff | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__dates-cell--before--BackgroundColor | transparent | ||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__dates-cell--before--InsetBlockStart | 0 | ||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__dates-cell--before--InsetInlineEnd | 0 | ||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__dates-cell--before--InsetBlockEnd | 0.125rem | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__dates-cell--before--InsetInlineStart | 0 | ||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__dates-cell--m-in-range--m-start-range--before--InsetInlineStart | 50% | ||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__dates-cell--m-in-range--m-end-range--before--InsetInlineEnd | 50% | ||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BorderWidth | 1px | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BorderColor | (In light theme) #4394e5 | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__dates-cell--m-adjacent-month__date--Color | (In light theme) #4d4d4d | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__date--Width | 4ch | ||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__date--Height | 4ch | ||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__date--BorderRadius | 24px | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__date--Color | (In light theme) #151515 | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__date--BackgroundColor | transparent | ||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__date--disabled--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__date--disabled--Color | (In light theme) #4d4d4d | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__date--after--BorderWidth | 1px | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__date--after--BorderColor | transparent | ||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__date--after--OutlineOffset | 0 | ||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__date--hover--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__date--hover--BorderWidth | 1px | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__date--hover--BorderColor | (In light theme) #4394e5 | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__date--focus--Color | (In light theme) #ffffff | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__date--focus--BackgroundColor | (In light theme) #0066cc | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__date--focus--after--BorderColor | (In light theme) #4394e5 | ||
| ||||
| :where(:root, .pf-v6-c-calendar-month) | --pf-v6-c-calendar-month__date--after--focus--OutlineOffset | -2px | ||
| .pf-v6-c-calendar-month__dates-row:first-child | --pf-v6-c-calendar-month__dates-cell--PaddingBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-calendar-month__dates-cell | --pf-v6-c-calendar-month__dates-cell--before--InsetBlockStart | 0.125rem | ||
| ||||
| .pf-v6-c-calendar-month__dates-cell.pf-m-current | --pf-v6-c-calendar-month__date--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-calendar-month__dates-cell.pf-m-in-range | --pf-v6-c-calendar-month__dates-cell--before--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-calendar-month__dates-cell.pf-m-in-range | --pf-v6-c-calendar-month__date--hover--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-calendar-month__dates-cell.pf-m-in-range | --pf-v6-c-calendar-month__date--hover--BorderWidth | 1px | ||
| ||||
| .pf-v6-c-calendar-month__dates-cell.pf-m-in-range | --pf-v6-c-calendar-month__date--hover--BorderColor | (In light theme) #4394e5 | ||
| ||||
| .pf-v6-c-calendar-month__dates-cell.pf-m-in-range | --pf-v6-c-calendar-month__date--focus--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-calendar-month__dates-cell.pf-m-start-range | --pf-v6-c-calendar-month__dates-cell--before--InsetInlineStart | 50% | ||
| ||||
| .pf-v6-c-calendar-month__dates-cell.pf-m-end-range | --pf-v6-c-calendar-month__dates-cell--before--InsetInlineEnd | 50% | ||
| ||||
| .pf-v6-c-calendar-month__dates-cell.pf-m-adjacent-month | --pf-v6-c-calendar-month__date--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-calendar-month__dates-cell.pf-m-selected | --pf-v6-c-calendar-month__date--BackgroundColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-calendar-month__dates-cell.pf-m-selected | --pf-v6-c-calendar-month__date--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-calendar-month__dates-cell.pf-m-selected | --pf-v6-c-calendar-month__date--hover--BackgroundColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-calendar-month__dates-cell.pf-m-selected | --pf-v6-c-calendar-month__date--hover--BorderWidth | 0 | ||
| .pf-v6-c-calendar-month__dates-cell.pf-m-selected | --pf-v6-c-calendar-month__date--focus--BackgroundColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-calendar-month__dates-cell.pf-m-selected | --pf-v6-c-calendar-month__date--focus--after--BorderColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-calendar-month__dates-cell.pf-m-selected | --pf-v6-c-calendar-month__date--after--OutlineOffset | -2px | ||
| ||||
| .pf-v6-c-calendar-month__dates-cell.pf-m-disabled | --pf-v6-c-calendar-month__dates-cell--before--BackgroundColor | transparent | ||
| .pf-v6-c-calendar-month__dates-cell.pf-m-disabled | --pf-v6-c-calendar-month__date--BackgroundColor | transparent | ||
| .pf-v6-c-calendar-month__date:hover | --pf-v6-c-calendar-month__date--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-calendar-month__date:focus | --pf-v6-c-calendar-month__date--after--BorderColor | (In light theme) #4394e5 | ||
| ||||
| .pf-v6-c-calendar-month__date:disabled | --pf-v6-c-calendar-month__date--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-calendar-month__date:disabled | --pf-v6-c-calendar-month__date--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-calendar-month__date:disabled | --pf-v6-c-calendar-month__date--hover--focus--BorderColor | transparent | ||
