Info alert:Beta feature
This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more go to our Beta components page on GitHub.
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 | 8ch | ||
| .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
