Controlled Mode

Premium

Updated on Oct 1, 2025

By default, the MultiViewCalendar is in an uncontrolled state.

The MultiViewCalendar provides options for:

• Setting default values for the uncontrolled state
• Controlling the state
• Dynamically changing the selected value

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.

jsx

const App = () => (
    <MultiViewCalendar
        defaultValue={new Date(2018, 8, 8)}
        focusedDate={new Date(2018, 9, 8)}
        defaultActiveView={'year'}
    />
);

Controlling the State

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

jsx

import * as React from 'react';

const App = () => {
    const [value, setValue] = React.useState(null);

    const handleChange = (event) => {
        setValue(event.target.value);
    };

    return <MultiViewCalendar value={value} onChange={handleChange} />;
};

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.

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the MultiViewCalendar
• React Date Inputs