Morioh
Login
Shannon Atkinson

Shannon Atkinson

4 years ago

How to Build Calendar App in Ionic 5

This is a comprehensive step by step tutorial explains how to build calendar UI in Ionic 5 and Angular 8 application using the ion2-calendar plugin.

Ionic 5 Calendar UI Tutorial Example

As we start typing the Ionic calendar plugin in Google, we start getting tons of calendar packages in the search result.

Out of those various calendar plugins, we have found out the ion2-calendar plugin is the best for building a calendar UI component in an Ionic application.

Table of Contents

  • Ionic Calendar UI Example
  • Create Ionic Application
  • Install Calendar Plugin
  • Import CalendarModule
  • Build Simple Calendar
  • Select Multiple Dates
  • Set Date Range
  • Calendar Localization
  • Calendar in Modal
  • Conclusion

Ionic 5 Calendar UI Example

The ion2-calendar package helps you select a date from the calendar view.

The Ionic calendar supports multiple date display formats, from the calendar dialog box, you can choose a single date, multiple dates, range of date, set locale date.

Here are the supported features:

  • Material design
  • Support date range
  • Support multi date
  • Setting days event
  • Setting localization
  • Support HTML components
  • Disable weekdays or weekends

Let’s start building calendar app in Ionic from scratch.

Create Ionic Angular Application

Run the following command using your terminal to install React application.

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

Head over to newly created Ionic project folder.

cd ionic-calendar-demo

Start the app by using the below command.

ionic serve

Install Calendar Plugin in Ionic

Run the below command to install the calendar UI package in the Ionic app running the below command.

npm install --save ion2-calendar@next moment

Now, we have installed the ion2-calendar plugin, which is a third-party plugin, and it works fantastic with the Ionic/Angular app.

Import CalendarModule

Ordinarily, we import third party plugins in the main module file, however, we are using PageModule.

We need to import the CalendarModule in the same page where we have to work and also register the module in the imports array to use calendar package.

We are about to start working with the default Ionic page that is going to be a home page for this calendar demo app.

Open the home/home.module.ts file and add the following code in it.

// home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { HomePage } from './home.page';

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ]),
    CalendarModule
  ],
  declarations: [HomePage]
})

export class HomePageModule {}

We imported the CalendarModule and also register the plugin in imports array.

Build Simple Calendar

Set up a basic calendar using the ion-calendar directive, this is just a basic calendar view. However, we can pass multiple events, options, and properties in the calendar component based on our requirements.

Add the following code in the home.page.html file.

// home.page.html

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

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

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

  </div>
</ion-content>

We attached an onChange event and passed events as an argument.

The type of property refers to the date type, and we can set ‘string’, ‘js-date’, ‘moment’, ‘time’ and ‘object’.

Various date formats can also be implemented in the calendar directive.

Open the home.page.ts file and add the below code.

// home.module.ts

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);
  }
}

Build Simple Calendar

Select Multiple Dates

In the previous example, we have learned how to select a single date from calendar template, now what if we need to select multiple dates.

To achieve this kind of functionality, we need to rely upon options property, and It allows you to select various dates using the date picker in Ionic.

We have to define the [options] property in the ion-calendar directive and set optionsMulti value for the corresponding property.

Open the home.page.html file and add the following code.

// home.page.html

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

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

  </div>
</ion-content>

Add the following code in home.page.ts file.

// home.module.ts

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';

  optionsMulti: CalendarComponentOptions = {
    pickMode: 'multi'
  };

  constructor() { }
}

Import the CalendarComponentOptions API, and It allows you to use the options property of ion-calendar in an Ionic app.

Define the optionsMulti property and bind it with CalendarComponentOptions, then set the pickMode to multi, now you can select multiple dates.

Select Multiple Dates

Set Date Range in Calendar

Setting up a Date range in an Ionic Calendar is easy, as we can in the below code we passed the optionsRange to options property.

Add the following code in the home page HTML template.

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

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

  </div>
</ion-content>

Open the home.page.ts file and place the following code in it.

// home.page.ts

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';

  optionsRange: CalendarComponentOptions = {
    pickMode: 'range'
  };

  constructor() { }
}

