Shadcn.io is not affiliated with official shadcn/ui
Calendar with Range in Dialog
A date range calendar in a modal with dual-month display for booking and scheduling date selections
Date pickers inline clutter interfaces. This React dialog wraps a dual-month range calendar in a modal using shadcn/ui and react-day-picker. Built with Dialog and Calendar components, users select start and end dates in a focused overlay. Perfect for booking systems like Airbnb, analytics dashboards filtering reports, or scheduling tools where date range selection benefits from modal focus without permanent UI space.
Calendar with Range in Dialog preview
Installation
Related Components
Date Range Calendar
Inline dual-month range picker
Date & Time Dialog
Date picker with time input
Standard Dialog
Basic modal dialog structure
Appointment Picker Dialog
Calendar with time slot selection
Date Picker Popover
Date selection in popover
Button Component
Action buttons
FAQ
Was this page helpful?
Sign in to leave feedback.