Calendar month

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

Default

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.

Props

CalendarMonth

*required
Name	Type	Default	Description
cellAriaLabel	(date: Date) => string		Aria-label for the date cells
className	string		Classname to add to outer div
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
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 Select
nextMonthAriaLabel	string	'Next month'	Aria-label for the next month button
onChange	(date: Date) => void	() => {}	Callback when date is selected
prevMonthAriaLabel	string	'Previous month'	Aria-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'	Aria-label for the year input

CalendarFormat

*required
Name	Type	Description
cellAriaLabel	(date: Date) => string	Aria-label for the date cells
dayFormat	(date: Date) => React.ReactNode	How to format days in buttons in table cells
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 Select
nextMonthAriaLabel	string	Aria-label for the next month button
prevMonthAriaLabel	string	Aria-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	Aria-label for the year input

CSS variables


	.pf-c-calendar-month	--pf-global--Color--100	#151515
--pf-global--Color--100 --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-calendar-month	--pf-global--Color--200	#6a6e73
--pf-global--Color--200 --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-calendar-month	--pf-global--BorderColor--100	#d2d2d2
--pf-global--BorderColor--100 --pf-global--BorderColor--dark-100 $pf-global--BorderColor--dark-100 $pf-color-black-300 #d2d2d2
	.pf-c-calendar-month	--pf-global--primary-color--100	#06c
--pf-global--primary-color--100 --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-calendar-month	--pf-global--link--Color	#06c
--pf-global--link--Color --pf-global--link--Color--dark $pf-global--link--Color--dark $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-calendar-month	--pf-global--link--Color--hover	#004080
--pf-global--link--Color--hover --pf-global--link--Color--dark--hover $pf-global--link--Color--dark--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-calendar-month	--pf-global--BackgroundColor--100	#fff
--pf-global--BackgroundColor--100 --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-calendar-month	--pf-c-calendar-month--BackgroundColor	#fff
--pf-c-calendar-month--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-calendar-month	--pf-c-calendar-month--PaddingTop	1.5rem
--pf-c-calendar-month--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-calendar-month	--pf-c-calendar-month--PaddingRight	1.5rem
--pf-c-calendar-month--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-calendar-month	--pf-c-calendar-month--PaddingBottom	1rem
--pf-c-calendar-month--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-calendar-month	--pf-c-calendar-month--PaddingLeft	1.5rem
--pf-c-calendar-month--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-calendar-month	--pf-c-calendar-month--FontSize	0.875rem
--pf-c-calendar-month--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-calendar-month	--pf-c-calendar-month__header--MarginBottom	1rem
--pf-c-calendar-month__header--MarginBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 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.5rem
--pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-calendar-month	--pf-c-calendar-month__header-nav-control--m-prev-month--MarginLeft	calc(1rem * -1)
--pf-c-calendar-month__header-nav-control--m-prev-month--MarginLeft calc(--pf-global--spacer--md * -1) calc($pf-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) calc(1rem * -1)
	.pf-c-calendar-month	--pf-c-calendar-month__header-nav-control--m-next-month--MarginRight	calc(1rem * -1)
--pf-c-calendar-month__header-nav-control--m-next-month--MarginRight calc(--pf-global--spacer--md * -1) calc($pf-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) calc(1rem * -1)
	.pf-c-calendar-month	--pf-c-calendar-month__header-nav-control--m-next-month--MarginLeft	0.5rem
--pf-c-calendar-month__header-nav-control--m-next-month--MarginLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-calendar-month	--pf-c-calendar-month__days--BorderBottomWidth	1px
--pf-c-calendar-month__days--BorderBottomWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-calendar-month	--pf-c-calendar-month__days--BorderBottomColor	#d2d2d2
--pf-c-calendar-month__days--BorderBottomColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-calendar-month	--pf-c-calendar-month__day--PaddingBottom	1rem
--pf-c-calendar-month__day--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-calendar-month	--pf-c-calendar-month__day--FontWeight	400
--pf-c-calendar-month__day--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 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__dates-row--first-child__dates-cell--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-calendar-month	--pf-c-calendar-month__dates-cell--m-current__date--BackgroundColor	#f0f0f0
--pf-c-calendar-month__dates-cell--m-current__date--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-calendar-month	--pf-c-calendar-month__dates-cell--m-selected__date--BackgroundColor	#06c
--pf-c-calendar-month__dates-cell--m-selected__date--BackgroundColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-calendar-month	--pf-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor	#06c
--pf-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-calendar-month	--pf-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor	#004080
--pf-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-calendar-month	--pf-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor	#004080
--pf-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #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__dates-cell--m-selected__date--focus--BoxShadow 0 0 0.3125rem --pf-global--primary-color--100 0 0 0.3125rem $pf-global--primary-color--100 0 0 0.3125rem $pf-color-blue-400 0 0 0.3125rem #06c
	.pf-c-calendar-month	--pf-c-calendar-month__dates-cell--m-selected__date--Color	#fff
