To source

a-calendar

Calendar element for date or date-range selection.

The a-calendar element provides a fully accessible calendar for selecting single dates or date ranges. It supports localisation, highlighted dates, unavailable dates, and min/max constraints.

Installation

import "@sv/elements/calendar";

Usage

Single date selection:

<a-calendar name="date" value="2024-03-15"></a-calendar>

Date range selection:

<a-calendar mode="range" name="dates" value="2024-03-15/2024-03-20"></a-calendar>

Custom locale and week start:

<a-calendar locale="de-DE" week-start="1"></a-calendar>

Highlighted Dates

Highlight specific dates or ranges:

<a-calendar highlight="2024-03-15"></a-calendar>
<a-calendar highlight="2024-03-10/2024-03-16"></a-calendar>
<a-calendar highlight="2024-03-05,2024-03-15/2024-03-18,2024-03-25"></a-calendar>

Unavailable Dates

Mark dates as unavailable:

<a-calendar unavailable="2024-03-15"></a-calendar>
<a-calendar unavailable="2024-03-10/2024-03-16"></a-calendar>

Min/Max Constraints

Restrict selectable dates:

<a-calendar min="2024-03-01" max="2024-03-31"></a-calendar>

CSS Custom Properties

PropertyDefaultDescription
--calendar-hover-bgrgba(0,0,0,0.08)Hover background color
--calendar-selected-bg#1d4ed8Selected date background
--calendar-selected-colorwhiteSelected date text color
--calendar-range-bgrgba(29,78,216,0.2)Range selection background
--calendar-highlight-bgrgba(234,179,8,0.4)Highlighted date background
--calendar-focus-outlinecurrentColorFocus outline color

Accessibility

  • Keyboard Navigation: Full keyboard support for navigating dates with Arrow keys, Page Up/Down for months, and Enter to select.
  • ARIA Labels: Days are labelled with full date information for screen readers.
  • Focus Management: Focus is visible and moves logically through the calendar grid.
KeyAction
ArrowLeft / ArrowRightMove to previous/next day
ArrowUp / ArrowDownMove to same day in previous/next week
PageUp / PageDownMove to previous/next month
Home / EndMove to first/last day of month
Enter / SpaceSelect the focused date

CalendarElement

Calendar element for date or date-range selection. Supports different locales, week start configuration, and leap years.

Example

<a-calendar name="date" value="2024-03-15"></a-calendar>

Attributes

Name Type Default value Description
disabled boolean false

Whether the calendar is disabled.
focusedDate string undefined

Currently focused date for keyboard navigation.
focusedYear number undefined

Currently focused year for keyboard navigation in year picker.
highlight string undefined

Dates or ranges to highlight visually. Comma-separated list of dates (YYYY-MM-DD) or ranges (YYYY-MM-DD/YYYY-MM-DD).
hoverDate string undefined

Hovered date for range preview.
locale string navigator.language

BCP 47 locale tag for month/day names.
max string undefined

Maximum selectable date (YYYY-MM-DD).
min string undefined

Minimum selectable date (YYYY-MM-DD).
mode "single" | "range" "single"

Selection mode: "single" for single date, "range" for date range.
name string undefined

FormData name of the field.
rangeFocus "start" | "end" "start"

Which date of a range to focus for initial view month. Only applies when mode="range" and a value is provided.
rangeStart string undefined

Temporary range start during range selection.
unavailable string undefined

Dates or ranges to mark as unavailable. Comma-separated list of dates (YYYY-MM-DD) or ranges (YYYY-MM-DD/YYYY-MM-DD).
value string undefined

The value of the field. Single mode: "YYYY-MM-DD" Range mode: "YYYY-MM-DD/YYYY-MM-DD"
viewDate Date ...

Currently displayed month/year for navigation.
weekStart number undefined

First day of the week (0 = Sunday, 1 = Monday, ..., 6 = Saturday). Defaults to locale-appropriate value.
yearPickerOpen boolean false

Whether the year picker menu is open.

Events

Name Description
change

Fired when the value changes (selection complete).
input

Fired during range selection (intermediate states).

References