Patternfly Logo

Calendar month

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

AttributeApplied toOutcome
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-controlProvides an accessible label for the nav controls. Required
disabled.pf-c-calendar-month__dateIndicates that a date is selected. Required when the parent is .pf-c-calendar-month__dates-cell.pf-m-disabled

Usage

ClassApplied toOutcome
.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-controlIndicates a nav control is the previous month. Required
.pf-m-next-month.pf-c-calendar-month__header-nav-controlIndicates a nav control is the next month. Required
.pf-m-current.pf-c-calendar-month__dates-cellIndicates a date is the current day. Required
.pf-m-selected.pf-c-calendar-month__dates-cellIndicates a date is selected.
.pf-m-start-range.pf-c-calendar-month__dates-cellIndicates a date is the start of a range.
.pf-m-in-range.pf-c-calendar-month__dates-cellIndicates a date is in a range.
.pf-m-end-range.pf-c-calendar-month__dates-cellIndicates a date is the end of a range.
.pf-m-adjacent-month.pf-c-calendar-month__dates-cellIndicates a date is in an adjacent month.
.pf-m-disabled.pf-c-calendar-month__dates-cellIndicates a date is disabled and unavailable.

CSS variables


View source on Github