View Selection

The MultiViewCalendar allows the user to pre-define its initially rendered view or the depth of its view selection.

Active Views

To define the first view that the MultiViewCalendar initially renders, use the defaultActiveView property. The ActiveView type defines the following possible view options:

  • month—Shows the days of the month.
  • year—Shows the months of the year.
  • decade—Shows the years of the decade.
  • century—Shows the decades of the century.
class App extends React.Component {
    render() {
        return (
            <MultiViewCalendar defaultActiveView="decade"/>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

View Selection Depth

The MultiViewCalendar 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 {
    render() {
        return (
            <MultiViewCalendar
                bottomView="year"
                topView="decade"
            />
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article