Hello All, In the last Ionic 4 tutorial we had discussed How to implement google maps? Now, We will move forward to the most common issue face by the developer is calendar implementation. To resolve this issue we will implement the simple calendar in Ionic 4 using the ion4-calendar package. Follow the below steps to implement the calendar in Ionic 4.
Table of Contents
Steps to implement calendar in Ionic
Step 1: Create a new project using Ionic CLI.
Step 2: Create a new page
We will create a brand new page for calendar implementation using the following command
ionic g page calender
Step 3: Install dependency
Write the below command to install the dependency
npm install ion2-calendar moment --save
Step 4: Change in app.module.ts
The app.module.ts will look as follows
import { CalendarModule } from "ion2-calendar";
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule,CalendarModule],
providers: [
StatusBar,
SplashScreen,
PDFGenerator,
BarcodeScanner,
OCR,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
Step 5: Import the calendar module in calender.module.ts
The calender.module.ts will look as follows
import { CalendarModule } from "ion2-calendar";
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
CalenderPageRoutingModule,
CalendarModule
],
declarations: [CalenderPage]
})
Step 6: Update the HTML file
Write the below code of HTML in your calender.page.html
<ion-header>
<ion-toolbar>
<ion-title>Calender Example</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-calendar [(ngModel)]="date" (onChange)="onChange($event)" [type]="type" [format]="'YYYY-MM-DD'">
</ion-calendar>
</ion-content>
Step 7: TS
Now, In final step just copy the below ts code in your calender.page.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-calender',
templateUrl: './calender.page.html',
styleUrls: ['./calender.page.scss'],
})
export class CalenderPage implements OnInit {
date: string;
type: 'string';
constructor() { }
ngOnInit() {
}
onChange($event) {
console.log($event);
}
}
Step 8: Output
