Calendar
A date-field calendar for selecting dates.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
30 | 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 |
Built on bits-ui + @internationalized/date for locale-aware, timezone-safe dates.
Installation
Installs the style saved in lily.json. For a new Diamond project,
run lily-svelte init --style diamond first.
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 />