@progress/kendo-dateinputs-react-wrapper

--- title: Overview page_title: Overview - Calendar - Kendo UI Wrappers for React description: "Get an overview of the features the Kendo UI Calendar delivers and use the wrapper in React projects." slug: overview_calendar position: 1 --- # 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](http://docs.telerik.com/kendo-ui/api/javascript/ui/calendar) widget. ## Basic Usage The following example demonstrates the Calendar in action. ```jsx-preview 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](#toc-dates) * [Date ranges](#toc-date-ranges) * [Templates](#toc-templates) * [Week number column](#toc-week-number-column) * [Active view](#toc-active-view) * [Selectable month calendars](#toc-selectable-month-calendars) * [Disabling of dates](#toc-disabling-dates) * [Keyboard navigation]({% slug keyboard_navigation_calendar %}) ### 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. ```jsx 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. ```jsx 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. ```jsx 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. ```jsx 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. ```jsx 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: * [Set an array](#toc-setting-arrays), or * [Add a function](#toc-adding-functions). #### 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. ```jsx 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. ```jsx 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](https://docs.telerik.com/kendo-ui/api/javascript/ui/calendar#events) by the handler name. ```jsx 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') ); ``` ## Suggested Links * [Kendo UI Calendar for jQuery](https://docs.telerik.com/kendo-ui/controls/scheduling/calendar/overview) * [API Reference of the Calendar Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/calendar)