@kit-ng-ui/calendar

Month / year grid with cell-render hook. Designed to stand alone as a date browser, and to power <kit-date-picker> internally.

Install

pnpm add @kit-ng-ui/calendar

@use '@kit-ng-ui/calendar/styles' as calendar;

Usage

<kit-calendar [(value)]="picked" (panelChange)="onMonthShown($event)" />

<!-- Fullscreen "Outlook" style -->
<kit-calendar fullscreen [(value)]="picked" />

<!-- Year mode -->
<kit-calendar mode="year" [(value)]="picked" />

Cell render hook

cellRender = (cell: KitCalendarCell) =>
  cell.isWeekend ? '🌙' : null;

API

| Input | Type | Default | | ------------- | ---------------------------------------------- | ---------- | | value | Date \| null (two-way) | null | | mode | 'month' \| 'year' | 'month' | | fullscreen | boolean | false | | cellRender | KitCalendarCellRender \| null | null |

| Output | Payload | | -------------- | ----------------------------- | | panelChange | { year: number; month: number } | | selectChange | Date |