Appointment Form V04

Author: Colorlib

Released: September 2026

License: CC BY 3.0

A three-pane scheduler for booking a 30-minute video call: a host panel with the call details, a month calendar built in JavaScript and a list of start times for the chosen day. Slots are defined in the host's New York time zone and shown in the visitor's own zone, detected with Intl, with a 12h/24h switch. Choosing a time leads to a short details step and then a confirmation card with an .ics download.

It is plain HTML and CSS plus a few lines of vanilla JavaScript: no jQuery, no Bootstrap files, no plugins, and the download is 210 KB. Use it on its own, or drop it into a Bootstrap 4, 5 or 6 project and it looks the same.

• Month calendar table with day buttons, aria-pressed state and full-date labels
• Arrow, Home/End and Page Up/Down keyboard navigation between days
• Host-zone slots converted to the visitor's time zone with Intl
• 12h / 24h time format toggle
• Three steps: pick a time, enter details, confirmation with focus management
• Downloadable .ics calendar file generated in the browser