Controlled Mode

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?