Skip to content

Calendar

A calendar component with month/year modes, supporting selection, disabled dates, week numbers, and keyboard grid navigation; date descriptions use Intl.DateTimeFormat (locale-aware).

Basic Usage

Month view (mode=month)

Click a date to select it and dispatch oas-change; the title opens a month-selection panel for quick month jumps.

Year View

Year view (mode=year)

In year mode, selecting a month dispatches yyyy-MM.

Disabled Range

min / max limits

Disabled Callback

disabled-date (disable weekends)

disabledDate is passed in via a property callback (functions cannot be expressed in JSON).

Week Numbers

Show week numbers (show-week-number)

Events

oas-change event

API

Attributes

AttributeDescriptionTypeDefault
disabledDateDisabled callback (property)((d: Date) => boolean) | null
maxSelectable range (ISO dates)string
minSelectable range (ISO dates)string
modemonth / yearstringmonth
show-week-numberShow the ISO week number columnboolean
valueSelected value (ISO)string

Events

EventDescription
oas-changeSelection change, detail: { value }

Keyboard: /// to move within the grid, Enter to select.