Ready for Dev, so its markup, attributes, events and styles can all still change without notice,
it is not covered by the accessibility gate, and it is not published to npm. It is on this site so the work
can be seen and reviewed - nothing more.
Calendar
A date picker calendar component for viewing and selecting dates.
Usage
<section is="root-calendar" aria-label="Calendar"></section>
<section is="root-calendar" value="2026-07-15" min="2026-01-01" max="2026-12-31"></section>
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
value |
string (ISO date) |
- | Initially selected date |
min |
string (ISO date) |
- | Minimum selectable date |
max |
string (ISO date) |
- | Maximum selectable date |
locale |
string |
navigator.language |
Locale for formatting |
aria-label |
string |
'Calendar' |
Accessible label |
Events
| Event | Detail | Description |
|---|---|---|
root-calendar.date-select |
{ date } (ISO string) |
Fired when a date is selected |
Methods
| Method | Description |
|---|---|
prevMonth() |
Navigate to previous month |
nextMonth() |
Navigate to next month |
selectDate(date) |
Programmatically select a date |
focusDate(date) |
Focus a specific date button |
Extends
HTMLElement - use with <section is="root-calendar">.