Skip a month in calendar in Angular Calendar component
27 Sep 20233 minutes to read
The following example demonstrates how to skip a month in a Calendar while clicking the previous and next icon. Here we have used the navigated
event to skip a month using NavigateTo
method.
import { Component, ViewChild } from '@angular/core';
import { CalendarComponent } from '@syncfusion/ej2-angular-calendars';
@Component({
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 { 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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);