# Date Selection

The Scheduler component accepts both the [controlled](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components) and [uncontrolled](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components) mode of the selected `date`.

This capability allows you to completely override the `date` selection from outside the Scheduler.

> The selected `date` is used by each view to calculate the visible date range.

To change the selected `date`, click the **Prev** or **Next** buttons in the Scheduler toolbar, or manually pick a `date` from the Calendar after clicking the range label. For a providing smooth user navigation, the Scheduler also renders a **Today** button which changes the value to the current system date.

## Uncontrolled Date Mode

By default, the Scheduler will set its current `date` to `today`. While this is the most common scenario, you can set the [`defaultDate`](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerprops#defaultdate) without maintaining the selection in subsequent renders.

The following example demonstrates how to set the initially selected `date` through the `defaultDate` property.

[Demo Source](https://demos.telerik.com/kendo-react-ui/scheduler/date-selection/uncontrolled/func/source.txt)

Even if the Scheduler is in the uncontrolled date mode, it will call the [`onDateChange`](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerprops#ondatechange) event. If your application requires, you can pass a callback and be notified every time the `date` is changed.

The following example extends the previous example to `console.log()` the new `date` every time the date is changed.

```jsx
const App = () => {
    const handleDateChange = React.useCallback(
        (event) => { console.log(event.value); },
        []
    )

    return (
        <Scheduler data={data} defaultDate={defaultDate} onDateChange={handleDateChange}>
            <MonthView />
        </Scheduler>
    )
}
```

## Controlled Mode

To be able to fully control the date of the scheduler, provide a pair of the [`date`](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerprops#date) and [`onDateChange`](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerprops#ondatechange) properties. The provided `date` property will override the internal `date` state of the Scheduler.

The following example demonstrates how to change the `date` only when a specific requirement is met.

[Demo Source](https://demos.telerik.com/kendo-react-ui/scheduler/date-selection/controlled/func/source.txt)

## Suggested Links

* [Data Binding in the KendoReact Scheduler](https://www.telerik.com/kendo-react-ui/components/scheduler/data-binding)
* [API Reference of the KendoReact SchedulerDataChangeEvent](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerprops#ondatachange)
* [Controlled vs. Uncontrolled Components](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components)
* [KendoReact Scheduler](https://www.telerik.com/kendo-react-ui/components/scheduler/)