Forms
Calendar
A month grid for choosing a day or a range of days. Shows the Hijri, Persian or any other calendar while storing ordinary dates.
Installation
npx sinaui add calendarCopy src/lib/ui/Calendar.svelte, Button.svelte, Icon.svelte, announce.ts and tokens.css. Dates use @internationalized/date.
Examples
One day
Fridays can't be chosen here: pass isUnavailable for closed days.
October 2026
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
<script lang="ts">
import { CalendarDate } from '@internationalized/date';
import Calendar from '#lib/ui/Calendar.svelte';
let lecture = $state(new CalendarDate(2026, 10, 14));
// Fridays are for prayer and rest: no lectures.
const closed = (d: CalendarDate) => d.toDate('UTC').getUTCDay() === 5;
</script>
<Calendar label="Lecture day" bind:value={lecture} isUnavailable={closed} />A range, two months
Choose a first day, then a last; the days between fill in as you point.
October 2026
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
November 2026
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
<script lang="ts">
import { CalendarDate } from '@internationalized/date';
import Calendar, { type DateRange } from '#lib/ui/Calendar.svelte';
let visit = $state<DateRange>({
start: new CalendarDate(2026, 10, 12),
end: new CalendarDate(2026, 10, 18)
});
</script>
<Calendar label="Library visit" mode="range" months={2} bind:range={visit} />In the Hijri calendar
The grid shows Hijri months and days; what you get back is the Gregorian date.
Jumada I 1448 AH
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
Stored as 2026-10-14
<script lang="ts">
import { CalendarDate } from '@internationalized/date';
import Calendar from '#lib/ui/Calendar.svelte';
// Shown in the Hijri calendar; the value is still an ordinary Gregorian date.
let day = $state(new CalendarDate(2026, 10, 14));
</script>
<Calendar label="Day of the observation" calendar="islamic-umalqura" bind:value={day} />
<p>Stored as {day.toString()}</p>
<style>
p {
margin: 0.75rem 0 0;
color: var(--ui-muted);
font-size: 0.875rem;
text-align: center;
}
</style>Props
| Prop | Type | Default |
|---|---|---|
label | string | required |
value | CalendarDate (bindable) | |
mode | 'single' | 'range' | 'single' |
range | { start, end } (bindable) | |
months | number | 1 |
calendar | string, such as 'islamic-umalqura' | 'gregory' |
min, max, isUnavailable | limits | |
locale | string | 'en' |
Accessibility
- A grid: arrow keys move by day and week, Page Up and Page Down by month (with Shift, by year), Home and End to the week's ends.
- Unavailable days are announced as such and can't be chosen.
- Changing month is announced.