Calendar

A calendar component that allows users to select dates.

Loading preview…

1<script lang="ts">
2	import { getLocalTimeZone, today } from '@internationalized/date';
3	import { Calendar } from './index.js';
4
5	let value = $state(today(getLocalTimeZone()));
6</script>
7
8<Calendar type="single" bind:value class="rounded-md border shadow-sm" captionLayout="dropdown" />
9

Installation

Usage

Use calendar for single date selection. Bind value and set type="single". Switch captionLayout between label, dropdown, dropdown-months, and dropdown-years.

1<script lang="ts">
2	import { getLocalTimeZone, today } from '@internationalized/date';
3	import { Calendar } from '~/components/calendar';
4
5	let value = $state(today(getLocalTimeZone()));
6</script>
7
8<Calendar type="single" bind:value class="rounded-md border shadow-sm" captionLayout="dropdown" />