Skip to content
PatternFly logo

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.

Examples

Selectable date

Select your favorite date

SundayMondayTuesdayWednesdayThursdayFridaySaturday
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

SundayMondayTuesdayWednesdayThursdayFridaySaturday

Props

CalendarMonth

The main calendar month component.
*required
NameTypeDefaultDescription
cellAriaLabel(date: Date) => stringAccessible label for the date cells.
classNamestringAdditional classes to add to the outer div of the calendar month.
dateDateMonth/year to base other dates around.
dayFormat(date: Date) => React.ReactNodedate => date.getDate()How to format days in buttons in table cells.
inlinePropsCalendarMonthInlinePropsProps used to ensure accessibility when displaying the calendar month inline.
isDateFocusedbooleanfalseFlag to set browser focus on the passed date. *
localestringundefinedIf 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.ReactNodedate => date.toLocaleDateString(locale, { weekday: 'long' })How to format days in header for screen readers.
monthFormat(date: Date) => React.ReactNodedate => date.toLocaleDateString(locale, { month: 'long' })How to format months in month select.
nextMonthAriaLabelstring'Next month'Accessible 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.
prevMonthAriaLabelstring'Previous month'Accessible label for the previous month button.
rangeStartDateWhich 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.ReactNodedate => date.toLocaleDateString(locale, { weekday: 'narrow' })How to format week days in header.
weekStart0 | 1 | 2 | 3 | 4 | 5 | 6 | Weekday0Day of week that starts the week. 0 is Sunday, 6 is Saturday.
yearInputAriaLabelstring'Select year'Accessible label for the year input.

CalendarFormat

Additional properties that extend from and can be passed to the main component. These properties allow customizing the calendar formatting and aria-labels.
*required
NameTypeDefaultDescription
cellAriaLabel(date: Date) => stringAccessible label for the date cells.
dayFormat(date: Date) => React.ReactNodeHow to format days in buttons in table cells.
inlinePropsCalendarMonthInlinePropsProps used to ensure accessibility when displaying the calendar month inline.
localestringIf 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.ReactNodeHow to format days in header for screen readers.
monthFormat(date: Date) => React.ReactNodeHow to format months in month select.
nextMonthAriaLabelstringAccessible label for the next month button.
prevMonthAriaLabelstringAccessible label for the previous month button.
rangeStartDateWhich date to start range styles from.
weekdayFormat(date: Date) => React.ReactNodeHow to format week days in header.
weekStart0 | 1 | 2 | 3 | 4 | 5 | 6 | WeekdayDay of week that starts the week. 0 is Sunday, 6 is Saturday.
yearInputAriaLabelstringAccessible label for the year input.

CalendarMonthInlineProps

*required
NameTypeDefaultDescription
ariaLabelledbystringId of the accessible label of the calendar month. Recommended to map to the title.
componentkeyof JSX.IntrinsicElementsComponent wrapping the calendar month when used inline. Recommended to be 'article'.
titleReact.ReactNodeTitle of the calendar rendered above the inline calendar month. Recommended to be a 'title' component.

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
8.5ch
.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