Calendar Dialog 3 - Calendar as Appointment Picker in Dialog

Pro

Calendar in a dialog as appointment picker.
Shadcn Calendar Dialog 3 component

Component data

ID
calendar/calendar-dialog-3
Access
pro
Created
Oct 5, 2025
Type
example
Libraries
Radix UI, Base UI, React Aria

Calendar Dialog 3 component design & features

This example uses the shadcn Calendar component inside a Dialog triggered by a Button in single-date selection mode. A side panel lists available appointment times in a ScrollArea, with selectable time slots alongside the date picker.

Appointment picker layouts suit scheduling interfaces for clinics, salons, and consultation booking where users choose both a date and an available time slot.