RangeCalendar
Used to select a contiguous date range
The <RangeCalendar> component...
Anatomy
A <RangeCalendar> has the same header and grid as a Calendar, but a selection spans two dates: picking a start date and an end date highlights every date in between as one range.
- Header: The top area holding the select boxes and the step buttons.
- Month select box: Jumps directly to a month.
- Year select box: Jumps directly to a year.
- Step buttons: Move to the previous or next month.
- Grid: Holds all selectable dates of the displayed month.
- Start date: The first date of the selection.
- End date: The last date of the selection.
- Range: All dates between start and end, highlighted as one block.
Appearance
The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
27 | 28 | 29 | 30 | 31 | 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | 1 | 2 | 3 | 4 | 5 | 6 |
| Property | Type | Description |
|---|---|---|
variant | - | The available variants of this component. |
size | - | The available sizes of this component. |
Usage
Quick select presets
Use the presets prop to offer common ranges as a one-click list beside the calendar, such as "This week" or "Last 30 days" for a reporting period. Built-in keys ship with localized labels and correct date math, and custom presets take a label plus a range value or a resolver function. Presets that fall outside minValue/maxValue or cover an unavailable date are disabled.
Besides the range keys, the single-date built-ins (today, yesterday, tomorrow) also work here and select a one-day range. Range keys such as this-week are not available on DatePicker and Calendar, which accept only the single-date built-ins.
For custom presets, pass value as a function when the range is relative to now (for example "Next 14 days"), so it resolves at selection time instead of when the view first rendered. A plain value is right for fixed ranges. If you provide several custom presets, give each a unique id: it defaults to the label, so two presets sharing a label would collide.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
30 | 31 | 1 | 2 | 3 | 4 | 5 |
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 1 | 2 | 3 |
Quick select on narrow screens
On small screens the calendar grid renders first, topped by a "Quick selection" row. Tapping it opens the preset list in a bottom sheet, and picking a preset applies it and closes the sheet.
Props
RangeCalendar
Prop
Type
Accessibility props (4)
Prop
Type
DOM event handlers (64)
Prop
Type
Alternative components
DateRangePicker: Select a date range through a single field with this calendar in a popover.