Skip to content
Patternfly Logo

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. Learn more about Beta components here.

Examples

Default

SundayMondayTuesdayWednesdayThursdayFridaySaturday

Selectable date

Selected date: Tue Nov 24 2020 00:00:00 GMT+0000 (Coordinated Universal Time)
SundayMondayTuesdayWednesdayThursdayFridaySaturday

Props

CalendarMonth

*required
NameTypeDefaultDescription
cellAriaLabel(date: Date) => stringAria-label for the date cells
classNamestringClassname to add to outer div
dateDatenew Date()Month/year to base other dates around
dayFormat(date: Date) => React.ReactNodedate => date.getDate()How to format days in buttons in table cells
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 Select
nextMonthAriaLabelstring'Next month'Aria-label for the next month button
onChange(date: Date) => void() => {}Callback when date is selected
prevMonthAriaLabelstring'Previous month'Aria-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'Aria-label for the year input

CalendarFormat

*required
NameTypeDefaultDescription
cellAriaLabel(date: Date) => stringAria-label for the date cells
dayFormat(date: Date) => React.ReactNodeHow to format days in buttons in table cells
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 Select
nextMonthAriaLabelstringAria-label for the next month button
prevMonthAriaLabelstringAria-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.
yearInputAriaLabelstringAria-label for the year input

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
#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.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-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