Calendar — Playground
size
locale
messages
disabled dates
State
<kui-calendar [(value)]="selectedDate" />Calendar events
- No events yet.
| Name | Type | Default | Description |
|---|---|---|---|
| [(value)] | Date | null | null | Selected date. For a start and end pair use kui-calendar-range, whose value is a KuiDateRange | null. Next to input[kuiDatePicker] in the same field the directive wires it for you. |
| messages | Partial<KuiCalendarMessages> | undefined | undefined | Per-instance text overrides (label, today, previousMonth, nextMonth, previousYear, nextYear, previousDecade, nextDecade). They win over scoped and root messages. |
| [(viewDate)] | Date | current month | First-of-month date that controls the visible month. |
| size | 'md' | 'sm' | 'md' | Calendar density. Use sm when embedding in tighter sidebars or panels. |
| flat | boolean | false | Removes the calendar frame for dropdown or popover panel composition. |
| showWeekend | boolean | true | Mutes the weekend days of the locale (Saturday and Sunday in en-US) when enabled. |
| showFooter | boolean | false | Shows the built-in value summary and Today shortcut. |
| [(minDate)] / [(maxDate)] | Date | undefined | undefined | Inclusive lower and upper bounds for selectable days. Models, so a paired input[kuiDatePicker] can wire them from its own bounds. |
| disabledDates | Date[] | ((date: Date) => boolean) | undefined | undefined | Individual disabled dates or a predicate evaluated for each rendered date. |
| locale | string | undefined | KUI_LOCALE | BCP 47 locale override for month names, weekday names, the heading, week start and weekend. It wins over the locale of the nearest KuiI18n level. |
| showPrevNav / showNextNav | boolean | true | Hide one header navigation control for linked multi-calendar layouts. |
| [kuiCalendarHeader] / [kuiCalendarFooter] | projected content | - | Replace the default header or footer with consumer-owned content. |
| provideKuiLocale(locale) | Provider[] | - | Sets the locale of a subtree (a tag, a Signal or a function). Use provideKikitaUi({ locale }) for the whole application. |
| --kui-calendar-width | CSS custom property | 296px | Overrides the fixed calendar width while keeping the day grid predictable. |
| KuiCalendarOptions / KuiCalendarViewOptions | interfaces | - | Shape of defaults.calendar (size, flat, showWeekend, showFooter, showPrevNav, showNextNav, previousIcon, nextIcon), shared with kui-calendar-range. |
| KuiCalendarMessages | interface | - | Typed messages of the calendar and the calendar range, with English defaults. |
| kui-picked | DOM event | - | Bubbling event the calendar dispatches after a date pick, so an enclosing kui-dropdown can close. |
Inputs, models, projection slots, provider defaults, messages and locale helpers verified against @kikita-labs/ui v2.0.0 public typings.