Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Calendar with Range
A date range calendar with dual month display for selecting start and end dates in booking and scheduling interfaces
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
React Calendar with Custom Select Day Style in Dialog
A calendar dialog with custom day styling using modifiers and modifiersStyles for visual date categorization
React Calendar with Month and Year Selector
A calendar with dropdown selectors for month and year navigation, enabling quick jumps to distant dates