Calendar
Interactive calendar grid for date navigation and event overlays
May 17–23
Sun May 17
Mon May 18
Tue May 19
Wed May 20
Thu May 21
Fri May 22
Sat May 23
Travel
Stay
Meeting
Ground
Rail
Executive briefing
Accessibility
- Pair the control with a visible label or aria-label and keep helper or error text programmatically associated.
- Provide native name, autocomplete, and value wiring when the component participates in form submission.
Styled quick start
Copy this entrypoint first. It includes the imports required to get the component on screen.
svelte
<script lang="ts">
import '@dryui/ui/themes/default.css';
import '@dryui/ui/themes/dark.css';
import { Calendar } from '@dryui/ui';
</script>
<Calendar.Root>
<Calendar.Header>...</Calendar.Header>
<Calendar.Grid>...</Calendar.Grid>
<Calendar.Week>...</Calendar.Week>
<Calendar.Prev>...</Calendar.Prev>
<Calendar.Next>...</Calendar.Next>
<Calendar.Heading>...</Calendar.Heading>
<Calendar.EventLegend>...</Calendar.EventLegend>
</Calendar.Root>Import options
Root package
ts
import { Calendar } from '@dryui/ui'Per-component subpath
ts
import { Calendar } from '@dryui/ui/calendar'API
Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
Calendar.Root | |||||
| value | Date | null | Current controlled or bindable value. | $bindable<Date | null>(null) | — | ✓ |
| locale | string | — | 'en-US' | — | — |
| min | Date | null | Minimum allowed value. | null | — | — |
| max | Date | null | Maximum allowed value. | null | — | — |
| disabled | boolean | Prevents interaction and applies disabled styling. | false | — | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
Calendar.Header | |||||
| children | Snippet | Content rendered inside the component. | — | — | — |
Calendar.Grid | |||||
| events | readonly CalendarEventItem[] | — | — | — | — |
| eventDisplay | dotsbars | — | — | — | — |
| maxEventLanes | number | — | — | — | — |
| visibleMonths | 12 | — | — | — | — |
| eventContent | Snippet<[CalendarEventRenderContext]> | — | — | — | — |
Calendar.Week | |||||
| event | Snippet<[{ event: CalendarEvent; category: CalendarEventCategory | undefined }]> | — | — | — | — |
Calendar.Prev | |||||
| children | Snippet | Content rendered inside the component. | — | — | — |
Calendar.Next | |||||
| children | Snippet | Content rendered inside the component. | — | — | — |
Calendar.Heading | |||||
Calendar.EventLegend | |||||