How to Create Calendar in Ionic 5 Angular App

Ionic 5 Calendar Integration tutorial; In this extensive tutorial, you will learn how to add or create a Calendar UI component in the Ionic Angular application with the help of the npm ion2-calendar package.

The ion2-calendar plugin is a handy package primarily used to integrate the calendar ui module in the Ionic, angular application. It is available through the node package manager and exhibits out-of-the-box features for building calendar components.

You may get the following features:

  • Date range.
  • Multi date support.
  • Support HTML components.
  • Disable weekdays or weekends.
  • A setting days event.
  • Supports material design.
  • Setting localization.

Calendar plays a vital role in enhancing the user experience as well as managing your time profoundly. It can help you track your daily events, to-do list, create new events, and many more.

There are innumerable angular calendar UI plugins available; nevertheless, we are using the ion2-calendar UI plugin to build the interactive calendar UI in ionic.

Ionic 5 Angular Calendar UI Example

  • Step 1: Install Ionic App
  • Step 2: Install ion2-calendar Plugin
  • Step 3: Register Calendar Module
  • Step 4: Create Simple Calendar UI
  • Step 5: Multiple Date Selection
  • Step 6: Create Date Range
  • Step 7: Display Calendar in Modal

Install Ionic App

The foundation of Ionic development is laid down by installing Ionic cli, so run command to invoke Ionic CLI installation.

npm install -g @ionic/cli

Now, run command to install the ionic angular app:

ionic start ionic-calendar-ui blank --type=angular

Get inside the app:

cd ionic-calendar-ui

To run the app on the browser, you may install the ionic lab package.

npm i @ionic/lab --save-dev

Initialize app on the browser:

ionic serve -l

Install ion2-calendar Plugin

Open the terminal screen, type the command on the command prompt, and execute it to install the ion2 calendar package.

npm i [email protected] moment

Register Calendar Module

We have to register the CalendarModule in the components module typescript file, and we are using the Home component. Nevertheless, you can create any component and register it into its respective module file.

Update home.module.ts file:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import { HomePageRoutingModule } from './home-routing.module';

// Module
import { CalendarModule } from 'ion2-calendar';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    CalendarModule
  ],
  declarations: [HomePage]
})

export class HomePageModule {}

Create Basic Calendar UI

To create a basic calendar user-interface, you have to set up a couple of variables and the onChange() method in the TypeScript file.

Update home.page.ts file:

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {
  date: string;
  type: 'string';

  constructor() { }

  onChange($event) {
    console.log($event);
  }
}

The ion-calendar directive evokes the calendar component, and you can define various events and methods to manage dates in calendar ui.

Update home.page.html file:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Calendar UI
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">

    <ion-calendar 
       (change)="onChange($event)" 
       [(ngModel)]="date" 
       [type]="type" 
       [format]="'YYYY-MM-DD'">
    </ion-calendar>

  </div>
</ion-content>

Multiple Date Selection

Adding multiple date selection features is easy using calendar package, import CalendarComponentOptions, and create optionsMulti object. Within the object, you can set the pickMode to multi for enabling multi data selection in Ionic.

Update home.page.ts file:

import { Component } from '@angular/core';
import { CalendarComponentOptions } from 'ion2-calendar';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {

  dateMulti: string[];
  type: 'string'; // 'string' | 'js-date' | 'moment' | 'time' | 'object'
  optionsMulti: CalendarComponentOptions = {
    pickMode: 'multi'
  };

  constructor() { }
 
}

Update home.page.html file:

<ion-calendar 
    [(ngModel)]="dateMulti"
    [options]="optionsMulti"
    [type]="type"
    [format]="'YYYY-MM-DD'">
</ion-calendar>

Create Date Range

Similarly, to build a date range in the calendar, you need to change the pickMode to the range, and the rest will be taken care of by the calendar plugin.

Update home.page.ts file:

import { Component } from '@angular/core';
import { CalendarComponentOptions } from 'ion2-calendar';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {

  dateRange: { from: string; to: string; };

  type: 'string'; // 'string' | 'js-date' | 'moment' | 'time' | 'object'
  
  optionsRange: CalendarComponentOptions = {
    pickMode: 'range'
  };

  constructor() { }
 
}

Update home.page.html file:

<ion-calendar 
    [(ngModel)]="dateRange"
    [type]="type"
    [options]="optionsRange"
    [format]="'YYYY-MM-DD'">
</ion-calendar>

Display Calendar in Modal

You can open Calendar in modal popup, for that you have to additionally need ModalController, CalendarModal, and CalendarModalOptions APIs.

Plus, create a custom function; we name it calendarModal() and add the required code into it. Also, bind the method to the ionic button with click event.

<ion-button expand="block" (click)="calendarModal()">Open Calendar</ion-button>
import { Component } from '@angular/core';

import { ModalController } from '@ionic/angular';
import { CalendarModal, CalendarModalOptions } from 'ion2-calendar';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {

  constructor(public modalController: ModalController) { }
 
  async calendarModal() {
      const options: CalendarModalOptions = {
        pickMode: 'range',
        title: 'Range Date',
      };

    let calendarUi =  await this.modalController.create({
      component: CalendarModal,
      componentProps: { options }
    });
 
    calendarUi.present();
  }

}

Ionic Calendar ui example

Conclusion

So that’s it for now. We had a chance to understand how to create Calendar UI in the Ionic application. We created a simple Calendar, Multi date selection calendar, date range calendar, and Calendar in Modal popover. You may go ahead and check out the documentation of the ion2-calendar plugin about its properties, methods, and API.