Forms

Stable - @kikita-labs/ui v1.6.1

Calendar

Inline month grid for single-date and range selection.

Import

Calendar is a standalone component with optional locale provider helpers.

calendar.ts
import {
  KuiCalendarComponent,
  kuiProvideLocale,
  type KuiCalendarValue,
  type KuiDateRange,
} from '@kikita-labs/ui';

Usage

Open in Playground

Bind value with a signal and keep Date objects in component state.

SunMonTueWedThuFriSat
2026-07-14
SunMonTueWedThuFriSat
<div class="basic-calendar-example">
  <kui-calendar [(value)]="selectedDate" [minDate]="minDate" showFooter />

  <kui-calendar mode="range" size="sm" [(value)]="sprintRange" locale="en-US" />
</div>

States and composition

The installed API covers range selection, disabled dates, locale, footer, and popover-friendly flat mode.

  • Use mode="range" when the value is a KuiDateRange.
  • Use minDate, maxDate, or disabledDates to block days.
  • Use flat inside kui-dropdown so panel chrome is not doubled.
  • Use locale or kuiProvideLocale() for month names and week start.

API

Inputs, models, projection slots, and locale helpers verified against @kikita-labs/ui v1.6.1 public typings.

NameTypeDefaultDescription
mode'single' | 'range''single'Selection mode. Range mode stores a start date and a nullable end date.
[(value)]Date | KuiDateRange | nullnullSelected date in single mode or selected range in range mode.
[(viewDate)]Datecurrent monthFirst-of-month date that controls the visible month.
size'md' | 'sm''md'Calendar density. Use sm when embedding in tighter sidebars or panels.
flatbooleanfalseRemoves the calendar frame for dropdown or popover panel composition.
showWeekendbooleantrueMutes Saturday and Sunday labels when enabled.
showFooterbooleanfalseShows the built-in value summary and Today shortcut.
minDate / maxDateDate | undefinedundefinedInclusive lower and upper bounds for selectable days.
disabledDatesDate[] | ((date: Date) => boolean) | undefinedundefinedIndividual disabled dates or a predicate evaluated for each rendered date.
localestring | undefinedKUI_LOCALEBCP 47 locale override for month names, weekday names, and week start.
showPrevNav / showNextNavbooleantrueHide one header navigation control for linked multi-calendar layouts.
[kuiCalendarHeader] / [kuiCalendarFooter]projected content-Replace the default header or footer with consumer-owned content.
kuiProvideLocale(locale)Provider-Provides the default app or subtree locale used by date-aware components.
--kui-calendar-widthCSS custom property296pxOverrides the fixed calendar width while keeping the day grid predictable.

Accessibility

Calendar owns grid semantics and roving focus; consumers provide context around the picker.

  • The day grid uses role="grid" with one focusable day at a time.
  • Selected days expose aria-selected; today exposes aria-current="date".
  • Arrow keys, Home, End, PageUp, PageDown, Enter, and Space are handled by the grid.
  • Provide nearby text or a surrounding field label when the calendar appears in a larger form.
  • Assistive-technology review is still pending for the newest date primitives.