Calendar
Month-grid date picker with single/multiple/range selection, a quick month/year picker, keyboard navigation, min/max constraints, and full Angular Forms (CVA) integration — the foundation Date Picker will build on.
SunMonTueWedThuFriSat
API
All inputs and configuration options for zyra-calendar.
| Prop | Type | Default | Description |
|---|---|---|---|
value | Date | Date[] | { start: Date | null; end: Date | null } | null | null | Two-way bound selection via [(value)] or ngModel — shape depends on selectionMode |
selectionMode | 'single' | 'multiple' | 'range' | 'single' | Controls the selection behavior and the shape of value |
min | Date | null | null | Dates before this are disabled |
max | Date | null | null | Dates after this are disabled |
firstDayOfWeek | number | 0 | 0 = Sunday, 1 = Monday, etc. — controls the weekday column order |
locale | string | 'en-US' | Locale used to format the month label and weekday names |
dateSelected (output) | Date | - | Emits the clicked/confirmed date on every selection, regardless of mode |
monthChange (output) | { year: number; month: number } | - | Emits whenever the visible month changes |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Grid uses role="grid"/role="row"/role="gridcell" on the day buttons
- Only the focused day is in the tab order (roving tabindex) — Arrow keys move focus between days
- Today's date is marked with aria-current="date"
- The month label is a button with aria-haspopup for the month/year picker view