Date Inputs / MultiViewCalendar / Multiple Views
material theme

Multiple Views

The MultiViewCalendar enables you to control the number of the horizontally rendered views.

To set the view number, use the views property. By default, the MultiViewCalendar renders two views.

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

import { MultiViewCalendar } from '@progress/kendo-react-dateinputs';


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

        this.state = {
            views: 2
        };
    }

    handleInputChange = (event) => {
        if (!event.target.value || event.target.value < 11) {
            this.setState({ views: event.target.value });
        }
    }
    render() {
        return (
            <div>
                <div className="example-config">
                    Number of rendered views: &nbsp;
                    <input
                        type="number"
                        min={1}
                        max={10}
                        className="k-textbox"
                        value={this.state.views}
                        onChange={this.handleInputChange}
                    />
                </div>
                <MultiViewCalendar
                    views={this.state.views || 1}
                />
            </div>
        );
    }
}

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

In this article

 /