Controlled Mode
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.
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
Change Theme:
