Calendar month

A calendar month component allows users to select and navigate between days, months and/or years. This component is usually used with the date picker component, to display date options and selections. For more information about usage, view date picker guidelines.

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

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
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 Select
nextMonthAriaLabel	string	'Next month'	Aria-label for the next month button
onChange	(date: Date) => void	() => {}	Callback when date is selected
onMonthChange	( newDate?: Date, event?: React.MouseEvent \| React.ChangeEvent \| React.FormEvent<HTMLInputElement> ) => void	() => {}	Callback when month or year is changed
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
	.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__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
--pf-c-calendar-month__header-nav-control--MarginRight --pf-c-calendar-month__header-nav-control--m-prev-month--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--MarginLeft --pf-c-calendar-month__header-nav-control--m-prev-month--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--MarginRight --pf-c-calendar-month__header-nav-control--m-next-month--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__header-nav-control--MarginLeft --pf-c-calendar-month__header-nav-control--m-next-month--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--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
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

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