Controlled MultiViewCalendar

By default, the MultiViewCalendar is in an uncontrolled state.

The MultiViewCalendar provides options for:

Setting Default Values

The MultiViewCalendar enables you to provide the initial values without the need to fully control its state by using the defaultValue, focusedDate, and defaultActiveView properties.

class App extends React.Component {
    render() {
        return (
            <MultiViewCalendar
                defaultValue={new Date(2018, 8, 8)}
                focusedDate={new Date(2018, 9, 8)}
                defaultActiveView={"year"}
            />
        )
    }
}

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

Controlling the State

To manage the state of the MultiViewCalendar, use its value and onChange properties.

class App extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            value: null
        }
    }

    handleChange = (event) => {
        this.setState({value: event.target.value});
    }

    render() {
        return (
            <MultiViewCalendar
                value={this.state.value}
                onChange={this.handleChange}
            />
        )
    }
}

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

Dynamically Changing the Value

Each time the user selects a date, the MultiViewCalendar calls the onChange handler. To change the selected value based on external user interaction, pass the new value to the MultiViewCalendar component.

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

import { MultiViewCalendar, EMPTY_SELECTIONRANGE } from '@progress/kendo-react-dateinputs';
import { cloneDate, addDays } from '@progress/kendo-date-math';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: null,
            mode: 'range'
        };
    }
    render() {
        return (
            <div>
                <div className="row">
                    <div className="col-md-8">
                        <button className="m-2 p-1 k-button k-outline k-primary" onClick={this.handleArrayClick}>To Array</button>
                        <button className="m-3 p-1 k-button k-outline" onClick={this.handleRangeClick}>To Range</button>
                    </div>
                    <div className="col-md-4">
                        <button className="m-3 p-1 k-button k-outline k-primary" onClick={this.handleSpecialClick}>Set Date to Christmas</button>
                    </div>
                </div>
                <MultiViewCalendar
                    mode={this.state.mode}
                    value={this.state.value}
                    onChange={this.handleChange}
                    topView="month"
                />
            </div>
        );
    }

    handleChange = (event) => {
        this.setState({ value: event.value });
    }

    handleSpecialClick = () => {
        const today = new Date();
        const christmas = {
            start: new Date(today.getFullYear(), 11, 24),
            end: new Date(today.getFullYear(), 11, 26)
        };

        this.setState({ mode: 'range', value: christmas });
    }

    handleArrayClick = () => {
        if (this.state.mode === 'multiple') { return; }
        let range = (this.state.value) || EMPTY_SELECTIONRANGE;

        let value = this.splitRangeToDays(range.start, range.end);

        this.setState({
            value,
            mode: 'multiple'
        });
    }
    handleRangeClick = () => {
        if (this.state.mode === 'range') { return; }
        let dates = this.state.value;
        let value = this.extractRangeFromDays(dates);

        this.setState({
            value,
            mode: 'range'
        });
    }

    extractRangeFromDays = (dates) => {
        let start = null;
        let end = null;
        dates.forEach((date) => {
            if (!start || date.getTime() < start.getTime()) { start = date; }
            if (!end || end.getTime() < date.getTime()) { end = date; }
        });

        return start && end
            ? { start, end }
            : null;
    }

    splitRangeToDays = (start, end) => {
        let dates = [];
        if (!start && !end) { return dates; }
        if (start && !end) { return [ start ]; }
        let currentDate = cloneDate(start || undefined);
        while (currentDate && end && currentDate.getTime() <= end.getTime()) {
            dates.push(cloneDate(currentDate));
            currentDate = addDays(currentDate, 1);
        }
        return dates;
    }
}

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

In this article