Skip to the page
Tactile UI Kit

Calendar

A month on a plate. The month and year sit on two drums behind a window and roll when you page; the chosen day is a latched cap, a range is a groove cut between two caps, and events are lamps named in the line below.

Page with the keys and watch the drums roll. In the grid: arrows move a day or a week, Page Up/Down a month (Shift for a year), Enter picks.

  • The grid is a role="grid" table labelled by the drum window, which reads the month and year and is a polite live region: paging says “October 2026”.
  • One day holds the tab stop; arrows move it. Each day is named in full — “Thursday 17 September 2026, Tracking · Room 2, Clash: two bookings” — with “today” and “unavailable” where true.
  • Chosen days carry aria-selected="true", today aria-current="date". Chosen is also the contrast cap and a heavier figure, not only a colour.
  • Every lamp has its words: in the day’s name, and printed in the line under the grid for the day in focus.
  • The page keys name where they go (“Next month, October 2026”) and are disabled past min and max.
Tactile UI Kit
Get the Founder Pass