RangeCalendar
A range calendar allows users to select a start and end date on a calendar grid.
RangeCalendar uses typed objects from @internationalized/date instead of native JavaScript Date. Import date utilities from @cfa/react-core/dates and components from @cfa/react-core. See the Dates and Times guide for how to create values and convert to and from Date.
For single-date selection, use Calendar. For a field plus popover, use DateRangePicker.
Import
import { RangeCalendar } from "@cfa/react-core";
import { CalendarDate } from "@cfa/react-core/dates";Basic Usage
The RangeCalendar component allows users to select a start and end date.
Date Highlighting
Highlight specific dates in the calendar using the isDateHighlighted prop. This example highlights the 1st and 15th of each month.
Date Restrictions
Set minimum and maximum dates to restrict selection, or disable specific dates.
Multiple Months
Display multiple months at once using the visibleDuration prop.
Non-Contiguous Ranges
Allow a selected range to skip unavailable dates with allowsNonContiguousRanges.
Invalid
Show a validation message with isInvalid and errorMessage.