HOW TO IMPLEMENT CALENDAR IN IONIC 4

Share the post

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

Output