Calendar
A date-field calendar for selecting dates.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
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 | 1 | 2 | 3 | 4 |
<script lang="ts">
import { Calendar } from "$lib/components/ui/calendar";
import { today, getLocalTimeZone } from "@internationalized/date";
let value = $state(today(getLocalTimeZone()));
</script>
<Calendar type="single" bind:value />Built on bits-ui + @internationalized/date for locale-aware, timezone-safe dates.
Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initAdd the date dependency, then copy the source into $lib/components/ui/calendar.
npm install @internationalized/dateUsage
<script lang="ts">
import { Calendar } from '$lib/components/ui/calendar';
import { today, getLocalTimeZone } from '@internationalized/date';
let value = $state(today(getLocalTimeZone()));
</script>
<Calendar type="single" bind:value />