Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Calendar with Range in Dialog
A date range calendar in a modal with dual-month display for booking and scheduling date selections
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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