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 hoe to set the initially selected date through the defaultDate property.

import React from 'react';
import ReactDOM from 'react-dom';

import { Scheduler, MonthView } from '@progress/kendo-react-scheduler';

const data = [{
    id: 0,
    title: "Holiday",
    start: new Date("2019-08-14T11:00:00Z"),
    end: new Date("2019-08-14T11:01:00Z"),
    isAllDay: true
}]

const defaultDate = new Date("2019-08-01T00:00:00Z");

const App = () => {
    return (
        <Scheduler data={data} defaultDate={defaultDate}>
            <MonthView />
        </Scheduler>
    )
}

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

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.

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.

import React from 'react';
import ReactDOM from 'react-dom';

import { Scheduler, MonthView } from '@progress/kendo-react-scheduler';
import { Switch } from '@progress/kendo-react-inputs';
import { DateInput } from '@progress/kendo-react-dateinputs';

const data = [{
    id: 0,
    title: "Holiday",
    start: new Date("2019-08-14T11:00:00Z"),
    end: new Date("2019-08-14T11:01:00Z"),
    isAllDay: true
}]

const defaultDate = new Date("2019-08-01T00:00:00Z");

const App = () => {
    const [date, setDate] = React.useState(defaultDate);
    const [canChangeDate, setCanChangeDate] = React.useState(false);

    const handleDateChange = React.useCallback(
        (event) => {
            if (canChangeDate) {
                setDate(event.value);
            }
        },
        [date, setDate, canChangeDate]
    )

    const handleOverride = React.useCallback(
        (event) => {
            if (event.value) {
                setDate(event.value)
            }
        },
        [date, setDate]
    )

    const handleLockChange = React.useCallback(
        () => {
            setCanChangeDate(old => !old)
        },
        [canChangeDate, setCanChangeDate]
    )

    return (
        <div>
            <div className="example-config d-flex">
                <div className="col-12 col-md-6">
                    <label className="d-block text-center">
                        Allow Internal Date Change: <br />
                        <Switch onChange={handleLockChange} checked={canChangeDate} />
                    </label>
                </div>
                <div className="col-12 col-md-6">
                    <label className="d-block text-center">
                        Or override the selected date from outside: <br />
                        <DateInput value={date} onChange={handleOverride} format="dd/MMM/yyyy" />
                    </label>
                </div>
            </div>
            <Scheduler
                data={data}

                date={date}
                onDateChange={handleDateChange}
            >
                <MonthView />
            </Scheduler>
        </div>
    )
}

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