Components
Calendar
A month-view date selector with keyboard navigation, localized labels, and themeable day content.
Props
Native attributes and events are forwarded to the root Div. Import Calendar from sveltewind/components; CalendarDay is also exported as a type.
Theme entries: calendar,calendarHeader,calendarTitle,calendarNavigation,calendarGrid,calendarHead,calendarRow,calendarWeekday,calendarCell,calendarDay. The calendarDay entry uses today, selected, and disabled
state variants.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | $bindable('') | Selected YYYY-MM-DD date. Empty means no selection. |
month | string | undefined | $bindable(undefined) | Visible month as YYYY-MM-DD. Defaults to the selected date or local today. Navigation writes the first day of the month. |
min / max | string | undefined | Inclusive selectable YYYY-MM-DD bounds. |
isDateDisabled | (date: string) => boolean | undefined | Return true to prevent selection of a date. |
disabled | boolean | false | Disable selection, navigation, and keyboard focus. |
locale | string | 'en-US' | Intl locale for month, weekday, and full date labels. Uses the Gregorian calendar. |
weekStartsOn | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 0 | First weekday, from Sunday (0) through Saturday (6). |
label | string | 'Choose a date' | Accessible group label; aria-label takes precedence. |
previousLabel / nextLabel | string | 'Previous month' / 'Next month' | Accessible navigation labels; supply translations with locale. |
onValueChange | (value: string) => void | undefined | Called when the user selects an available date. |
onMonthChange | (month: string) => void | undefined | Called when the user navigates to another month. |
day | Snippet<[CalendarDay]> | undefined | Custom non-interactive day content: date, day, selected, today, disabled. |
children | Snippet | undefined | Optional content after the month grid. |
class | string | '' | Tailwind utilities merged after theme styles and variants. |
variants | string[] | [] | Ordered variants: compact (reduced width/day height), bordered (outline), soft (surface). Variants can be combined and support theme references. |
theme | Theme | globalTheme | Local theme override, passed to all component parts. |
element | HTMLDivElement | null | $bindable(null) | Bindable root element. |
isVisible | boolean | $bindable(true) | Bindable root visibility. |
transition | TransitionProps | [noopTransition, {}] | Root transition function and options. |
inTransition / outTransition | TransitionProps | undefined | Root enter and exit transition overrides. |
Default usage
Import Calendar from sveltewind/components. This example shows its default styling in a usable context.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
Selected: 2026-10-15
Loading...Values are date-only strings, not timestamps. Use YYYY-MM-DD for years 0001–9999; do not convert values through toISOString. Invalid values or months fall back to the selected date or local today; invalid bounds are ignored. Navigation never changes the selection. After navigating, the month stays independent of value; bind month to control the visible month externally.
Arrow keys move one day or week. Home and End move to the start or end of a week. Page Up and Page Down move one month; hold Shift to move one year. Enter or Space selects. Tab enters the grid at one day and then leaves it. Unavailable dates remain focusable and announce aria-disabled, but cannot be selected. A fully disabled calendar removes all controls from the tab order.
The visible month is clamped to the bound months. Bounds prevent navigation beyond their months. Disabled-date callbacks do not block browsing. Existing selections are retained if constraints change. Use a hidden input bound to value when submitting a native form. Keep custom day content non-interactive and provide any additional accessible day description in your snippet.
Examples
Theme variants
Every variant available for Calendar in the built-in themes is shown below.
compact — Apply the compact variant.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
Loading...bordered — Apply the bordered variant.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
Loading...soft — Apply the soft variant.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
Loading...Class overrides
Override the calendar surface locally.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
Loading...Date constraints and localization
Use Monday-first weeks, localized labels, and inclusive date bounds.
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
Loading...Custom day content
Decorate a day using its date and selection state. Keep snippet content non-interactive.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
Choose a date for your appointment.
Loading...