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 |
Tokens
CSS custom properties zyra-calendar reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Background--zyra-color-calendar-bg | var(--zyra-color-surface-inset) | Fill color of the calendar panel. |
Text--zyra-color-calendar-text | var(--zyra-color-foreground) | Base text color: month/year label, weekday header, and in-month day numbers. |
Border--zyra-color-calendar-border | var(--zyra-color-border-color) | Border color of the panel. |
Hover background--zyra-color-surface-raised | var(--zyra-color-bg-raised) | Fill color of a day cell, or the prev/next month buttons, on hover. |
Outside-month text--zyra-color-foreground-subtle | var(--zyra-color-text-dim) | Text color for days outside the current month. |
Today ring--zyra-color-primary | var(--zyra-color-accent) | Inset ring around today's date, and focus-outline color. |
Selected background--zyra-color-primary | var(--zyra-color-accent) | Fill color of a selected date (or range endpoint). |
Selected text--zyra-color-on-brand | var(--zyra-color-btn-primary-text) | Text color of a selected date, kept readable against the accent fill. |
Range background--zyra-color-primary-subtle | var(--zyra-color-accent-muted) | Fill color of days between a selected range's two endpoints. |
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