Calendar

organisms

Month/date picker grid. Full calendar with navigation, selection, and disabled dates.

ARIA Role: grid

Demo

Demo for Calendar (organisms)

Month/date picker grid. Full calendar with navigation, selection, and disabled dates.

Props

Prop	Type	Required	Default	Description
`value`	`Date`	No	`—`	Selected date
`onChange`	`(date: Date) => void`	Yes	`—`	Date change handler
`minDate`	`Date`	No	`—`	Minimum selectable date
`maxDate`	`Date`	No	`—`	Maximum selectable date
`disabledDates`	`Date[]`	No	`—`	Dates to disable
`showOutsideDays`	`boolean`	No	`true`	Show previous/next month days

TypeScript Interface

interface CalendarProps {
  value?: Date;
  onChange: (date: Date) => void;
  minDate?: Date;
  maxDate?: Date;
  disabledDates?: Date[];
  showOutsideDays?: boolean;
}

Assertions (NASA Rule 5)

[aria]role='grid' with gridcell children(WAI-ARIA APG)
[aria]Current date marked with aria-current='date'(WCAG 1.3.1)
[keyboard]Arrow keys navigate, Enter selects, PageUp/Down changes month(WCAG 2.1.1)
[validation]Dates outside min/max must be aria-disabled(NASA Rule 5)

Usage

Import

import { Calendar } from '@epasslive/design-system'

Basic

<Calendar />

With Variants

<Calendar variant="primary" size="md" />