Cal.com — book a meeting
[model draft]A three-column date and slot picker collapses into a two-column confirmation form while keeping the left-hand meeting context card anchored in place, so the invitee never loses sight of who they are meeting and when.
Step 1 of 2
Cal.com — pick a date and time- grid/layout · model draftThree columns in one card: who and what (host, meeting name, length, location, time zone), the month grid, then the chosen day's slots. Date and time are one decision, not two pages.
- component pattern · model draftThe first free day is already selected and its slots already listed; available days are filled and unavailable ones are bare numbers. The visitor can choose a time immediately.
- copywriting · model draftA 12h/24h switch and a time-zone menu sit in the panels they affect, not in settings.
Step 2 of 2
Cal.com — booking details form- grid/layout · model draftThe left column keeps the meeting's facts and adds the chosen slot (Tuesday, 13 October, 10:30–10:45). The right column swaps the calendar for the form, so the commitment stays in view while you fill it in.
- component pattern · model draftThree fields only (name, email, what to discuss), 'Add guests' as a quiet link, then Back and Confirm side by side. The terms line sits above the button, not in a checkbox.
Agents get the same order from get_reference: any screen's reply names the flow and every step in it.