Calendar views in React Calendar component

21 Feb 20269 minutes to read

The 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 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]

index.jsx

// 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'));

index.tsx

// 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]

index.jsx

// 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'));

index.tsx

// 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 Calendar navigation by setting the start and depth properties.

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

The depth view must be lower (less granular) than the start view.

[Class-component]

index.jsx

// 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'));

index.tsx

// 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]

index.jsx

// 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'));

index.tsx

// 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]

index.jsx

// 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'));

index.tsx

// 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]

index.jsx

// 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'));

index.tsx

// 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'));