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.

Examples

Date selected

S M T W T F S

Range start date selected, end date hovered

S M T W T F S

Range end date selected, start date focused

S M T W T F S

Range start and end dates selected

S M T W T F S

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

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