Calendar
A month grid with today, selection and range states. Presentational; wire it to your own dates.
Examples
Calendar
MoTuWeThFrSaSu
Anatomy
.calendar | Wrapper, sized to its grid. |
> header | The month title and the previous/next buttons, spaced apart. |
.calendar-grid | Seven equal columns. |
> span | Weekday headings, muted. Seven, in display order. |
> button | One per day, including the leading and trailing days of the adjacent months. |
API
| Attribute | Values | Description |
|---|---|---|
aria-pressed | true | On a day: solid accent, and announced as pressed. The selected day, or both ends of a range. aria-selected=true draws the same, for a day inside a role=gridcell. |
aria-current | date | On today: accent text and a 2px underline. |
data-rangeon button | boolean | Days inside a range: a light accent tint. Mark the ends too; aria-pressed draws over it. |
data-outsideon button | boolean | Days from the adjacent months: muted at half opacity. |
disabled | boolean | An unavailable day: faded, ignores the pointer. |
Accessibility
- A day button's text is only a number. Give each an
aria-labelwith the full date ("12 October 2026"). - Use
aria-pressed="true"on the selected day:aria-selectedis not exposed on a plain<button>. Say a day is inside a range in its label too ("13 October 2026, in range"). aria-current="date"is valid on any element and announces today.- The previous/next buttons are icon-only and need an
aria-label, as in the demo.
| Key | Effect |
|---|---|
| Tab | Moves through the day buttons one at a time. There is no arrow-key grid navigation. |
| Enter / Space | Activates the focused day; what that does is up to your script. |