Slots

default — The default slot for the calendar.

title — Renders the title of the calendar header.

header-date — Renders content instead of the current date/range in the calendar header.

CSS Parts

header — The header element of the calendar.

header-title — The header title element of the calendar.

header-date — The header date element of the calendar.

content — The content element which contains the views and navigation elements of the calendar.

content-vertical — The content element which contains the views and navigation elements of the calendar in vertical orientation.

navigation — The navigation container element of the calendar.

months-navigation — The months navigation button element of the calendar.

years-navigation — The years navigation button element of the calendar.

years-range — The years range element of the calendar.

navigation-buttons — The navigation buttons container of the calendar.

navigation-button — Previous/next navigation button of the calendar.

days-view-container — The days view container element of the calendar.

days-view — Days view element of the calendar.

months-view — The months view element of the calendar.

years-view — The years view element of the calendar.

days-row — Days row element of the calendar.

label — Week header label element of the calendar.

week-number — Week number element of the calendar.

week-number-inner — Week number inner element of the calendar.

date — Date element of the calendar.

date-inner — Date inner element of the calendar.

first — The first selected date element of the calendar in range selection.

last — The last selected date element of the calendar in range selection.

inactive — Inactive date element of the calendar.

hidden — Hidden date element of the calendar.

weekend — Weekend date element of the calendar.

range — Range selected element of the calendar.

special — Special date element of the calendar.

disabled — Disabled date element of the calendar.

single — Single selected date element of the calendar.

preview — Range selection preview date element of the calendar.

month — Month element of the calendar.

month-inner — Month inner element of the calendar.

year — Year element of the calendar.

year-inner — Year inner element of the calendar.

selected — Indicates selected state. Applies to date, month and year elements of the calendar.

current — Indicates current state. Applies to date, month and year elements of the calendar.

activeView: CalendarActiveView

formatOptions: Pick<DateTimeFormatOptions, "month" | "weekday">

headerOrientation: CalendarHeaderOrientation

hideHeader: boolean

hideOutsideDays: boolean

orientation: ContentOrientation

visibleMonths: number

onChange(args: CustomEvent<Date | Date[]>): void

Parameters

• args: CustomEvent<Date | Date[]>

Returns void