All Components

This website hosts Kendo UI wrappers of Kendo UI for jQuery widgets intended to be used in the React ecosystem.

Go to the native Kendo UI implementations for React

Calendar Overview

The Calendar is a form component that represents a graphical Gregorian calendar.

It supports the selection of and navigation between dates as well as data templates and ranges for scheduling appointments.

The Calendar wrapper for React is a client-side wrapper for the Kendo UI Calendar widget.

Basic Usage

The following example demonstrates the Calendar in action.

class LayoutsContainer extends React.Component {

     render() {
       return (
           <div className={"row example-wrapper"}>
               <div className={"col-xs-12 col-md-6 example-col"}>
                   <Calendar />
               </div>
           </div>
       );
     }
   }

   ReactDOM.render(
     <LayoutsContainer />,
     document.querySelector('my-app')
   );

Features and Functionalities

Dates

You can handle the dates of the Calendar by setting the selected dates.

By default, the selected date is not set and the Calendar displays only the focused date. To define the selected date, use the value property.

class LayoutsContainer extends React.Component {

     render() {
       return (
           <div className={"row example-wrapper"}>
               <div className={"col-xs-12 col-md-6 example-col"}>
                   <Calendar value={new Date(2017,10,10)} />
               </div>
           </div>
       );
     }
   }

   ReactDOM.render(
     <LayoutsContainer />,
     document.querySelector('my-app')
   );

Date Ranges

The Calendar provides options for displaying date ranges. To define the start date of the range, use the min property. To define the end date of the range, use the max property.

The min date value has to be lower than the max date value.

class LayoutsContainer extends React.Component {

     render() {
       return (
           <div className={"row example-wrapper"}>
               <div className={"col-xs-12 col-md-6 example-col"}>
                   <Calendar min={new Date(2017, 10, 10)} max={new Date(2017, 10, 20)} />
               </div>
           </div>
       );
     }
   }

   ReactDOM.render(
     <LayoutsContainer />,
     document.querySelector('my-app')
   );

Week Number Column

In the Calendar, you can render a column which displays the number of the weeks within the current month view. To show the week number column, set the weekNumber property.

class LayoutsContainer extends React.Component {

     render() {
       return (
           <div className={"row example-wrapper"}>
               <div className={"col-xs-12 col-md-6 example-col"}>
                   <Calendar weekNumber={true}/>
               </div>
           </div>
       );
     }
   }

   ReactDOM.render(
     <LayoutsContainer />,
     document.querySelector('my-app')
   );

Active View

To define the first view that the Calendar initially renders, use the start option.

The Calendar supports the following predefined view options:

  • month—Shows the days of the month.
  • year—Shows the months of the year.
  • decade—Shows the years of the decade.
  • century—Shows the decades of the century.

You can also define the last view to which the user can navigate. To control the view navigation depth, set the depth option.

Selectable Month Calendars

The Calendar allows the user to select a month.

class LayoutsContainer extends React.Component {

     render() {
       return (
           <div className={"row example-wrapper"}>
               <div className={"col-xs-12 col-md-6 example-col"}>
                   <Calendar weekNumber={true} start={"year"} depth={"year"}/>
               </div>
           </div>
       );
     }
   }

   ReactDOM.render(
     <LayoutsContainer />,
     document.querySelector('my-app')
   );

Templates

The Calendar enables you to customize the content of each cell by using cell templates. To specify the template for rendering the cells between the min and max range within the month view, use the month.content property.

class LayoutsContainer extends React.Component {

        constructor(props) {
           super(props);
           this.month = {
             content: `# if (data.value>15) {#
                           <b>#=data.value#</b>
                      # }else{ #
                           <i>#=data.value#</i>#}#`
           }
       }

     render() {
       return (
           <div className={"row example-wrapper"}>
               <div className={"col-xs-12 col-md-6 example-col"}>
                   <Calendar month = {this.month} />
               </div>
           </div>
       );
     }
   }

   ReactDOM.render(
     <LayoutsContainer />,
     document.querySelector('my-app')
   );

Disabling Dates

The Calendar allows you to disable certain days which are not intended to be selected by the end user—for example, weekends, national holidays, and others.

To disable a date, either:

Setting Arrays

When you set an array, list the days that need to be disabled by using the first letters from their names in English.

class LayoutsContainer extends React.Component {

     render() {
       return (
           <div className={"row example-wrapper"}>
               <div className={"col-xs-12 col-md-6 example-col"}>
                   <Calendar weekNumber={true}  disableDates={["we", "th"]}/>
               </div>
           </div>
       );
     }
   }

   ReactDOM.render(
     <LayoutsContainer />,
     document.querySelector('my-app')
   );

Adding Functions

When you add a function, determine its return value as true for the date that is disabled.

class LayoutsContainer extends React.Component {

    disableDates(date) {
       var disabled = [13,14,20,21];
       if (date && disabled.indexOf(date.getDate()) > -1 ) {
         return true;
       } else {
         return false;
       }
     }


     render() {
       return (
           <div className={"row example-wrapper"}>
               <div className={"col-xs-12 col-md-6 example-col"}>
                   <Calendar weekNumber={true}  disableDates = {this.disableDates}/>
               </div>
           </div>
       );
     }
   }

   ReactDOM.render(
     <LayoutsContainer />,
     document.querySelector('my-app')
   );

Events

The following example demonstrates basic Calendar events. You can subscribe to all Calendar events by the handler name.

class LayoutsContainer extends React.Component {

       change(){
           console.log('Change was triggered!');
       }

       navigate(){
           console.log('Navigate was triggered!');
       }


     render() {
       return (
           <div className={"row example-wrapper"}>
               <div className={"col-xs-12 col-md-6 example-col"}>
                   <Calendar change={this.change} navigate={this.navigate} />
               </div>
           </div>
       );
     }
   }

   ReactDOM.render(
     <LayoutsContainer />,
     document.querySelector('my-app')
   );
In this article