# `lr-calendar` - **Import** `import '@aceshooting/lyra-ui/components/lr-calendar.js';` (stable tag alias; registers the tag) - **Class** `LyraCalendar`, also available unregistered from `@aceshooting/lyra-ui/components/data/calendar/calendar.class.js` - **Family** `components/data/` — see `llms/index.md` for its siblings - **Status** `stable` since `4.0.0` — see the maturity and deprecation policy in `llms/shared.md` - **Release history** [CHANGELOG.md](../../CHANGELOG.md); family-wide breaking-change summaries: [llms-full.txt](../../llms-full.txt) - **Deprecations** none - **Optional peers** none - **Themeable via** 16 parts, 12 custom properties — see this component's own `@csspart`/`@cssprop` list below - **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md` --- ## `lr-calendar` Responsive month calendar with event markers and an agenda view. Early ISO dates such as `0001`, `0099`, and `0100` retain their authored local year in the month grid and month navigation. Valid colored agenda actions preserve their foreground/background pairing through hover and press, with the existing state tokens remaining overridable. Arbitrary caller colors still require the caller to choose an accessible contrast pair. **Properties:** - `events: CalendarEvent[] = []` (attribute: false) — `{ readonly id?, readonly date, readonly title, readonly color?, readonly data? }`; `date` accepts an ISO `YYYY-MM-DD` string, finite epoch milliseconds, or a valid `Date`, then normalizes to the displayed ISO day. Invalid date/title rows are omitted; `lr-event-select.detail.event` remains the original admitted object. `color` is sanitized before use as the marker background. The former ignored `start`/`end` fields are not part of the contract; use one event per displayed date - `value: string = ''` — the selected ISO date - `viewDate: string` (attribute `view-date`, defaults to the 1st of the current month) — the visible month; an unparseable value falls back to the current month - `view: CalendarView = 'month'`, where `CalendarView = 'month' | 'agenda'` (reflected) — agenda lists the effective visible month's events, date-sorted. Foreign tokens normalize and reflect to `month` - `firstDayOfWeek: LyraCalendarFirstDayOfWeek = 'auto'` (attribute `first-day-of-week`) — which weekday the grid starts on. **Breaking in 10.0.0:** the default was a hardcoded `1` (Monday) regardless of locale; it now derives from the effective locale through the same `resolveFirstDayOfWeek()` contract ``/`` already use, so an unset `` renders Sunday-first under `en-US` and Monday-first under `fr-FR` instead of disagreeing with a date picker on the same page. **Also breaking in 10.0.0:** the bare `0`–`6` integer form is gone; the value is now one of the shared weekday-name tokens (`'auto'`, then `'sun'` through `'sat'`), which pins the week start independent of locale. Pass `'mon'` to keep the pre-10.0.0 rendering. - `accessibleLabel: string = ''` (attribute `aria-label`) — names the host. The nested calendar section retains the localized purpose name rather than duplicating an authored host name; when set programmatically without a host attribute, this value names the section **Keyboard:** the month grid is a fixed 6×7 matrix (leading/trailing days of adjacent months fill it out) with one roving tab stop — `focusedDate`, else `value`, else today, else the first rendered day. Arrows move by 1 day (Left/Right swapped under RTL) or 7; stepping past the rendered grid rolls `viewDate` to the target's month and emits `lr-view-change`. Enter/Space select. **Events:** `lr-date-select` (`detail: { date }`), `lr-event-select` (`detail: { event }`), `lr-view-change` (`detail: { viewDate }`, from the prev/next buttons and out-of-grid arrow moves). **Slots:** none. **CSS parts:** `header` and `navigation` are aliases on the header wrapper; `nav` is shared by both month-navigation buttons; `previous-button` and `next-button` identify each direct button; `nav-glyph` is the chevron (`scaleX(-1)`-mirrored under RTL); `title`, `weekdays`, `weekday`, `grid`, `week` (`display: contents`), `day`, `date`, `event` (a month-view marker), `agenda`, and `agenda-event`. **Themeable custom properties:** `--lr-calendar-day-min-block-size` (default `var(--lr-size-6rem)`) and `--lr-calendar-day-min-block-size-narrow` (default `var(--lr-size-4rem)`, applied at container inline-size ≤ 28rem); `--lr-calendar-day-selected-bg` (default `var(--lr-color-brand-quiet)`) for a selected day's background; `--lr-calendar-day-outside-color` (default `var(--lr-color-text-quiet)`) and `--lr-calendar-day-outside-bg` (default `var(--lr-color-surface)`) for adjacent-month days; and `--lr-calendar-day-today-outline-color` (default `var(--lr-color-brand)`) for today's outline. `--lr-calendar-nav-hover-bg`, `--lr-calendar-nav-active-bg`, `--lr-calendar-day-hover-bg`, `--lr-calendar-day-active-bg`, `--lr-calendar-agenda-event-hover-bg`, and `--lr-calendar-agenda-event-active-bg` independently theme navigation, day, and agenda-event hover/pressed states through inheritable inline fallbacks. These state hooks use inline fallbacks at their paint rules, so an application theme can set them on an ancestor. They keep persistent selection, outside-month chrome, and today's outline independent from shared tokens that also drive unrelated component states. Month-view `[part='event']` markers are real keyboard-focusable buttons inside a non-interactive `role="gridcell"` day container; Enter/Space activates the same `lr-event-select` path as a pointer. Their target stays at least 24×24 CSS px even in the narrow month layout. Agenda view likewise renders each event as a ``.