How to skip a month in Calendar in Angular Calendar

25 Sep 20262 minutes to read

The following example demonstrates how to skip a month when navigating the Angular Calendar using the previous and next navigation icons.

In this example, the navigated event is used to detect navigation changes, and the NavigateTo method is used to move directly to the required month.

As a result, each navigation action skips an intermediate month instead of moving to the immediately adjacent month.

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




import { Component, ViewChild } from '@angular/core';
import { CalendarComponent } from '@syncfusion/ej2-angular-calendars';

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


standalone: true,
    selector: 'app-root',
    template: `
        <ejs-calendar #ejCalendar (navigated)='onNavigate($event)'></ejs-calendar>
        `
})

export class AppComponent {
    @ViewChild('ejCalendar') ejCalendar?: CalendarComponent;
   //skips a month while cliking previous and next icon in month view.
   onNavigate(args : any):void {
    let date: Number | any;
    if ((<HTMLInputElement>(event as Event).currentTarget).classList.contains('e-next')) {
        //incrementing the month while clicking the next icon
        date = new Date(args.date.setMonth(args.date.getMonth() + 1));
    }
    if ((<HTMLInputElement>(event as Event).currentTarget).classList.contains('e-prev')) {
        //decrementing the month while clicking the previous icon
        date = new Date(args.date.setMonth(args.date.getMonth() - 1));
    }
    if (args.view == 'month') {
        this.ejCalendar?.navigateTo('month' as any, new Date('' + date));
    }
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));