Calendar API

API reference docs for theCalendarcomponent. For examples and details on the usage of this component, visit the component demo page.

Props

Prop

Type

Description

Default

copyLabels?

object

Calendar copy labels for accessibility, tooltips and localization. Use this to provide translated or custom text for various calendar elements.

_

copyLabels.disabledDayLabel?

string

Aria label and tooltip content for the days that are not available.

No availability

copyLabels.disabledMonthLabel?

string

Aria label and tooltip content for the months that are not available.

No availability

copyLabels.goTodayLabel?

string

Aria label and tooltip content for the button that navigates to today.

Today

copyLabels.nextMonthLabel?

string

Aria label and tooltip content for the button that navigates to the next month.

Next month

copyLabels.nextYearLabel?

string

Aria label and tooltip content for the button that navigates to the next year.

Next year

copyLabels.previousMonthLabel?

string

Aria label and tooltip content for the button that navigates to the previous month.

Previous month

copyLabels.previousYearLabel?

string

Aria label and tooltip content for the button that navigates to the previous year.

Previous year

hasMonthPicker?

boolean

Determines whether Calendar has month grid or not.

true

isDateUnavailable?

function

A callback function invoked for each date in the calendar.

If it returns true, then the corresponding date will be marked as unavailable / disabled.

_

localeCode?

'ar' | 'bg' | 'cs' | 'da' | 'de' | 'el' | 'en' | 'es' | 'et' | 'fi' | 'fr' | 'he' | 'hr' | 'hu' | 'is' | 'it' | 'ja' | 'ko' | 'lt' | 'lv' | 'nl' | 'no' | 'pl' | 'pt' | 'ro' | 'ru' | 'sl' | 'sq' | 'sr' | 'sv' | 'tr' | 'uk' | 'zh'

Locale code (ISO 639-1) for date localization.

en

maxValue?

Date

The maximum allowed date that a user may select.

_

minValue?

Date

The minimum allowed date that a user may select.

_

onValueChange?

function

Handler that is called when the value changes.

_

onVisibleMonthChange?

function

Handler that is called when the currently visible month changes.

_

onVisibleYearChange?

function

Handler that is called when the currently visible year changes.

_

size?

small | standard

The size of the calendar.

standard

tzModifier?

string

The timezone modifier for the calendar to consider the "today" date.

When a consumer passes a valid timezone string, "today" (which was originally based on the system time) will be offset according to the specified timezone.

Intl.DateTimeFormat().resolvedOptions().timeZone

value?

Date

The current value (controlled).

_

visibleMonth?

Date

Controls the currently focused date within the calendar.

_

weekStartsOn?

0 | 1 | 2 | 3 | 4 | 5 | 6

The index of the first day of the week. Accepts a value from 0 (Sunday) to 6 (Saturday). Overrides the locale's default setting.

_