New to KendoReact? Start a free 30-day trial

Date Selection

The Scheduler component accepts both the controlled and uncontrolled 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 without maintaining the selection in subsequent renders.

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

Change Theme

Theme

Loading ...

Even if the Scheduler is in the uncontrolled date mode, it will call the 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 and 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.