Calendar views in React Calendar component

24 Jan 20239 minutes to read

The Calendar has the following predefined views that provides a flexible way to navigate back and forth to select the date. Use the start property to change the default view of the 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 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

Calendar view can be restricted by defining the start and depth

By defining the start and depth property with the different view, drill-down and drill-up views navigation can be limited to the user. Calendar views will be drill-down up to the view which is set in depth property and drill-up up to the view which is set in start property.

Always the depth view has to be smaller 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 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'));