The calendar module offers readonly and interactive calendar capabilities.

Both types of calendar are structured as data tables; each column representing a day of the week.

Readonly Calendar

A readonly calendar has cells containing static text or hypertext.

The current date is conveyed using calendar__cell--current and clipped text.

NOTE: for the eagle-eyed BEM afionados, we are saying each span has an implicit class of calendar__cell.

Read-Only Calendar with Inactive Dates

Inactive/unavailable dates are conveyed using calendar__cell--disabled and offscreen text.

Read-Only Calendar with Date Range

Date ranges are conveyed using calendar__cell--selected, calendar__range, calendar__range--start, calendar__range-end and clipped text.

Interactive Calendar

An interactive calendar uses toggle buttons to allow the input of single dates or date ranges.

NOTE: a fully functional and accessible interactive calendar requires JavaScript and is outside the scope of a CSS library such as eBay Skin. The examples below are NOT fully functional and serve to demonstrate the necessary HTML semantics and styling hooks only.

Interactive Calendar With Single Date Selection

A single date selection is conveyed using aria-pressed.

NOTE: in comparison to the readonly calendar, with buttons we can now leverage the disabled property and aria-current instead of clipped text.

Interactive Calendar With Date Range Selection

Date ranges are bookended by two buttons with the aria-pressed property. All buttons in between these dates leverage clipped text for assistive technology.

Calendar With Header Pagination

The calendar module allows an optional header section for pagination between months.

Multi-month Calendar with Header Pagination

Multiple instances of calendar__month can be rendered inside of the calendar__body.