COMPONENTS / ATOMS / al-calendar← ALL COMPONENTS

Calendar

<al-calendar><ALCalendar> REACTbeta

Reference generated from the custom elements manifest — 19 properties, 2 slots, 1 events.

PLAYGROUND8 CONTROLS
PREVIEW / al-calendar / SOUTHLEFT
Loading preview
dateFormat
FLAGS
ICON SLOTS
CODE — HTML / REACT
Guidance
NOT YET AUTHORED · 20 COMPONENTS COVERED
NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.
FIGMA PARITYNOT TRACKED
NO DESIGN-SYSTEM PROJECT TRACKS THIS COMPONENT AGAINST A FIGMA FILE — IT IS EITHER OUTSIDE EVERY PROJECT’S DECLARED SCOPE, OR NOT YET SEEDED INTO ITS PROJECT’S PARITY MANIFEST.
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXEcalendar--DefaultPASS
Advanced statesAXE3 further storiesPASS
Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED
Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED
MEASURED 2026-09-08 · 4 STORIES · AXE WCAG2A + WCAG2AA + WCAG21A + WCAG21AA + WCAG22AA
COLOR CONTRAST0 RULES FAILING
The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.
NO CONTRAST VIOLATIONS ACROSS THIS COMPONENT’S 4 STORIES.
INSTALL@southleft/al-web-components/components/calendar
import '@southleft/al-web-components/components/calendar';
import { ALCalendar } from '@southleft/al-react';
API — 19 PROPS17 DOCUMENTED
PROPTYPEDEFAULT
disabledMinDateanyMinimum date for disabled dates (format: yyyy/mm/dd)—
disabledMaxDateanyMaximum date for disabled dates (format: yyyy/mm/dd)—
multiYearnumberAmount of years to go before and after the current date3
previousButtonTextstring'Previous Month'
nextButtonTextstring'Next Month'
daysArray<any>Container for current days in month[]
yearsArray<any>Container for years toggle[]
showMonthPopupbooleanValue to track month picker display—
resetDatesbooleanMake active calendar date inactivefalse
selectedDateanySelected date—
setActiveDateanySet a specific date to be active—
datePickerIdanyInternal ID only for labeling date picker popup—
dateFormat'MMM dd, yyyy' | 'MM/dd/yyyy' | 'dd/MM/yyyy' | 'yyyy/MM/dd' | 'MMM dd yyyy' | 'dd MMM yyyy'Specify date format for UI display'MMM dd, yyyy'
fullDateFormatstringSpecify "full" date format for aria role'd, EEEE MMMM yyyy'
disabledbooleanDisabled attribute—
iconNamestringField note icon name—
isDayShortHandbooleanShow the day of the week as a short hand, e.g. "M" for Mondayfalse
startOnMondaybooleanStart the day of the week on Mondayfalse
monthSelectorLabelstringAccessible name for the month/year picker popup.

The popup is `role="dialog"` and its content is a grid of year headings and
month buttons, so it had no accessible name at all — a screen reader
announced "dialog" and nothing else. Settable rather than hardcoded so it
can be localised, matching `timeSelectorLabel` / `cancelLabel` on
al-date-time-picker.'Choose month and year'
SLOTS2
SLOTDESCRIPTION
beforeIf content is slotted, it will override the default "previous button" icon
afterIf content is slotted, it will override the default "next button" icon
EVENTS1
EVENTDESCRIPTIONTYPE
onCalendarChangeFired when a date is selected. Detail: `{ value, rawDate }` — the date formatted per `dateFormat`, and the underlying `Date` object.CustomEvent
PUBLIC METHODS17
METHODDESCRIPTION
updateGrid()Update the calendar grid to the month and year selected 1. Focus back on the month header button after month grid has been updated
setWeekdaysHeader()Make the calendar days header 1. Set the start of the week 2. Set the pattern for the day of the week 3. Add the day to the array 4. Return the array
setPrevMonth()Navigate previous in sequential month order 1. Go back a month if able to 2. Reset the calendar grid
setNextMonth()Navigate next in sequential month order 1. Go forward a month if able to 2. Reset the calendar grid
canChangeSubNavMonth()Validate if month can proceed previous. 1. If the current end of the month date is before the minimum date, return false
canChangeAddNavMonth()Validate if month can proceed next. 1. If the day is after the maximum date, return false
toggleMonthPopup()Toggle the month popup overlay 1. Starting Year: Get the current year - this.multiYear years (defaults to 3) 2. Ending Year: Get the current year + this.multiYear years (defaults to 3) 3. Get the years in between 4. Get the months in each year 5. Increment the year 6. Position scroll on year of clicked month
setGrid()Create days of month grid 1. Add empty days to align the first day of the month with the correct day of the week 2. Add the days of the selected month 3. Add empty days to align the end of the month with the end of the week
setActive()Apply active state if day has been selected 1. I'm adding a day because of some date fns bug that sets the date from string a day back 2. If a specific date is set, highlight it
setAvailableDay()Check if day can be selected
setAvailableMonth()Check if month can be selected
setToday()Check if day in calendar is today and highlight it
handleOnClickDay()Select the day and emit 1. Clear date reset 2. Bind to form control
handleOnChange()Change output binding
isRovingDay()Is this the day that carries `tabindex="0"`? Falls back — in order — to the explicitly focused day, the selected day, today, then the first day of the displayed month, so the grid always has exactly one tab stop.
handleOnGridKeydown()Handle keydown inside the day grid (WAI-ARIA grid keyboard model). 1. Left/Right move a day, Up/Down move a week 2. Home/End move to the start/end of the week 3. PageUp/PageDown move a month
handleOnKeydown()Handle keydown 1. Close the month calendar popup when escape is hit when the user is focused within the popup 2. Return focus back to the month selector button
SOURCE — components/calendar/calendar.ts · Atoms/Form/Calendar