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)

Example

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)

Example

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

Disabled Range

min / max limits

Example

Disabled Callback

disabled-date (disable weekends)

Example

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

Week Numbers

Show week numbers (show-week-number)

Example

Events

oas-change event

Example

Custom Cells

Event-marked calendar (oas-cell-render marks holidays)

Example

oas-cell-render is dispatched for each rendered day cell (detail: { date, element }), letting the host append markers/badges/rich content (e.g. holidays, event dots); alternatively drop a <template slot="cell"> inside the component for a static skeleton whose [data-cell-date] node is auto-bound to the day number. Appending <span class="cell-dot"> inside element shows the built-in marker dot (uses the --oas-color-danger token; adapts to light/dark themes).

Mode Switching

Mode switching (month ↔ year quick year jump)

Month viewYear view

Example

mode="year" shows a 12-month grid; the previous/next year buttons in the header quickly switch years. Picking a month selects it (dispatches oas-change with value yyyy-MM) and auto-switches back to the month view (dispatches oas-mode-change). In a controlled scenario, listen to oas-mode-change and re-set the mode attribute to keep a specific mode.

API

Attributes

Attribute	Description	Type	Default
disabledDate	Disabled callback (property)	((d: Date) => boolean) | null	—
max	Selectable range (ISO dates)	string	—
min	Selectable range (ISO dates)	string	—
mode	month / year (in year mode, picking a month auto-switches back to month view)	string	month
show-week-number	Show the ISO week number column	boolean	—
value	Selected value (ISO)	string	—

Events

Event	Description
oas-cell-render	Dispatched when each day cell renders, detail: { date, element } (element is the day button; host can append markers/badges/rich content)
oas-change	Selection change, detail: { value }
oas-mode-change	Dispatched when year mode auto-switches back to month view after picking a month, detail: { mode }

Slots

Name	Description
template[slot="cell"]	Static template for day cells, cloned into each day button; the [data-cell-date] node is bound to the day number

Keyboard: ↑/↓/←/→ to move within the grid, Enter to select.