--pf-c-calendar-month__dates-cell--m-selected__date--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #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__dates-cell--before--Bottom --pf-c-calendar-month__dates-cell--PaddingBottom 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__dates-cell--m-in-range--before--BackgroundColor --pf-global--palette--blue-50 $pf-color-blue-50 #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__dates-cell--m-in-range__date--hover--BackgroundColor --pf-global--palette--blue-100 $pf-color-blue-100 #bee1f4
	.pf-c-calendar-month	--pf-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor	#bee1f4
--pf-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor --pf-global--palette--blue-100 $pf-color-blue-100 #bee1f4
	.pf-c-calendar-month	--pf-c-calendar-month__dates-cell--m-adjacent-month__date--Color	#6a6e73
--pf-c-calendar-month__dates-cell--m-adjacent-month__date--Color --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #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__date--BorderRadius --pf-global--BorderRadius--lg $pf-global--BorderRadius--lg 30em
	.pf-c-calendar-month	--pf-c-calendar-month__date--Color	#151515
--pf-c-calendar-month__date--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #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__date--disabled--Color --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-calendar-month	--pf-c-calendar-month__date--after--BorderWidth	2px
--pf-c-calendar-month__date--after--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 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__date--hover--BackgroundColor --pf-global--palette--blue-50 $pf-color-blue-50 #e7f1fa
	.pf-c-calendar-month	--pf-c-calendar-month__date--focus--BackgroundColor	#e7f1fa
--pf-c-calendar-month__date--focus--BackgroundColor --pf-global--palette--blue-50 $pf-color-blue-50 #e7f1fa
	.pf-c-calendar-month	--pf-c-calendar-month__date--focus--after--BorderColor	#06c
--pf-c-calendar-month__date--focus--after--BorderColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #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.5rem
--pf-c-calendar-month__header-nav-control--MarginRight --pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-calendar-month__header-nav-control.pf-m-prev-month	--pf-c-calendar-month__header-nav-control--MarginLeft	calc(1rem * -1)
--pf-c-calendar-month__header-nav-control--MarginLeft --pf-c-calendar-month__header-nav-control--m-prev-month--MarginLeft calc(--pf-global--spacer--md * -1) calc($pf-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) calc(1rem * -1)
	.pf-c-calendar-month__header-nav-control.pf-m-next-month	--pf-c-calendar-month__header-nav-control--MarginRight	calc(1rem * -1)
--pf-c-calendar-month__header-nav-control--MarginRight --pf-c-calendar-month__header-nav-control--m-next-month--MarginRight calc(--pf-global--spacer--md * -1) calc($pf-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) calc(1rem * -1)
	.pf-c-calendar-month__header-nav-control.pf-m-next-month	--pf-c-calendar-month__header-nav-control--MarginLeft	0.5rem
--pf-c-calendar-month__header-nav-control--MarginLeft --pf-c-calendar-month__header-nav-control--m-next-month--MarginLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-calendar-month__dates-row:first-child	--pf-c-calendar-month__dates-cell--PaddingTop	0.5rem
--pf-c-calendar-month__dates-cell--PaddingTop --pf-c-calendar-month__dates-row--first-child__dates-cell--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-calendar-month__dates-cell	--pf-c-calendar-month__dates-cell--before--Top	0.125rem
--pf-c-calendar-month__dates-cell--before--Top --pf-c-calendar-month__dates-cell--PaddingTop 0.125rem
	.pf-c-calendar-month__dates-cell.pf-m-current	--pf-c-calendar-month__date--BackgroundColor	#f0f0f0
--pf-c-calendar-month__date--BackgroundColor --pf-c-calendar-month__dates-cell--m-current__date--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #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--before--BackgroundColor --pf-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor --pf-global--palette--blue-50 $pf-color-blue-50 #e7f1fa
	.pf-c-calendar-month__dates-cell.pf-m-in-range	--pf-c-calendar-month__date--hover--BackgroundColor	#bee1f4
