Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Calendar as Appointment Picker in Dialog
An appointment booking dialog combining calendar date selection with scrollable time slot picker
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Appointment booking across separate screens frustrates users. This React dialog merges calendar and time slot selection in split-pane layout using shadcn/ui components. Built with Dialog, Calendar, ScrollArea, and Button, users pick dates and available times simultaneously. Perfect for medical appointment systems like Zocdoc, salon booking platforms, or service scheduling tools where date and time selection in unified interface improves booking conversion and reduces abandonment.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Range Calendar Dialog
Dual-month range selection
Date & Time Dialog
Date picker with time input
Standard Dialog
Basic modal dialog structure
Appointment Calendar Inline
Time slots without dialog
Scroll Area Component
Scrollable content containers
Button Component
Action buttons