Appointment Booking and Calendar Wireframe

OPEN HOURS is a two-screen appointment booking mockup for a design consultation. The first screen places a month calendar beside time selection and a name field. Review appointment opens a representative summary; Change appointment returns to the calendar. The summary uses fixed sample values, not captured form data.

Adapt the pattern for a consulting session, salon appointment, class reservation or service visit. For accommodation discovery and a longer booking journey, inspect the mobile travel example.

Inspect booking-calendar: month selects the displayed month, selectedDate identifies the highlighted date, and weekStartsOn controls the calendar convention. Keep the date, selected time, duration and time zone visible again on the review screen.

The options sit in a column frame. Change the frame spacing without manually moving every child. Calendar appearance and supported values are documented in the data element reference.

Extend the prototype with a fully booked day, an unavailable time, an invalid name, a booking conflict and a cancellation confirmation. Distinguish selecting a time from successfully reserving it. Explain whether times are displayed in the visitor or service time zone.

This example does not reserve appointments, fetch live availability, send reminders or process payments. Availability rules, validation, time-zone conversion and transactional booking must be implemented in your application.

Add a No appointments available page with a Change date action linking back to appointment. Keep booking-calendar and the existing summary unchanged. Use synthetic data and propose a validated diff.

Review the new page ownership and navigation. Export .rvv for continued editing and PNG/SVG for stakeholder review. Document conflict handling and cancellation requirements in the implementation brief. See multi-screen prototype guidance.