--pf-c-calendar-month__date--hover--BackgroundColor --pf-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor --pf-global--palette--blue-100 $pf-color-blue-100 #bee1f4
	.pf-c-calendar-month__dates-cell.pf-m-in-range	--pf-c-calendar-month__date--focus--BackgroundColor	#bee1f4
--pf-c-calendar-month__date--focus--BackgroundColor --pf-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor --pf-global--palette--blue-100 $pf-color-blue-100 #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--before--Left --pf-c-calendar-month__dates-cell--m-in-range--m-start-range--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--before--Right --pf-c-calendar-month__dates-cell--m-in-range--m-end-range--before--Right 50%
	.pf-c-calendar-month__dates-cell.pf-m-adjacent-month	--pf-c-calendar-month__date--Color	#6a6e73
--pf-c-calendar-month__date--Color --pf-c-calendar-month__dates-cell--m-adjacent-month__date--Color --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #6a6e73
	.pf-c-calendar-month__dates-cell.pf-m-selected	--pf-c-calendar-month__date--BackgroundColor	#06c
--pf-c-calendar-month__date--BackgroundColor --pf-c-calendar-month__dates-cell--m-selected__date--BackgroundColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-calendar-month__dates-cell.pf-m-selected	--pf-c-calendar-month__date--hover--BackgroundColor	#06c
--pf-c-calendar-month__date--hover--BackgroundColor --pf-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-calendar-month__dates-cell.pf-m-selected	--pf-c-calendar-month__date--focus--BackgroundColor	#004080
--pf-c-calendar-month__date--focus--BackgroundColor --pf-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-calendar-month__dates-cell.pf-m-selected	--pf-c-calendar-month__date--focus--after--BorderColor	#004080
--pf-c-calendar-month__date--focus--after--BorderColor --pf-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #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__date--focus--BoxShadow --pf-c-calendar-month__dates-cell--m-selected__date--focus--BoxShadow 0 0 0.3125rem --pf-global--primary-color--100 0 0 0.3125rem $pf-global--primary-color--100 0 0 0.3125rem $pf-color-blue-400 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__date--Color --pf-c-calendar-month__dates-cell--m-selected__date--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #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--BackgroundColor --pf-c-calendar-month__date--hover--BackgroundColor --pf-global--palette--blue-50 $pf-color-blue-50 #e7f1fa
	.pf-c-calendar-month__date:focus	--pf-c-calendar-month__date--BackgroundColor	#e7f1fa
--pf-c-calendar-month__date--BackgroundColor --pf-c-calendar-month__date--focus--BackgroundColor --pf-global--palette--blue-50 $pf-color-blue-50 #e7f1fa
	.pf-c-calendar-month__date:focus	--pf-c-calendar-month__date--after--BorderColor	#06c
--pf-c-calendar-month__date--after--BorderColor --pf-c-calendar-month__date--focus--after--BorderColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-calendar-month__date:disabled	--pf-c-calendar-month__date--Color	#d2d2d2
--pf-c-calendar-month__date--Color --pf-c-calendar-month__date--disabled--Color --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-calendar-month__date:disabled	--pf-c-calendar-month__date--hover--focus--BorderColor	transparent

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines

S	M	T	W	T	F	S
27	28	29	30	31	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
1	2	3	4	5	6	7

S	M	T	W	T	F	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	1	2	3	4	5
6	7	8	9	10	11	12

S	M	T	W	T	F	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	1	2	3	4	5
6	7	8	9	10	11	12

S	M	T	W	T	F	S
27	28	29	30	31	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
1	2	3	4	5	6	7

S	M	T	W	T	F	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	1	2	3	4	5
6	7	8	9	10	11	12

S	M	T	W	T	F	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	1	2	3	4	5
6	7	8	9	10	11	12

S	M	T	W	T	F	S
27	28	29	30	31	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
1	2	3	4	5	6	7

S	M	T	W	T	F	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	1	2	3	4	5
6	7	8	9	10	11	12

S	M	T	W	T	F	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	1	2	3	4	5
6	7	8	9	10	11	12

S	M	T	W	T	F	S
27	28	29	30	31	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
1	2	3	4	5	6	7

S	M	T	W	T	F	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	1	2	3	4	5
6	7	8	9	10	11	12

S	M	T	W	T	F	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	1	2	3	4	5
6	7	8	9	10	11	12