Shadcn.io is not affiliated with official shadcn/ui
Date Picker as Appointment Picker
A React appointment booking date picker combining calendar navigation with available time slot selection in a split-panel interface
Scheduling doctor appointments, salon bookings, or consultation calls—users need to pick both date AND time. This React appointment picker combines shadcn/ui's Calendar with a scrollable time slot list using ScrollArea. Built with Radix UI and date-fns, the split-panel layout shows available times alongside the calendar, letting users book in two clicks instead of navigating multiple screens—perfect for appointment scheduling, event registration, and service bookings.
Date Picker as Appointment Picker preview
Installation
Related Components
Date and Time Picker
Combined date picker with time input field
Date Range Picker
Calendar for selecting start and end dates
Natural Language Shortcuts
Quick select buttons for common date choices
Disabled Dates
Calendar with unavailable dates blocked out
Month and Year Selector
Quick navigation with dropdown selectors
Custom Styled Calendar
Calendar with custom day appearance and states
FAQ
Was this page helpful?
Sign in to leave feedback.
Date Picker with Month and Year Selector
A React date picker with dropdown month and year selectors for quick navigation to any date without clicking through months sequentially
Date Picker with Date and Time
A React date and time picker combining calendar selection with an HTML5 time input field for precise datetime scheduling in a unified interface