Calendar Views in React Calendar

4 Sep 20269 minutes to read

The React Calendar provides predefined views that give a flexible way to navigate and select dates. Use the start property to change the default view of the React Calendar.

View Description
month (default) Displays the days in a month
year Displays the months in a year
decade Displays the years in a decade

The following example demonstrates how to set the year as the start view of the React Calendar.

[Class-component]

// import the calendarcomponent
import { CalendarComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
    render() {
        //creates a calendar with decade view and navigate up to year view.
        return <CalendarComponent id="calendar" start='Year'/>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));
// import the calendarcomponent
import { CalendarComponent} from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
    public render() {
        //creates a calendar with decade view and navigate up to year view.
        return <CalendarComponent id="calendar" start='Year' />
    }
};
ReactDOM.render(<App />, document.getElementById('element'));

[Functional-component]

// import the calendarcomponent
import { CalendarComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    //creates a calendar with decade view and navigate up to year view.
    return <CalendarComponent id="calendar" start="Year"/>;
}
ReactDOM.render(<App />, document.getElementById('element'));
// import the calendarcomponent
import { CalendarComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
//creates a calendar with decade view and navigate up to year view.
    return <CalendarComponent id="calendar" start="Year" />;
}
ReactDOM.render(<App />, document.getElementById('element'));

## View Restriction

You can restrict React Calendar navigation by setting the start and depth properties.

Setting these properties limits how far users can drill down or up. The React Calendar will drill down to the view specified by depth and drill up to the view specified by start.

The depth view must be deeper (more granular) than the start view.

[Class-component]

// import the calendarcomponent
import { CalendarComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
    render() {
        // creates a calendar with decade view and navigate up to year view.
        return <CalendarComponent id="calendar" start='Decade' depth='Year'/>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));
// import the calendarcomponent
import { CalendarComponent} from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
    public render() {
        // creates a calendar with decade view and navigate up to year view.
        return <CalendarComponent id="calendar" start='Decade' depth='Year' />
    }
};
ReactDOM.render(<App />, document.getElementById('element'));

[Functional-component]

// import the calendarcomponent
import { CalendarComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    // creates a calendar with decade view and navigate up to year view.
    return <CalendarComponent id="calendar" start="Decade" depth="Year"/>;
}
ReactDOM.render(<App />, document.getElementById('element'));
// import the calendarcomponent
import { CalendarComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
// creates a calendar with decade view and navigate up to year view.
    return <CalendarComponent id="calendar" start="Decade" depth="Year" />;
}
ReactDOM.render(<App />, document.getElementById('element'));

You can restrict the React Calendar’s drill down navigation by defining the start and depth property

The following example demonstrates how to select the date in year view.

[Class-component]

// import the calendarcomponent
import { CalendarComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
    render() {
        //creates a calendar with decade view and navigate up to year view.
        return <CalendarComponent id="calendar" start='Year' depth='Year'/>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));
// import the calendarcomponent
import { CalendarComponent} from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
    public render() {
        //creates a calendar with decade view and navigate up to year view.
        return <CalendarComponent id="calendar" start='Year' depth='Year' />
    }
};
ReactDOM.render(<App />, document.getElementById('element'));

[Functional-component]

// import the calendarcomponent
import { CalendarComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    //creates a calendar with decade view and navigate up to year view.
    return <CalendarComponent id="calendar" start="Year" depth="Year"/>;
}
ReactDOM.render(<App />, document.getElementById('element'));
// import the calendarcomponent
import { CalendarComponent } from '@syncfusion/ej2-react-calendars';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
//creates a calendar with decade view and navigate up to year view.
    return <CalendarComponent id="calendar" start="Year" depth="Year" />;
}
ReactDOM.render(<App />, document.getElementById('element'));