Components / Calendar
Calendar
Full month calendar view with single/range selection modes, keyboard navigation, and min/max date bounds.
formsv0.7.0
Playground
Examples
Single date
<cg-calendar value="2026-04-15"></cg-calendar>Date range
<cg-calendar mode="range" value="2026-04-10" range-end="2026-04-20"></cg-calendar>Import
import { CgCalendar } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-calendar';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | "" | Selected date (ISO format) |
range-end | string | "" | Range end date (range mode) |
mode | "single" | "range" | "multiple" | "single" | Selection mode |
min | string | "" | Minimum date (ISO) |
max | string | "" | Maximum date (ISO) |
week-starts-on | 0 | 1 | 0 | First day of week (0=Sun, 1=Mon) |
Events
| Event | Detail | Description |
|---|---|---|
cg-calendar-change | {value: string, rangeEnd?: string} | Selection changed |