Calendar

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<tui-calendar value="2026-09-28" locale="en-GB" min="2026-01-01">
  <data value="2026-09-03" data-lamp="green">Mix review · Ada</data>
  <data value="2026-09-09" data-lamp="amber">Hold · Studio B</data>
  <data value="2026-09-17" data-lamp="red">Clash: two bookings</data>
</tui-calendar>

<!-- A range: two caps and the groove between. -->
<tui-calendar mode="range" value="2026-09-10/2026-09-14"></tui-calendar>

import '/kit/kit.mjs';   // defines <tui-calendar>

const cal = document.querySelector('tui-calendar');
cal.addEventListener('change', () => load(cal.value));   // "2026-09-17"
cal.month = '2026-10';                                    // page it from code
cal.focusDate('2026-10-02');                              // and move the tab stop

Needs kit.css and kit.mjs. How to install the kit.

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

A custom element that builds its own light DOM: a head with two small keys and the drum window, a role="grid" table of six weeks (blank cells before the 1st and after the last, so the plate never changes height), and the note line. Dates are whole days since 1970 in UTC, so no time zone can move one. Each drum is a strip of three faces (last, this and next) in a recess, shaded like a cylinder; paging re-prints the strip one face off and animates it back with the Web Animations API over 220ms (zero under reduced motion), so the old month rolls away and the new one comes round. The chosen day takes the contrast cap and the pressed shadow; a range’s groove is a ::before strip of the well under the days, half-width under its two caps.