/ Calendar / Calendar Views
Search results

Calendar Views in Angular Calendar component

21 Dec 2022 / 2 minutes to read

The Calendar has the following pre-defined 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.

Copied to clipboard
import { Component } from '@angular/core';

@Component({
    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() {
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//Syncfusion ej2-angular-calendars module
import { CalendarModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        CalendarModule //declaration of ej2-angular-calendars module into NgModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

View Restriction

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

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.

Copied to clipboard
import { Component } from '@angular/core';

@Component({
    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() {
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//Syncfusion ej2-angular-calendars module
import { CalendarModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        CalendarModule //declaration of ej2-angular-calendars module into NgModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

You can restrict the calendar’s drill down navigation by defining the start and depth property with same view that allows to select the date on that view itself.

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

Copied to clipboard
import { Component } from '@angular/core';

@Component({
    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() {
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//Syncfusion ej2-angular-calendars module
import { CalendarModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        CalendarModule //declaration of ej2-angular-calendars module into NgModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);