# Controlled Mode

By default, the MultiViewCalendar is in an uncontrolled state.

The MultiViewCalendar provides options for:

* [Setting default values for the uncontrolled state](https://www.telerik.com/kendo-react-ui/components/dateinputs/multiviewcalendar/controlled-state#setting-default-values)
* [Controlling the state](https://www.telerik.com/kendo-react-ui/components/dateinputs/multiviewcalendar/controlled-state#controlling-the-state)
* [Dynamically changing the selected value](https://www.telerik.com/kendo-react-ui/components/dateinputs/multiviewcalendar/controlled-state#dynamically-changing-the-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`](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/multiviewcalendarprops#defaultvalue), [`focusedDate`](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/multiviewcalendarprops#focuseddate), and [`defaultActiveView`](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/multiviewcalendarprops#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`](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/multiviewcalendarprops#value) and [`onChange`](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/multiviewcalendarprops#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.

[Demo Source](https://demos.telerik.com/kendo-react-ui/dateinputs/multiviewcalendar/switch/func/source.txt)

## Suggested Links

* [API Reference of the MultiViewCalendar](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/multiviewcalendarprops)
* [React Date Inputs](https://www.telerik.com/kendo-react-ui/components/dateinputs)