Examples
Range start date selected, end date hovered
Month
| Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday |
|---|---|---|---|---|---|---|
Range end date selected, start date focused
Month
| Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday |
|---|---|---|---|---|---|---|
Documentation
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
aria-hidden="true" | .pf-c-calendar-month__header-nav-control > button > [icon] | Hides the nav control icon from assistive technologies. Required |
aria-hidden="true" | .pf-c-calendar-month__day > span | Hides the visual day of the month label from assistive technologies. Required |
.pf-screen-reader | .pf-c-calendar-month__day > span | Hides the full day of the month text visually. Required |
aria-label="[Prev/Next] month" | .pf-c-calendar-month__header-nav-control | Provides an accessible label for the nav controls. Required |
disabled | .pf-c-calendar-month__date | Indicates that a date is selected. Required when the parent is .pf-c-calendar-month__dates-cell.pf-m-disabled |
aria-label="[date] [month] [year]" | .pf-c-calendar-month__date | Provides an accessible label for the date button. Required |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-c-calendar-month | <div> | Initiates the calendar month component. Required |
.pf-c-calendar-month__header | <div> | Initiates the calendar month header. Required |
.pf-c-calendar-month__header-nav-control | <div> | Initiates a nav control for navigating by month. Required |
.pf-c-calendar-month__header-month | <div> | Initiates the month select. Required |
.pf-c-calendar-month__header-year | <div> | Initiates the year input. Required |
.pf-c-calendar-month__calendar | <table> | Initiates the calendar. Required |
.pf-c-calendar-month__days | <thead> | Initiates the calendar days section. Required |
.pf-c-calendar-month__days-row | <tr> | Initiates the calendar days row. Required |
.pf-c-calendar-month__day | <th> | Initiates a calendar day. Required |
.pf-c-calendar-month__dates | <tbody> | Initiates the calendar dates section. Required |
.pf-c-calendar-month__dates-row | <tr> | Initiates a calendar dates row. Required |
.pf-c-calendar-month__dates-cell | <td> | Initiates a calendar date cell. Required |
.pf-c-calendar-month__date | <button> | Initiates a calendar date. Required |
.pf-m-prev-month | .pf-c-calendar-month__header-nav-control | Indicates a nav control is the previous month. Required |
.pf-m-next-month | .pf-c-calendar-month__header-nav-control | Indicates a nav control is the next month. Required |
.pf-m-current | .pf-c-calendar-month__dates-cell | Indicates a date is the current day. Required |
.pf-m-selected | .pf-c-calendar-month__dates-cell | Indicates a date is selected. |
.pf-m-start-range | .pf-c-calendar-month__dates-cell | Indicates a date is the start of a range. |
.pf-m-in-range | .pf-c-calendar-month__dates-cell | Indicates a date is in a range. |
.pf-m-end-range | .pf-c-calendar-month__dates-cell | Indicates a date is the end of a range. |
.pf-m-adjacent-month | .pf-c-calendar-month__dates-cell | Indicates a date is in an adjacent month. |
.pf-m-disabled | .pf-c-calendar-month__dates-cell | Indicates a date is disabled and unavailable. |
CSS variables
| .pf-c-calendar-month | --pf-global--Color--100 | #151515 | ||
| .pf-c-calendar-month | --pf-global--Color--200 | #6a6e73 | ||
| .pf-c-calendar-month | --pf-global--BorderColor--100 | #d2d2d2 | ||
| .pf-c-calendar-month | --pf-global--primary-color--100 | #06c | ||
| .pf-c-calendar-month | --pf-global--link--Color | #06c | ||
| .pf-c-calendar-month | --pf-global--link--Color--hover | #004080 | ||
| .pf-c-calendar-month | --pf-global--BackgroundColor--100 | #fff | ||
| .pf-c-calendar-month | --pf-c-calendar-month--BackgroundColor | #fff | ||
| .pf-c-calendar-month | --pf-c-calendar-month--PaddingTop | 1.5rem | ||
| .pf-c-calendar-month | --pf-c-calendar-month--PaddingRight | 1.5rem | ||
| .pf-c-calendar-month | --pf-c-calendar-month--PaddingBottom | 1rem | ||
| .pf-c-calendar-month | --pf-c-calendar-month--PaddingLeft | 1.5rem | ||
| .pf-c-calendar-month | --pf-c-calendar-month--FontSize | 0.875rem | ||
| .pf-c-calendar-month | --pf-c-calendar-month__header--MarginBottom | 1rem | ||
| .pf-c-calendar-month | --pf-c-calendar-month__header-year--Width | 8.5ch | ||
| .pf-c-calendar-month | --pf-c-calendar-month__header-nav-control--MarginRight | 0 | ||
| .pf-c-calendar-month | --pf-c-calendar-month__header-nav-control--MarginLeft | 0 | ||
| .pf-c-calendar-month | --pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight | 0 | ||
| .pf-c-calendar-month | --pf-c-calendar-month__header-nav-control--m-prev-month--MarginLeft | 0 | ||
| .pf-c-calendar-month | --pf-c-calendar-month__header-nav-control--m-next-month--MarginRight | 0 | ||
| .pf-c-calendar-month | --pf-c-calendar-month__header-nav-control--m-next-month--MarginLeft | 0 | ||
| .pf-c-calendar-month | --pf-c-calendar-month__days--BorderBottomWidth | 1px | ||
| .pf-c-calendar-month | --pf-c-calendar-month__days--BorderBottomColor | #d2d2d2 | ||
| .pf-c-calendar-month | --pf-c-calendar-month__day--PaddingBottom | 1rem | ||
| .pf-c-calendar-month | --pf-c-calendar-month__day--FontWeight | 400 | ||
| .pf-c-calendar-month | --pf-c-calendar-month__dates-cell--PaddingTop | 0.125rem | ||
| .pf-c-calendar-month | --pf-c-calendar-month__dates-cell--PaddingRight | 0.125rem | ||
| .pf-c-calendar-month | --pf-c-calendar-month__dates-cell--PaddingBottom | 0.125rem | ||
| .pf-c-calendar-month | --pf-c-calendar-month__dates-cell--PaddingLeft | 0.125rem | ||
| .pf-c-calendar-month | --pf-c-calendar-month__dates-row--first-child__dates-cell--PaddingTop | 0.5rem | ||
| .pf-c-calendar-month | --pf-c-calendar-month__dates-cell--m-current__date--BackgroundColor | #f0f0f0 | ||
| .pf-c-calendar-month | --pf-c-calendar-month__dates-cell--m-selected__date--BackgroundColor | #06c | ||
| .pf-c-calendar-month | --pf-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor | #06c | ||
| .pf-c-calendar-month | --pf-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor | #004080 | ||
| .pf-c-calendar-month | --pf-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor | #004080 | ||
| .pf-c-calendar-month | --pf-c-calendar-month__dates-cell--m-selected__date--focus--BoxShadow | 0 0 0.3125rem #06c | ||
| .pf-c-calendar-month | --pf-c-calendar-month__dates-cell--m-selected__date--Color | #fff | ||
| .pf-c-calendar-month | --pf-c-calendar-month__dates-cell--before--BackgroundColor | transparent | ||
| .pf-c-calendar-month | --pf-c-calendar-month__dates-cell--before--Top | 0 | ||
| .pf-c-calendar-month | --pf-c-calendar-month__dates-cell--before--Right | 0 | ||
| .pf-c-calendar-month | --pf-c-calendar-month__dates-cell--before--Bottom | 0.125rem | ||
| .pf-c-calendar-month | --pf-c-calendar-month__dates-cell--before--Left | 0 | ||
| .pf-c-calendar-month | --pf-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor | #e7f1fa | ||
| .pf-c-calendar-month | --pf-c-calendar-month__dates-cell--m-in-range--m-start-range--before--Left | 50% | ||
| .pf-c-calendar-month | --pf-c-calendar-month__dates-cell--m-in-range--m-end-range--before--Right | 50% | ||
| .pf-c-calendar-month | --pf-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor | #bee1f4 | ||
| .pf-c-calendar-month | --pf-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor | #bee1f4 | ||
| .pf-c-calendar-month | --pf-c-calendar-month__dates-cell--m-adjacent-month__date--Color | #6a6e73 | ||
| .pf-c-calendar-month | --pf-c-calendar-month__date--Width | 4ch | ||
| .pf-c-calendar-month | --pf-c-calendar-month__date--Height | 4ch | ||
| .pf-c-calendar-month | --pf-c-calendar-month__date--BorderRadius | 30em | ||
| .pf-c-calendar-month | --pf-c-calendar-month__date--Color | #151515 | ||
| .pf-c-calendar-month | --pf-c-calendar-month__date--BackgroundColor | transparent | ||
| .pf-c-calendar-month | --pf-c-calendar-month__date--disabled--Color | #d2d2d2 | ||
| .pf-c-calendar-month | --pf-c-calendar-month__date--after--BorderWidth | 2px | ||
| .pf-c-calendar-month | --pf-c-calendar-month__date--after--BorderColor | transparent | ||
| .pf-c-calendar-month | --pf-c-calendar-month__date--hover--BackgroundColor | #e7f1fa | ||
| .pf-c-calendar-month | --pf-c-calendar-month__date--focus--BackgroundColor | #e7f1fa | ||
| .pf-c-calendar-month | --pf-c-calendar-month__date--focus--after--BorderColor | #06c | ||
| .pf-c-calendar-month | --pf-c-calendar-month__date--focus--BoxShadow | none | ||
| .pf-c-calendar-month__header-nav-control.pf-m-prev-month | --pf-c-calendar-month__header-nav-control--MarginRight | 0 | ||
| .pf-c-calendar-month__header-nav-control.pf-m-prev-month | --pf-c-calendar-month__header-nav-control--MarginLeft | 0 | ||
| .pf-c-calendar-month__header-nav-control.pf-m-next-month | --pf-c-calendar-month__header-nav-control--MarginRight | 0 | ||
| .pf-c-calendar-month__header-nav-control.pf-m-next-month | --pf-c-calendar-month__header-nav-control--MarginLeft | 0 | ||
| .pf-c-calendar-month__dates-row:first-child | --pf-c-calendar-month__dates-cell--PaddingTop | 0.5rem | ||
| .pf-c-calendar-month__dates-cell | --pf-c-calendar-month__dates-cell--before--Top | 0.125rem | ||
| .pf-c-calendar-month__dates-cell.pf-m-current | --pf-c-calendar-month__date--BackgroundColor | #f0f0f0 | ||
| .pf-c-calendar-month__dates-cell.pf-m-in-range | --pf-c-calendar-month__dates-cell--before--BackgroundColor | #e7f1fa | ||
| .pf-c-calendar-month__dates-cell.pf-m-in-range | --pf-c-calendar-month__date--hover--BackgroundColor | #bee1f4 | ||
| .pf-c-calendar-month__dates-cell.pf-m-in-range | --pf-c-calendar-month__date--focus--BackgroundColor | #bee1f4 | ||
| .pf-c-calendar-month__dates-cell.pf-m-start-range | --pf-c-calendar-month__dates-cell--before--Left | 50% | ||
| .pf-c-calendar-month__dates-cell.pf-m-end-range | --pf-c-calendar-month__dates-cell--before--Right | 50% | ||
| .pf-c-calendar-month__dates-cell.pf-m-adjacent-month | --pf-c-calendar-month__date--Color | #6a6e73 | ||
| .pf-c-calendar-month__dates-cell.pf-m-selected | --pf-c-calendar-month__date--BackgroundColor | #06c | ||
| .pf-c-calendar-month__dates-cell.pf-m-selected | --pf-c-calendar-month__date--hover--BackgroundColor | #06c | ||
| .pf-c-calendar-month__dates-cell.pf-m-selected | --pf-c-calendar-month__date--focus--BackgroundColor | #004080 | ||
| .pf-c-calendar-month__dates-cell.pf-m-selected | --pf-c-calendar-month__date--focus--after--BorderColor | #004080 | ||
| .pf-c-calendar-month__dates-cell.pf-m-selected | --pf-c-calendar-month__date--focus--BoxShadow | 0 0 0.3125rem #06c | ||
| .pf-c-calendar-month__dates-cell.pf-m-selected | --pf-c-calendar-month__date--Color | #fff | ||
| .pf-c-calendar-month__dates-cell.pf-m-disabled | --pf-c-calendar-month__dates-cell--before--BackgroundColor | transparent | ||
| .pf-c-calendar-month__dates-cell.pf-m-disabled | --pf-c-calendar-month__date--BackgroundColor | transparent | ||
| .pf-c-calendar-month__date:hover | --pf-c-calendar-month__date--BackgroundColor | #e7f1fa | ||
| .pf-c-calendar-month__date:focus | --pf-c-calendar-month__date--BackgroundColor | #e7f1fa | ||
| .pf-c-calendar-month__date:focus | --pf-c-calendar-month__date--after--BorderColor | #06c | ||
| .pf-c-calendar-month__date:disabled | --pf-c-calendar-month__date--Color | #d2d2d2 | ||
| .pf-c-calendar-month__date:disabled | --pf-c-calendar-month__date--hover--focus--BorderColor | transparent | ||
View source on GitHub
