Calendar Range — Playground
size
locale
messages
disabled dates
State
<kui-calendar-range [(value)]="range" [viewDate]="viewDate" />Calendar range events
- No events yet.
| Name | Type | Default | Description |
|---|---|---|---|
| [(value)] | KuiDateRange | null | null | Selected range, { start: Date; end: Date | null }. end is null while only the start has been picked; the first click after a committed range starts a new one. |
| [(viewDate)] | Date | current month | First-of-month date that controls the visible month. Left unbound it defaults to today, or to the month of the bound value.start at construction. |
| size | 'md' | 'sm' | undefined | undefined | Calendar density. sm drops the border and padding for sidebars. Falls back to defaults.calendarRange.size, then the global defaults.size, then md. |
| flat | boolean | undefined | undefined | Strips the calendar background, border and padding, for dropdown or popover panels. Falls back to defaults.calendarRange.flat, then false. |
| showWeekend | boolean | undefined | undefined | Mutes the weekend days of the locale. Falls back to defaults.calendarRange.showWeekend, then true. |
| showFooter | boolean | undefined | undefined | Shows the built-in footer with the current value and the Today shortcut. Falls back to defaults.calendarRange.showFooter, then false. |
| showPrevNav / showNextNav | boolean | undefined | undefined | Hide the previous or next header navigation control, for two linked calendars a month apart. Fall back to defaults.calendarRange, then true. |
| minDate / maxDate | Date | undefined | undefined | Inclusive lower and upper bounds. Dates outside them are disabled. |
| disabledDates | Date[] | ((date: Date) => boolean) | undefined | undefined | Individual disabled dates or a predicate evaluated for each rendered date. |
| locale | string | undefined | undefined | BCP 47 locale for month and weekday names, heading order, week start and weekend. It overrides the locale of the nearest KuiI18n level for this instance. |
| messages | Partial<KuiCalendarMessages> | undefined | undefined | Per-instance text overrides, the same group as the calendar. They win over scoped and root messages. |
| [kuiCalendarHeader] / [kuiCalendarFooter] | projected content | - | Replace the default header or footer entirely; the built-in block (and the showFooter toggle) renders only when nothing is projected. |
| --kui-calendar-width | CSS custom property | 296px | Overrides the fixed calendar width, as for kui-calendar. |
| KuiDateRange | interface | - | The value shape: { start: Date; end: Date | null }. |
| KuiCalendarOptions / KuiCalendarViewOptions | interfaces | - | Shape of defaults.calendarRange (size, flat, showWeekend, showFooter, showPrevNav, showNextNav, previousIcon, nextIcon), shared with kui-calendar. |
Inputs verified against @kikita-labs/ui v2.0.0 public typings.