Range Calendar
FormsA calendar component optimized for selecting date ranges. Displays two months side by side for easy range selection.
Import
import { RangeCalendar } from "@/components/ui/range-calendar";Usage
Basic Range Calendar
Select a date range by clicking two dates
January 2026
Su
Mo
Tu
We
Th
Fr
Sa
February 2026
Su
Mo
Tu
We
Th
Fr
Sa
Single Month View
Compact version showing one month
January 2026
Su
Mo
Tu
We
Th
Fr
Sa
With Date Constraints
Limit selection to a specific range
January 2026
Su
Mo
Tu
We
Th
Fr
Sa
February 2026
Su
Mo
Tu
We
Th
Fr
Sa
Selection limited to the next 60 days
Disabled Weekends
Prevent weekend selection
January 2026
Su
Mo
Tu
We
Th
Fr
Sa
February 2026
Su
Mo
Tu
We
Th
Fr
Sa
Weekends cannot be selected
API Reference
valueundefined{ start: Date; end: Date }Controlled date range value
defaultValueundefined{ start: Date; end: Date }Default range for uncontrolled usage
onValueChangeundefined(range: DateRange) => voidCallback when the date range changes
defaultMonthnew Date()DateThe initial month to display
numberOfMonths2numberNumber of months to display
disabledundefined(date: Date) => booleanFunction to determine if a date should be disabled
minDateundefinedDateMinimum selectable date
maxDateundefinedDateMaximum selectable date
| Prop | Type | Default | Description |
|---|---|---|---|
value | { start: Date; end: Date } | undefined | Controlled date range value |
defaultValue | { start: Date; end: Date } | undefined | Default range for uncontrolled usage |
onValueChange | (range: DateRange) => void | undefined | Callback when the date range changes |
defaultMonth | Date | new Date() | The initial month to display |
numberOfMonths | number | 2 | Number of months to display |
disabled | (date: Date) => boolean | undefined | Function to determine if a date should be disabled |
minDate | Date | undefined | Minimum selectable date |
maxDate | Date | undefined | Maximum selectable date |