Select your favorite date
| Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday |
|---|---|---|---|---|---|---|
Examples
Selectable date
Selected date: Tue Nov 24 2020 00:00:00 GMT+0000 (Coordinated Universal Time)
Date range
In this example, there are 2 dates selected: a range start date (via the rangeStart prop) and a range end date (via the date prop). Additionally, any dates prior to the range start date are disabled by passing in an array of functions to the validators prop. In this case a single function is passed in, which checks whether a date is greater than or equal to the range start date.
For this example, these dates are static and cannot be updated. For an interactive demo, see our Date picker demos.
Calendar month displaying a range
| Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday |
|---|---|---|---|---|---|---|
Props
CalendarMonth
| Name | Type | Default | Description |
|---|---|---|---|
| cellAriaLabel | (date: Date) => string | Accessible label for the date cells. | |
| className | string | Additional classes to add to the outer div of the calendar month. | |
| date | Date | Month/year to base other dates around. | |
| dayFormat | (date: Date) => React.ReactNode | (date) => date.getDate() | How to format days in buttons in table cells. |
| inlineProps | CalendarMonthInlineProps | Props used to ensure accessibility when displaying the calendar month inline. | |
| isDateFocused | boolean | false | Flag to set browser focus on the passed date. * |
| locale | string | undefined | If using the default formatters which locale to use. Undefined defaults to current locale. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation |
| longWeekdayFormat | (date: Date) => React.ReactNode | (date) => date.toLocaleDateString(locale, { weekday: 'long' }) | How to format days in header for screen readers. |
| monthFormat | (date: Date) => React.ReactNode | (date) => date.toLocaleDateString(locale, { month: 'long' }) | How to format months in month select. |
| nextMonthAriaLabel | string | 'Next month' | Accessible label for the next month button. |
| onChange | (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, date: Date) => void | () => {} | Callback when date is selected. |
| onMonthChange | ( event?: React.MouseEvent | React.ChangeEvent | React.FormEvent<HTMLInputElement>, newDate?: Date ) => void | () => {} | Callback when month or year is changed. |
| prevMonthAriaLabel | string | 'Previous month' | Accessible label for the previous month button. |
| rangeStart | Date | Which date to start range styles from. | |
| validators | ((date: Date) => boolean)[] | [() => true] | Functions that returns if a date is valid and selectable. |
| weekdayFormat | (date: Date) => React.ReactNode | (date) => date.toLocaleDateString(locale, { weekday: 'narrow' }) | How to format week days in header. |
| weekStart | 0 | 1 | 2 | 3 | 4 | 5 | 6 | Weekday | 0 | Day of week that starts the week. 0 is Sunday, 6 is Saturday. |
| yearInputAriaLabel | string | 'Select year' | Accessible label for the year input. |
CalendarFormat
| Name | Type | Default | Description |
|---|---|---|---|
| cellAriaLabel | (date: Date) => string | Accessible label for the date cells. | |
| dayFormat | (date: Date) => React.ReactNode | How to format days in buttons in table cells. | |
| inlineProps | CalendarMonthInlineProps | Props used to ensure accessibility when displaying the calendar month inline. | |
| locale | string | If using the default formatters which locale to use. Undefined defaults to current locale. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation | |
| longWeekdayFormat | (date: Date) => React.ReactNode | How to format days in header for screen readers. | |
| monthFormat | (date: Date) => React.ReactNode | How to format months in month select. | |
| nextMonthAriaLabel | string | Accessible label for the next month button. | |
| prevMonthAriaLabel | string | Accessible label for the previous month button. | |
| rangeStart | Date | Which date to start range styles from. | |
| weekdayFormat | (date: Date) => React.ReactNode | How to format week days in header. | |
| weekStart | 0 | 1 | 2 | 3 | 4 | 5 | 6 | Weekday | Day of week that starts the week. 0 is Sunday, 6 is Saturday. | |
| yearInputAriaLabel | string | Accessible label for the year input. |
CalendarMonthInlineProps
| Name | Type | Default | Description |
|---|---|---|---|
| ariaLabelledby | string | Id of the accessible label of the calendar month. Recommended to map to the title. | |
| component | keyof JSX.IntrinsicElements | Component wrapping the calendar month when used inline. Recommended to be 'article'. | |
| title | React.ReactNode | Title of the calendar rendered above the inline calendar month. Recommended to be a 'title' component. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-calendar-month | --pf-v5-global--Color--100 | #151515 | ||
--pf-v5-global--Color--100 --pf-v5-global--Color--dark-100 $pf-v5-global--Color--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-calendar-month | --pf-v5-global--Color--200 | #6a6e73 | ||
--pf-v5-global--Color--200 --pf-v5-global--Color--dark-200 $pf-v5-global--Color--dark-200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-calendar-month | --pf-v5-global--BorderColor--100 | #d2d2d2 | ||
--pf-v5-global--BorderColor--100 --pf-v5-global--BorderColor--dark-100 $pf-v5-global--BorderColor--dark-100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-calendar-month | --pf-v5-global--primary-color--100 | #06c | ||
--pf-v5-global--primary-color--100 --pf-v5-global--primary-color--dark-100 $pf-v5-global--primary-color--dark-100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-calendar-month | --pf-v5-global--link--Color | #06c | ||
--pf-v5-global--link--Color --pf-v5-global--link--Color--dark $pf-v5-global--link--Color--dark $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-calendar-month | --pf-v5-global--link--Color--hover | #004080 | ||
--pf-v5-global--link--Color--hover --pf-v5-global--link--Color--dark--hover $pf-v5-global--link--Color--dark--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-calendar-month | --pf-v5-global--BackgroundColor--100 | #fff | ||
--pf-v5-global--BackgroundColor--100 --pf-v5-global--BackgroundColor--light-100 $pf-v5-global--BackgroundColor--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-calendar-month | --pf-v5-global--icon--Color--light | #6a6e73 | ||
--pf-v5-global--icon--Color--light --pf-v5-global--icon--Color--light--dark $pf-v5-global--icon--Color--light--dark $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-calendar-month | --pf-v5-global--icon--Color--dark | #151515 | ||
--pf-v5-global--icon--Color--dark --pf-v5-global--icon--Color--dark--dark $pf-v5-global--icon--Color--dark--dark $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month--BackgroundColor | #fff | ||
--pf-v5-c-calendar-month--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month--PaddingTop | 1.5rem | ||
--pf-v5-c-calendar-month--PaddingTop --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month--PaddingRight | 1.5rem | ||
--pf-v5-c-calendar-month--PaddingRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month--PaddingBottom | 1rem | ||
--pf-v5-c-calendar-month--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month--PaddingLeft | 1.5rem | ||
--pf-v5-c-calendar-month--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month--FontSize | 0.875rem | ||
--pf-v5-c-calendar-month--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__header--MarginBottom | 1rem | ||
--pf-v5-c-calendar-month__header--MarginBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__header-year--Width | 8.5ch | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__header-nav-control--MarginRight | 0 | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__header-nav-control--MarginLeft | 0 | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginRight | 0 | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginLeft | 0 | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__header-nav-control--m-next-month--MarginRight | 0 | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__header-nav-control--m-next-month--MarginLeft | 0 | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__days--BorderBottomWidth | 1px | ||
--pf-v5-c-calendar-month__days--BorderBottomWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__days--BorderBottomColor | #d2d2d2 | ||
--pf-v5-c-calendar-month__days--BorderBottomColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__day--PaddingBottom | 1rem | ||
--pf-v5-c-calendar-month__day--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__day--FontWeight | 400 | ||
--pf-v5-c-calendar-month__day--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--PaddingTop | 0.125rem | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--PaddingRight | 0.125rem | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--PaddingBottom | 0.125rem | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--PaddingLeft | 0.125rem | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-row--first-child__dates-cell--PaddingTop | 0.5rem | ||
--pf-v5-c-calendar-month__dates-row--first-child__dates-cell--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--m-current__date--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-calendar-month__dates-cell--m-current__date--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--m-selected__date--BackgroundColor | #06c | ||
--pf-v5-c-calendar-month__dates-cell--m-selected__date--BackgroundColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor | #06c | ||
--pf-v5-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor | #004080 | ||
--pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor --pf-v5-global--primary-color--200 $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor | #004080 | ||
--pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor --pf-v5-global--primary-color--200 $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BoxShadow | 0 0 0.3125rem #06c | ||
--pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BoxShadow 0 0 0.3125rem --pf-v5-global--primary-color--100 0 0 0.3125rem $pf-v5-global--primary-color--100 0 0 0.3125rem $pf-v5-color-blue-400 0 0 0.3125rem #06c | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--m-selected__date--Color | #fff | ||
--pf-v5-c-calendar-month__dates-cell--m-selected__date--Color --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--before--BackgroundColor | transparent | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--before--Top | 0 | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--before--Right | 0 | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--before--Bottom | 0.125rem | ||
--pf-v5-c-calendar-month__dates-cell--before--Bottom --pf-v5-c-calendar-month__dates-cell--PaddingBottom 0.125rem | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--before--Left | 0 | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor | #e7f1fa | ||
--pf-v5-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor --pf-v5-global--palette--blue-50 $pf-v5-color-blue-50 #e7f1fa | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--m-in-range--m-start-range--before--Left | 50% | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--m-in-range--m-end-range--before--Right | 50% | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor | #bee1f4 | ||
--pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor --pf-v5-global--palette--blue-100 $pf-v5-color-blue-100 #bee1f4 | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor | #bee1f4 | ||
--pf-v5-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor --pf-v5-global--palette--blue-100 $pf-v5-color-blue-100 #bee1f4 | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--m-adjacent-month__date--Color | #6a6e73 | ||
--pf-v5-c-calendar-month__dates-cell--m-adjacent-month__date--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__date--Width | 4ch | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__date--Height | 4ch | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__date--BorderRadius | 30em | ||
--pf-v5-c-calendar-month__date--BorderRadius --pf-v5-global--BorderRadius--lg $pf-v5-global--BorderRadius--lg 30em | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__date--Color | #151515 | ||
--pf-v5-c-calendar-month__date--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__date--BackgroundColor | transparent | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__date--disabled--Color | #d2d2d2 | ||
--pf-v5-c-calendar-month__date--disabled--Color --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__date--after--BorderWidth | 2px | ||
--pf-v5-c-calendar-month__date--after--BorderWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__date--after--BorderColor | transparent | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__date--hover--BackgroundColor | #e7f1fa | ||
--pf-v5-c-calendar-month__date--hover--BackgroundColor --pf-v5-global--palette--blue-50 $pf-v5-color-blue-50 #e7f1fa | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__date--focus--BackgroundColor | #e7f1fa | ||
--pf-v5-c-calendar-month__date--focus--BackgroundColor --pf-v5-global--palette--blue-50 $pf-v5-color-blue-50 #e7f1fa | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__date--focus--after--BorderColor | #06c | ||
--pf-v5-c-calendar-month__date--focus--after--BorderColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__date--focus--BoxShadow | none | ||
| .pf-v5-c-calendar-month__header-nav-control.pf-m-prev-month | --pf-v5-c-calendar-month__header-nav-control--MarginRight | 0 | ||
--pf-v5-c-calendar-month__header-nav-control--MarginRight --pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginRight 0 | ||||
| .pf-v5-c-calendar-month__header-nav-control.pf-m-prev-month | --pf-v5-c-calendar-month__header-nav-control--MarginLeft | 0 | ||
--pf-v5-c-calendar-month__header-nav-control--MarginLeft --pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginLeft 0 | ||||
| .pf-v5-c-calendar-month__header-nav-control.pf-m-next-month | --pf-v5-c-calendar-month__header-nav-control--MarginRight | 0 | ||
--pf-v5-c-calendar-month__header-nav-control--MarginRight --pf-v5-c-calendar-month__header-nav-control--m-next-month--MarginRight 0 | ||||
| .pf-v5-c-calendar-month__header-nav-control.pf-m-next-month | --pf-v5-c-calendar-month__header-nav-control--MarginLeft | 0 | ||
--pf-v5-c-calendar-month__header-nav-control--MarginLeft --pf-v5-c-calendar-month__header-nav-control--m-next-month--MarginLeft 0 | ||||
| .pf-v5-c-calendar-month__dates-row:first-child | --pf-v5-c-calendar-month__dates-cell--PaddingTop | 0.5rem | ||
--pf-v5-c-calendar-month__dates-cell--PaddingTop --pf-v5-c-calendar-month__dates-row--first-child__dates-cell--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-calendar-month__dates-cell | --pf-v5-c-calendar-month__dates-cell--before--Top | 0.125rem | ||
--pf-v5-c-calendar-month__dates-cell--before--Top --pf-v5-c-calendar-month__dates-cell--PaddingTop 0.125rem | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-current | --pf-v5-c-calendar-month__date--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-calendar-month__date--BackgroundColor --pf-v5-c-calendar-month__dates-cell--m-current__date--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-in-range | --pf-v5-c-calendar-month__dates-cell--before--BackgroundColor | #e7f1fa | ||
--pf-v5-c-calendar-month__dates-cell--before--BackgroundColor --pf-v5-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor --pf-v5-global--palette--blue-50 $pf-v5-color-blue-50 #e7f1fa | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-in-range | --pf-v5-c-calendar-month__date--hover--BackgroundColor | #bee1f4 | ||
--pf-v5-c-calendar-month__date--hover--BackgroundColor --pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor --pf-v5-global--palette--blue-100 $pf-v5-color-blue-100 #bee1f4 | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-in-range | --pf-v5-c-calendar-month__date--focus--BackgroundColor | #bee1f4 | ||
--pf-v5-c-calendar-month__date--focus--BackgroundColor --pf-v5-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor --pf-v5-global--palette--blue-100 $pf-v5-color-blue-100 #bee1f4 | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-start-range | --pf-v5-c-calendar-month__dates-cell--before--Left | 50% | ||
--pf-v5-c-calendar-month__dates-cell--before--Left --pf-v5-c-calendar-month__dates-cell--m-in-range--m-start-range--before--Left 50% | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-end-range | --pf-v5-c-calendar-month__dates-cell--before--Right | 50% | ||
--pf-v5-c-calendar-month__dates-cell--before--Right --pf-v5-c-calendar-month__dates-cell--m-in-range--m-end-range--before--Right 50% | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-adjacent-month | --pf-v5-c-calendar-month__date--Color | #6a6e73 | ||
--pf-v5-c-calendar-month__date--Color --pf-v5-c-calendar-month__dates-cell--m-adjacent-month__date--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-selected | --pf-v5-c-calendar-month__date--BackgroundColor | #06c | ||
--pf-v5-c-calendar-month__date--BackgroundColor --pf-v5-c-calendar-month__dates-cell--m-selected__date--BackgroundColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-selected | --pf-v5-c-calendar-month__date--hover--BackgroundColor | #06c | ||
--pf-v5-c-calendar-month__date--hover--BackgroundColor --pf-v5-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-selected | --pf-v5-c-calendar-month__date--focus--BackgroundColor | #004080 | ||
--pf-v5-c-calendar-month__date--focus--BackgroundColor --pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor --pf-v5-global--primary-color--200 $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-selected | --pf-v5-c-calendar-month__date--focus--after--BorderColor | #004080 | ||
--pf-v5-c-calendar-month__date--focus--after--BorderColor --pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor --pf-v5-global--primary-color--200 $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-selected | --pf-v5-c-calendar-month__date--focus--BoxShadow | 0 0 0.3125rem #06c | ||
--pf-v5-c-calendar-month__date--focus--BoxShadow --pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BoxShadow 0 0 0.3125rem --pf-v5-global--primary-color--100 0 0 0.3125rem $pf-v5-global--primary-color--100 0 0 0.3125rem $pf-v5-color-blue-400 0 0 0.3125rem #06c | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-selected | --pf-v5-c-calendar-month__date--Color | #fff | ||
--pf-v5-c-calendar-month__date--Color --pf-v5-c-calendar-month__dates-cell--m-selected__date--Color --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-disabled | --pf-v5-c-calendar-month__dates-cell--before--BackgroundColor | transparent | ||
| .pf-v5-c-calendar-month__dates-cell.pf-m-disabled | --pf-v5-c-calendar-month__date--BackgroundColor | transparent | ||
| .pf-v5-c-calendar-month__date:hover | --pf-v5-c-calendar-month__date--BackgroundColor | #e7f1fa | ||
--pf-v5-c-calendar-month__date--BackgroundColor --pf-v5-c-calendar-month__date--hover--BackgroundColor --pf-v5-global--palette--blue-50 $pf-v5-color-blue-50 #e7f1fa | ||||
| .pf-v5-c-calendar-month__date:focus | --pf-v5-c-calendar-month__date--BackgroundColor | #e7f1fa | ||
--pf-v5-c-calendar-month__date--BackgroundColor --pf-v5-c-calendar-month__date--focus--BackgroundColor --pf-v5-global--palette--blue-50 $pf-v5-color-blue-50 #e7f1fa | ||||
| .pf-v5-c-calendar-month__date:focus | --pf-v5-c-calendar-month__date--after--BorderColor | #06c | ||
--pf-v5-c-calendar-month__date--after--BorderColor --pf-v5-c-calendar-month__date--focus--after--BorderColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-calendar-month__date:disabled | --pf-v5-c-calendar-month__date--Color | #d2d2d2 | ||
--pf-v5-c-calendar-month__date--Color --pf-v5-c-calendar-month__date--disabled--Color --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-calendar-month__date:disabled | --pf-v5-c-calendar-month__date--hover--focus--BorderColor | transparent | ||
View source on GitHub
