Calendar
Ether Range. A date interval, not a decoration.
Spec
- One month default. Two months from 768px wide.
- Selected day: ink on signal.
- In-range days:
signal-muted. - First weekday follows the locale. Do not hard-code Sunday.
- Prev / next and a month select.
- Roving
tabindex. Arrows, Home, End, PageUp, PageDown. - Announce the full date plus selected / today.
- Do not reverse time in RTL. Start is earlier. End is later. The axis of time does not flip.
Live demo
Runnable controls. Not a screenshot. Paper / Ink in the header recolors tokens.
Ether Range — 1 month, 2 on wide. Locale first weekday.
Pick a start, then an end. Time does not reverse in RTL.
Do / Don't
| Do | Don't |
|---|---|
| Locale first weekday. | Sunday-first for every locale. |
| Range fill on signal-muted. | Reverse start/end because the page is RTL. |
| Announce “Friday, 28 August 2026, selected”. | Announce only the number 28. |
Motion
| Property | Duration | Easing | Trigger | Reduced motion |
|---|---|---|---|---|
| background | 120ms --dur-fast | --ease-out | :hover | instant |
| opacity | 180ms --dur-base | --ease-out | prev/next | instant |
Accessibility
- Grid is a table or a grid with named columns (day names).
- Roving tabindex: only one day tabbable. Arrows move.
- Live region announces the focused date.
- Prev/next are 44px, named “Previous month”, “Next month”.
- These notes describe construction. They are not a guarantee of WCAG conformance. Validate with axe, keyboard, and operators. See Accessibility.
Related
- Select — month chooser
- Button
- Internationalisation