Calendar

Full month calendar view with single/range selection modes, keyboard navigation, and min/max date bounds.

forms v0.7.0

Playground

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 { CgCalendar } from '@cognivo/components';

// Or tree-shake: import '@cognivo/components/cg-calendar';

Per-component imports ship only that component (~8 kB gzip).

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)

Event	Detail	Description
`cg-calendar-change`	{value: string, rangeEnd?: string}	Selection changed