RangeCalendar
Used to select a contiguous date range
The <RangeCalendar> component...
Anatomy
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 |
|---|---|---|---|---|---|---|
28 | 29 | 30 | 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 |
import { CalendarDate } from '@internationalized/date';import { RangeCalendar } from '@marigold/components';export default () => ( <RangeCalendar aria-label="Festival period" presets={[ 'this-week', 'this-month', 'this-quarter', { label: 'Festival season', value: () => ({ start: new CalendarDate(2026, 6, 1), end: new CalendarDate(2026, 8, 31), }), }, // [!code highlight] ]} />);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.