• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting
Components / Date Inputs / API / CalendarProps / 

CalendarProps

Represents the props of the KendoReact Calendar component. The generic argument is passed to the onChange property and is used as a target in the CalendarChangeEvent interface.

NameTypeDefaultDescription

ariaDescribedBy?

string

Identifies the element(s) which will describe the component, similar to HTML aria-describedby attribute. For example these elements could contain error or hint message.

ariaLabelledBy?

string

Identifies the element(s) which will label the component.

bottomView?

ActiveView

Defines the bottommost view to which the user can navigate.

cell?

React.ComponentType<CalendarCellProps>

Enables the customization or the override of the default Calendar cell (see example).

className?

string

Sets the className of the Calendar.

defaultActiveView?

ActiveView

Sets the default active view of the Calendar. If not set, the Calendar will display the month view.

defaultValue?

"null" | Date

Sets the default value of the Calendar.

disabled?

boolean

Determines whether the Calendar is disabled.

focusedDate?

Date

Sets the initial focused date of the Calendar.

headerTitle?

React.ComponentType<CalendarHeaderTitleProps>

Enables the customization or the override of the default header title in the Calendar (see example).

id?

string

Sets the id of the Calendar.

max?

Date

Sets the maximum allowed date of the Calendar. Defaults to 2099-12-31.

min?

Date

Sets the minimum allowed date of the Calendar. Defaults to 1900-1-1.

navigation?

boolean

Determines if the navigation sidebar will be displayed.

navigationItem?

React.ComponentType<CalendarNavigationItemProps>

Enables the customization or the override of the default navigation item in the Calendar (see example).

onBlur?

(event: FocusEvent<any>) => void

Fires each time the Calendar is blurred.

onChange?

(event: CalendarChangeEvent<T>) => void

An event that is called after the value of the Calendar has changed.

onFocus?

(event: FocusEvent<any>) => void

Fires each time the Calendar is focused.

smoothScroll?

boolean

Deprecated

Toggles the smooth scroll animation on navigation item click. By default, the animation is enabled in React 17.

tabIndex?

number

Sets the tabIndex property of the Calendar.

topView?

ActiveView

Defines the topmost view to which the user can navigate.

value?

"null" | Date

Sets the value of the Calendar.

weekCell?

React.ComponentType<CalendarWeekCellProps>

Enables the customization or the override of the default week-column cell in the Calendar (see example).

weekNumber?

boolean

Determines if the week number column will be displayed.

In this article

Not finding the help you need?

Contact Support