Range Calendar

A calendar component that allows users to select a range of dates.

Loading preview…

Installation

Usage

Use range calendar for start–end date selection. Bind value as { start, end }. Switch captionLayout between label, dropdown, dropdown-months, and dropdown-years.

1<script lang="ts">
2	import { getLocalTimeZone, today } from '@internationalized/date';
3	import { RangeCalendar } from '~/components/range-calendar';
4
5	const start = today(getLocalTimeZone());
6	let value = $state({
7		start,
8		end: start.add({ days: 7 })
9	});
10</script>
11
12<RangeCalendar bind:value class="rounded-md border shadow-sm" captionLayout="dropdown" />