Skip to content
Patternfly Logo

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.

Note: CalendarMonth lives in its own package at @patternfly/react-datetime and uses format strings from date-fns@^2.0.0.

Examples

Date selected

Selected date:Thu Nov 26 2020 15:30:41 GMT-0500 (Eastern Standard Time)
SundayMondayTuesdayWednesdayThursdayFridaySaturday

Props

CalendarMonth

NameTypeRequiredDefaultDescription
buttonFormatstringNo'd'How to format days in buttons according to date-fns
classNamestringNoClassname to add to outer div
dateDateNonew Date()Month/year to base other dates around
dayFormatstringNo'EEEEE'How to format days in header according to date-fns
localeLocaleNoLocales.enUSSpecify the locale of the date.
longDayFormatstringNo'EEEE'How to format days in header for screen readers according to date-fns
monthFormatstringNo'MMMM'How to format months in dropdown according to date-fns
onChange(date: Date) => voidNo() => {}Callback when date is selected
onSelectToggle(open: boolean) => voidNo() => {}Internal prop to allow pressing escape in select menu to not close popover
validators[(date: Date) => boolean]No[() => true]Functions that returns if a date is valid and selectable

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.5rem
.pf-c-calendar-month--pf-c-calendar-month__header-nav-control--m-prev-month--MarginLeft
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--pf-c-calendar-month__header-nav-control--m-next-month--MarginLeft
0.5rem
.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
#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.125rem
.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__header-nav-control.pf-m-prev-month--pf-c-calendar-month__header-nav-control--MarginRight
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.pf-m-next-month--pf-c-calendar-month__header-nav-control--MarginRight
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__dates-row:first-child--pf-c-calendar-month__dates-cell--PaddingTop
0.5rem
.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
#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