Calendar

size
mode
disabled
readOnly
minValue
maxValue
focusedValue
import {Calendar} from '@gravity-ui/date-components';

Calendar is a flexible, user-friendly calendar component for React applications. It allows users to view, select, and manage dates with ease. Ideal for event scheduling, booking systems, and any application where date selection is essential. It can be controlled if you set value property. Or it can be uncontrolled if you don't set any value, but in this case you can manage the initial state with optional property defaultValue. Component is uncontrolled by default.

Useful addition

To set dates in the right format you may need to include additional helpers from Date Utils library

import {dateTimeParse} from '@gravity-ui/date-utils';

Size

To control the size of the Calendar use the size property. Default size is m.

<Calendar size="m" />
<Calendar size="l" />
<Calendar size="xl" />

Value

Min and max value

The minValue property allows you to specify the earliest date and time that can be entered by the user. Conversely, the maxValue property specifies the latest date and time that can be entered. All other values will be disabled for user.

<Calendar minValue={dateTimeParse('01.01.2024')} maxValue={dateTimeParse('01.01.2025')} />

Mode

Defines the time interval that Calendar should display. With mode you can choose it in controlled way. For uncontrolled way you don't need to specify any value. Also you can set the initial mode in uncontrolled way with defaultMode prop.

days - default mode for Calendar. It shows days in month.

months - shows months in year

quarters - shows quarters by years (not available as value in defaultMode)

years - shows several years for select

You can limit enabled modes by using prop modes.

<Calendar defaultMode="months"/>

States

Disabled

The state of the Calendar where you don't want the user to be able to interact with the component.

<Calendar disabled={true} />

Readonly

readOnly is a boolean attribute that, when set to true, makes the Calendar component immutable to the user. This means that while the input will display its current value, users will not be able to change it.

<Calendar readOnly={true} />

Focused value

Allows to select the date that Calendar view is focused on. If you need it to be controlled you shoud use focusedValue prop. You can set the initial focused value for uncontrolled component with optional prop defaultFocusedValue.

<Calendar defaultFocusedValue={dateTimeParse('01.01.2020')} />

Time zone

timeZone is the property to set the time zone of the value in the input. Learn more about time zones

Properties

NameDescriptionTypeDefault
aria-describedbyThe control's aria-describedby attributestring
aria-detailsThe control's aria-details attributestring
aria-labelThe control's aria-label attributestring
aria-labelledbyThe control's aria-labelledby attributestring
autoFocusThe control's autofocus attributeboolean
classNameThe control's wrapper class namestring
defaultFocusedValueThe date that is focused when the calendar first mounts (uncontrolled)DateTime
defaultModeInitial mode to show in calendardays months quarters years
defaultValueSets the initial value for uncontrolled component.DateTime
disabledIndicates that the user cannot interact with the controlbooleanfalse
focusedValueSet the default view of uncontrolled component which includes this valueDateTime null
idThe control's id attributestring
isDateUnavailableCallback that is called for each date of the calendar. If it returns true, then the date is unavailable.((date: DateTime) => boolean)
isWeekendCallback that is called for each date of the calendar. If it returns true, then the date is weekend.((date: DateTime) => boolean)
maxValueThe maximum allowed date that a user may select.DateTime
minValueThe minimum allowed date that a user may select.DateTime
modeDefines the time interval that Calendar should display in colttrolled way.days months quarters years
modesModes available to userPartial<Record<CalendarLayout, boolean>>{days: true, months: true, quarters: false, years: true }
onBlurFires when the control lost focus. Provides focus event as a callback's argument((e: FocusEvent<Element, Element>) => void)
onFocusFires when the control gets focus. Provides focus event as a callback's argument((e: FocusEvent<Element, Element>) => void)
onFocusUpdateFires when the control's focused date changes.((date: DateTime) => void)
onUpdateFires when the value is changed.((value: DateTime) => void
onUpdateModeFires when the mode is changed.((value: 'days' | 'months' | 'quarters' | 'years' ) => void
readOnlyWhether the calendar value is immutable.booleanfalse
sizeThe size of the control"m" "l" "xl""m"
styleSets inline style for the element.CSSProperties
timeZoneSets the time zone. Learn more about time zonesstring
valueThe value of the controlDateTime null