Shadcn.io is not affiliated with official shadcn/ui
Calendar with Range
A date range calendar with dual month display for selecting start and end dates in booking and scheduling interfaces
Booking flights or hotel rooms? Date ranges are everywhere. This React calendar displays two months side-by-side with range selection built on shadcn/ui and react-day-picker. Users drag to select ranges or click start and end dates—perfect for booking systems, event planners, or analytics dashboards filtering by date ranges.
Calendar with Range preview
Installation
Related Components
Month/Year Selector
Calendar with dropdown month and year navigation
Single Date Calendar
Basic single date picker for simple date selection
Date Picker Input
Input field with calendar popover for date selection
Calendar in Dialog
Calendar component within modal dialog
Date Range Picker
Compact date range input with calendar
Calendar with Presets
Date range shortcuts for common selections
FAQ
Was this page helpful?
Sign in to leave feedback.