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

Date selected

Sunday Monday Tuesday Wednesday Thursday Friday Saturday

Range start date selected, end date hovered

Sunday Monday Tuesday Wednesday Thursday Friday Saturday

Range end date selected, start date focused

Sunday Monday Tuesday Wednesday Thursday Friday Saturday

Range start and end dates selected

Sunday Monday Tuesday Wednesday Thursday Friday Saturday

Documentation

Accessibility

Attribute
Applied to
Outcome
aria-hidden="true"
.pf-c-calendar-month__header-nav-control > button > [icon]
Hides the nav control icon from assistive technologies. Required
aria-hidden="true"
.pf-c-calendar-month__day > span
Hides the visual day of the month label from assistive technologies. Required
.pf-screen-reader
.pf-c-calendar-month__day > span
Hides the full day of the month text visually. Required
aria-label="[Prev/Next] month"
.pf-c-calendar-month__header-nav-control
Provides an accessible label for the nav controls. Required
disabled
.pf-c-calendar-month__date
Indicates that a date is selected. Required when the parent is .pf-c-calendar-month__dates-cell.pf-m-disabled
aria-label="[date] [month] [year]"
.pf-c-calendar-month__date
Provides an accessible label for the date button. Required

Usage

Class
Applied to
Outcome
.pf-c-calendar-month
<div>
Initiates the calendar month component. Required
.pf-c-calendar-month__header
<div>
Initiates the calendar month header. Required
.pf-c-calendar-month__header-nav-control
<div>
Initiates a nav control for navigating by month. Required
.pf-c-calendar-month__header-month
<div>
Initiates the month select. Required
.pf-c-calendar-month__header-year
<div>
Initiates the year input. Required
.pf-c-calendar-month__calendar
<table>
Initiates the calendar. Required
.pf-c-calendar-month__days
<thead>
Initiates the calendar days section. Required
.pf-c-calendar-month__days-row
<tr>
Initiates the calendar days row. Required
.pf-c-calendar-month__day
<th>
Initiates a calendar day. Required
.pf-c-calendar-month__dates
<tbody>
Initiates the calendar dates section. Required
.pf-c-calendar-month__dates-row
<tr>
Initiates a calendar dates row. Required
.pf-c-calendar-month__dates-cell
<td>
Initiates a calendar date cell. Required
.pf-c-calendar-month__date
<button>
Initiates a calendar date. Required
.pf-m-prev-month
.pf-c-calendar-month__header-nav-control
Indicates a nav control is the previous month. Required
.pf-m-next-month
.pf-c-calendar-month__header-nav-control
Indicates a nav control is the next month. Required
.pf-m-current
.pf-c-calendar-month__dates-cell
Indicates a date is the current day. Required
.pf-m-selected
.pf-c-calendar-month__dates-cell
Indicates a date is selected.
.pf-m-start-range
.pf-c-calendar-month__dates-cell
Indicates a date is the start of a range.
.pf-m-in-range
.pf-c-calendar-month__dates-cell
Indicates a date is in a range.
.pf-m-end-range
.pf-c-calendar-month__dates-cell
Indicates a date is the end of a range.
.pf-m-adjacent-month
.pf-c-calendar-month__dates-cell
Indicates a date is in an adjacent month.
.pf-m-disabled
.pf-c-calendar-month__dates-cell
Indicates a date is disabled and unavailable.

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