A month grid to pick a start and an end date.

October 2026
SuMoTuWeThFrSa
27
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
November 2026
SuMoTuWeThFrSa
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
4
5

Trip: 2026-10-29 → 2026-11-04

Usage

Example.svelte 
<script lang="ts">
	import {
		type DateValue,
		getLocalTimeZone,
		today,
	} from "@internationalized/date";

	import { RangeCalendar } from "@orochibraru/ui/range-calendar";

	const start = today(getLocalTimeZone());
	let value = $state<{
		start: DateValue | undefined;
		end: DateValue | undefined;
	}>({
		start,
		end: start.add({ days: 6 }),
	});
</script>

<div class="flex flex-wrap items-start gap-6">
	<RangeCalendar bind:value numberOfMonths={2} class="rounded-md border" />
	<p class="text-muted-foreground text-sm">
		Trip: {value.start?.toString() ?? "…"} → {value.end?.toString() ?? "…"}
	</p>
</div>