All Components

This website hosts native Kendo UI components, built from the ground up with the ultimate performance in mind, intended to be used in the React ecosystem.

Dates

The Calendar enables you to set the behavior of its dates.

You can apply either of the following approaches:

Setting the Focused Date

The Calendar always displays a focused date and, by default, the focused date is today's date. To change the focused date, use the focusedDate property by setting it to a specific Date value. The Date value has to be a valid JavaScript Date object.

class App extends React.Component {
    render() {
        return <Calendar focusedDate={new Date(2010, 10, 10)} />;
    }
}

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

Setting the Selected Date

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 App extends React.Component {
    render() {
        return <Calendar value={new Date(2010, 10, 10)} />;
    }
}

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