View Selection Depth

The Calendar enables you to control the view depth to which the user can navigate.

To determine its navigation view depth, use the bottomView property. To limit the topmost view that user can reach, use the topView property.

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

        this.state = {
            value: null
        }
    }

    handleChange = (event) => {
        this.setState({value: event.value})
    }

    render() {
        return (
            <div>
                <div className="example-config">
                    Selected date is: <b>{String(this.state.value)}</b>
                </div>
                <Calendar
                    bottomView="year"
                    topView="decade"
                    onChange={this.handleChange}
                />
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)
In this article
 /