Calendar Views in Angular Calendar

31 Aug 20265 minutes to read

The Calendar has the following pre-defined views that provide a flexible way to navigate back and forth to select the date.
Use the start property to change the initial (start) view of the Calendar. The default value of the start property is month.

The start and depth properties accept the same enumerated values: month, year, or decade.

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.

app.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CalendarModule } from '@syncfusion/ej2-angular-calendars'



import { Component } from '@angular/core';

@Component({
imports: [
        
        CalendarModule //declaration of ej2-angular-calendars module into NgModule
    ],


standalone: true,
    selector: 'app-root',
    template: `
        <!-- Sets the value, start-->
        <ejs-calendar  [value]='dateValue' start='Year'></ejs-calendar>
        `
})

export class AppComponent {
    public dateValue: Object = new Date();
    constructor() {
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

View Restriction

Restrict to a range of views

Calendar view navigation can be restricted by defining the start and depth properties that allows you to select the date from that view.

By defining the start and depth properties 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 start property and drill-up up to the view which is set in depth property.

The depth view level must be below the start view level (month < year < decade).

app.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CalendarModule } from '@syncfusion/ej2-angular-calendars'



import { Component } from '@angular/core';

@Component({
imports: [
        
        CalendarModule //declaration of ej2-angular-calendars module into NgModule
    ],


standalone: true,
    selector: 'app-root',
    template: `
        <!-- Sets the value, start and depth-->
        <ejs-calendar #ejCalendar [value]='dateValue' start='Decade' depth='Year'></ejs-calendar>
        `
})

export class AppComponent {
    public dateValue: Object = new Date();
    constructor() {
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Lock to a single view

You can restrict the calendar’s drill-down navigation by defining the start and depth properties with the same view, which allows the date to be selected on that view itself.

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

app.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CalendarModule } from '@syncfusion/ej2-angular-calendars'



import { Component } from '@angular/core';

@Component({
imports: [
        
        CalendarModule //declaration of ej2-angular-calendars module into NgModule
    ],


standalone: true,
    selector: 'app-root',
    template: `
        <!-- Sets the value, start and depth"-->
        <ejs-calendar #ejCalendar [value]='dateValue' start='Year' depth='Year'></ejs-calendar>
        `
})

export class AppComponent {
    public dateValue: Object = new Date();
    constructor() {
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));