Month
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|
Choose a day to begin.
The interactive calendar needs JavaScript. The rest of this page describes how it works.
How to use it with a keyboard
| Key | What it does |
|---|---|
| Tab | Moves into the calendar, then to the time choices |
| Arrow keys | Move one day left or right, or one week up or down |
| Home and End | Move to the start or end of the week |
| Page Up and Page Down | Move to the previous or next month, keeping the day number or using the last day of a shorter month |
| Shift with Page Up or Page Down | Move to the same date a year earlier or later (never before the current month) |
| Enter or Space | Select the focused day |
The controls follow the keyboard support in the W3C ARIA Authoring Practices Guide's date picker example, where only one day is in the Tab order at a time and only the selected day is marked as selected1. Changes are announced through a polite live region, so screen reader users hear the month, the chosen day and the chosen time without losing their place.
What a real booking calendar adds
This demo shows the interaction only. A real booking calendar connects to your scheduling rules, so the days and times it offers come from staff hours, service durations, buffers, rooms and existing bookings. It also shows the time zone next to times where a customer could be elsewhere, and it hands the chosen time to a short form and a confirmation. Our pages on appointment scheduling and calendar integration explain those layers.
Why build the calendar this way
A booking widget can be the hardest part of a website to use with a keyboard or screen reader. In Ontario, businesses and non-profits with 50 or more employees must meet WCAG 2.0 Level AA on public websites2, and WCAG 2.2 adds criteria such as Target Size (Minimum) and Focus Not Obscured that matter directly for calendars3. Building to a published pattern makes the calendar predictable for people who rely on assistive technology. Our guide to accessible date pickers goes into detail.
Sources
Checked on November 3, 2026.
- Date Picker Dialog Example. W3C Web Accessibility Initiative, ARIA Authoring Practices Guide. (standards body)
- How to make websites accessible. Government of Ontario, updated September 21, 2026. (government)
- What's New in WCAG 2.2. W3C Web Accessibility Initiative, updated October 5, 2023. (standards body)