# RangeCalendar

> A calendar surface for choosing a start and end date as one connected range, sharing every header, grid, and row part with Calendar and layering range position on top of its day cell.

```ts
import { RangeCalendar } from "@sdxc/ui";
```

Renders RangeCalendar's root through Calendar. Composing
RangeCalendar.Header and RangeCalendar.Grid as `children`
renders the visual month surface; omitting `children` renders a bare, script-free native `<input type="date">` pair from this instance's own fields.

## Examples

```tsx
<RangeCalendar startLabel={t("form.stay.checkIn")} endLabel={t("form.stay.checkOut")} startName="checkIn" endName="checkOut" />
```

```tsx
<RangeCalendar aria-label={t("calendar.label")}>
	<RangeCalendar.Header>
		<RangeCalendar.PreviousButton aria-label={t("calendar.previous")} />
		<RangeCalendar.Heading>{monthLabel}</RangeCalendar.Heading>
		<RangeCalendar.NextButton aria-label={t("calendar.next")} />
	</RangeCalendar.Header>
	<RangeCalendar.Grid aria-label={monthLabel}>
		<RangeCalendar.GridHeader>
			<RangeCalendar.Row>
				{weekdayLabels.map((day) => (
					<RangeCalendar.HeaderCell key={day}>{day}</RangeCalendar.HeaderCell>
				))}
			</RangeCalendar.Row>
		</RangeCalendar.GridHeader>
		<RangeCalendar.GridBody>
			{weeks.map((week) => (
				<RangeCalendar.Row key={week[0].iso}>
					{week.map((day) => (
						<RangeCalendar.Cell
							key={day.iso}
							aria-selected={day.inRange ? "true" : undefined}
							data-selection-start={day.iso === range.start ? "" : undefined}
							data-selection-end={day.iso === range.end ? "" : undefined}
						>
							{day.label}
						</RangeCalendar.Cell>
					))}
				</RangeCalendar.Row>
			))}
		</RangeCalendar.GridBody>
	</RangeCalendar.Grid>
</RangeCalendar>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `color?` | `Color` | Semantic color role for the bare fallback pair's focus rings. Defaults to DEFAULT_COLOR. |
| `startName?` | `string` | Native `name` submitted with an enclosing form, read only by the bare fallback's start-date input. |
| `endName?` | `string` | Native `name` submitted with an enclosing form, read only by the bare fallback's end-date input. |
| `startValue?` | `string` | Current start-of-range value, in `YYYY-MM-DD` form, for a bare fallback pair a consumer tracks itself. |
| `endValue?` | `string` | Current end-of-range value, in `YYYY-MM-DD` form, for a bare fallback pair a consumer tracks itself. |
| `startDefaultValue?` | `string` | Initial start-of-range value, in `YYYY-MM-DD` form, for a bare fallback pair left to the platform's own uncontrolled state. |
| `endDefaultValue?` | `string` | Initial end-of-range value, in `YYYY-MM-DD` form, for a bare fallback pair left to the platform's own uncontrolled state. |
| `min?` | `string` | Earliest accepted date, in `YYYY-MM-DD` form, read by both of the bare fallback pair's inputs. |
| `max?` | `string` | Latest accepted date, in `YYYY-MM-DD` form, read by both of the bare fallback pair's inputs. |
| `step?` | `number` | Granularity, in days, both of the bare fallback pair's values must fall on. |
| `required?` | `boolean` | Marks both of the bare fallback pair's inputs required for their enclosing form. |
| `disabled?` | `boolean` | Marks both of the bare fallback pair's inputs inert and excluded from the tab order. |
| `readOnly?` | `boolean` | Marks both of the bare fallback pair's inputs' values fixed, while keeping them focusable and included in form submission. |
| `autoComplete?` | `string` | Native autofill hint for both of the bare fallback pair's inputs, e.g. `"bday"`. |
| `startLabel?` | `string` | Accessible label for the bare fallback pair's start-date input. Read only when `children` is unset. |
| `endLabel?` | `string` | Accessible label for the bare fallback pair's end-date input. Read only when `children` is unset. |
| `parts?` | `PartsProps` | Per-part styling for the bare fallback pair's internally composed inputs. |

Also accepts everything in `TagProps<"div">`.


### RangeCalendar.Cell

Renders one calendar day for RangeCalendar, building on Calendar.Cell.

Also accepts everything in `Calendar.CellProps`.