Calendar API

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

Props

PropTypeDescriptionDefault
copyLabels?objectCalendar copy labels for accessibility, tooltips and localization. Use this to provide translated or custom text for various calendar elements._
copyLabels.disabledDayLabel?stringAria label and tooltip content for the days that are not available.No availability
copyLabels.disabledMonthLabel?stringAria label and tooltip content for the months that are not available.No availability
copyLabels.goTodayLabel?stringAria label and tooltip content for the button that navigates to today.Today
copyLabels.nextMonthLabel?stringAria label and tooltip content for the button that navigates to the next month.Next month
copyLabels.nextYearLabel?stringAria label and tooltip content for the button that navigates to the next year.Next year
copyLabels.previousMonthLabel?stringAria label and tooltip content for the button that navigates to the previous month.Previous month
copyLabels.previousYearLabel?stringAria label and tooltip content for the button that navigates to the previous year.Previous year
hasMonthPicker?booleanDetermines 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?DateThe maximum allowed date that a user may select._
minValue?DateThe minimum allowed date that a user may select._
onValueChange?functionHandler that is called when the value changes._
onVisibleMonthChange?functionHandler that is called when the currently visible month changes._
onVisibleYearChange?functionHandler that is called when the currently visible year changes._
size?small | standardThe 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?DateThe current value (controlled)._
visibleMonth?DateControls the currently focused date within the calendar._
weekStartsOn?0 | 1 | 2 | 3 | 4 | 5 | 6The index of the first day of the week. Accepts a value from 0 (Sunday) to 6 (Saturday).
Overrides the locale's default setting.
_