The CalendarComponentOptions API supports pickMode that can be used to choose single, multiple, and date range.

The pickMode: ‘range’ prop allows us to select the date range, which you can see in the example below.

Set Date Range in Calendar

Calendar Localization in Ionic

To localize the calendar view in Ionic, we first need to import LOCALE_ID and set the Locale id in the providers‘ array.

Open home.module.ts file, it is our root module, add the following code in it.

// home.module.ts

import { NgModule, LOCALE_ID } from '@angular/core';

@NgModule({
  imports: [...],
  declarations: [...],
  providers: [{ provide: LOCALE_ID, useValue: 'zh-CN' }]
})

export class HomePageModule {}

Next, open the home.page.html and add the below code in it.

// home.page.html

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

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

  </div>
</ion-content>

Open home.page.ts and place the given below code in it.

// home.page.ts

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';

  optionsRange: CalendarComponentOptions = {
    monthFormat: 'YYYY 年 MM 月 ',
    weekdays: ['天', '一', '二', '三', '四', '五', '六'],
    weekStart: 1,
    defaultDate: new Date()
  };

  constructor() { }
}

Calendar Localization in Ionic

Show Calendar in Modal

Now, we will learn to open the Calendar page in a Modal pop up, and you need to import the ModalController service in the home.page.ts file.

A Modal is a content pane that goes over the user’s current page. Usually it is used for making a choice or editing an item.
Ionic Framework

To open the calendar in a Model pop up, we need to Import ModalController API in Ionic typescript file.

import { ModalController } from '@ionic/angular';

Next, inject the ModalController in the constructor. It allows us to access the ModalController methods, and we will create a Modal using this method.

  constructor(
    public modalCtrl: ModalController
  ) { }

Import CalendarModal and CalendarModalOptions APIs, at the top of the TypeScript template.

The CalendarModal service helps to create calendar modal, and CalendarModalOptions service allows us to define options for calendar UI.

import { CalendarModal, CalendarModalOptions } from 'ion2-calendar';

Next, declare a function, inside this function we will write the code for calendar.

  async openCalendar() {
    // Code goes here
  }

Create Basic Calendar in Modal

Add the following code in your template.

async openCalendar() {
      const options: CalendarModalOptions = {
        title: 'BASIC',
        color:'danger'
      };

    let myCalendar =  await this.modalCtrl.create({
      component: CalendarModal,
      componentProps: { options }
    });

    myCalendar.present();
  }

First, we declare the calendar options, and then we create the calendar using ModalController.

We added the CalendarModal and componentProps, and lastly, we called the calendar using myCalendar.present() method.

Multi Date Calendar in Modal

To make the date range and multiple date picking calendar, add pickMode property and set the type of the calendar.

import { Component, OnInit } 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 implements OnInit {

  constructor(
    public modalCtrl: ModalController
  ) { }

  async openCalendar() {
      const options: CalendarModalOptions = {
        pickMode: 'multi',
        title: 'Multi',
        color:'danger'
      };

    let myCalendar =  await this.modalCtrl.create({
      component: CalendarModal,
      componentProps: { options }
    });

    myCalendar.present();
  }

  ngOnInit(){
    this.openCalendar()
  }

}

Range of Date in Modal

Here is the code for setting up date range.

async openCalendar() {
      const options: CalendarModalOptions = {
        pickMode: 'range',
        title: 'Range',
        color:'danger'
      };

    let myCalendar =  await this.modalCtrl.create({
      component: CalendarModal,
      componentProps: { options }
    });

    myCalendar.present();
  }

You can check out the full Calendar API documentation on the following URL: https://www.npmjs.com/package/ion2-calendar

Conclusion

Finally, Ionic 5 Calendar UI tutorial with examples has been over. In this tutorial, we learnt how to build a Calendar App in an Ionic application using the ion2-calendar plugin. We looked at how to implement single, multiple, range of dates, and showing calendar in Modal.

You can get the full code of this tutorial on the following GitHub repository.

#ionic #angular

How to Build Calendar App in Ionic 5
48.25 GEEK