Preview

Usage

<cs-calendar value="2025-01-15"></cs-calendar>
<cs-calendar value="2025-03-01" locale="de-DE"></cs-calendar>

Properties

aria-describedbystring default: null

Adds aria-describedby to the calendar.

aria-labelstring default: null

Adds an aria-label to the calendar.

aria-labelledbystring default: null

Adds aria-labelledby to the calendar.

date-disabled-reasonCalendarProps.DateDisabledReasonFunction

Provides a reason why a particular date in the calendar is not enabled (only when isDateEnabled returns false). If provided, the date becomes focusable.

granularityCalendarProps.Granularity default: 'day'

Specifies the granularity at which users will be able to select a date. Defaults to day.

i18n-stringsCalendarProps.I18nStrings

An object containing all the necessary localized strings required by the component.

is-date-enabledCalendarProps.IsDateEnabledFunction

Defines whether a particular date is enabled in the calendar or not. If you disable a date in the calendar, users can still enter this date using a keyboard. We recommend that you also validate these constraints on the client-side and server-side as you would for other form elements.

localestring default: 'en-US'

Specifies the locale to use to render month names and determine the starting day of the week. If you don't provide this, the locale is determined by the page and browser locales. Supported values and formats are listed in the JavaScript Intl API specification.

next-month-aria-labelstring

Specifies an aria-label for the 'next month' button.

previous-month-aria-labelstring

Specifies an aria-label for the 'previous month' button.

start-of-weeknumber default: 0

Determines the starting day of the week. The values 0-6 map to Sunday-Saturday. By default the starting day of the week is defined by the locale, but you can use this property to override it.

today-aria-labelstring

Used as part of the aria-label for today's date in the calendar.

valuestringrequired

The current input value, in YYYY-MM-DD format.

Events

changeCustomEvent<CalendarProps.ChangeDetail>

Called whenever a user changes the input value (by typing, pasting, or selecting a value). The event detail contains the current value of the field.