Represents a calendar that lets users to select a date value in a variety of different ways.

  • 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.

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.

Callable

  • Returns ReactNode

Events

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

Emitted when calendar changes its value.

Type declaration

Properties

activeView: CalendarActiveView

The current active view of the component.

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

The options used to format the months and the weekdays in the calendar views.

headerOrientation: CalendarHeaderOrientation

The orientation of the calendar header.

hideHeader: boolean

Whether to render the calendar header part. When the calendar selection is set to multiple the header is always hidden.

hideOutsideDays: boolean

Whether to show the dates that do not belong to the current active month.

orientation: ContentOrientation

The orientation of the calendar months when more than one month is being shown.

The resource strings for localization.

visibleMonths: number

The number of months displayed in the days view.