In this tutorial, You will learn how to create a calendar UI using the third party calendar plugin. This calendar UI plugin will work with Ionic 4. So there is no problem to worry about lazy loading of Ionic 4. There are few calendar plugins are available for Ionic 4. I feel this plugin is very easy and easy to use. I found some other calendar UI plugin also. In the forthcoming tutorial, i will try to write about other calendar UI plugins also.

This plugin offers two different UI. The preview is shown below

Preview of Calendar UI

 

Preview of Calendar UI in Modal

The modal page of calendar plugin gives us the ability to scroll to the previous month and next month in an easy to use manner.

And this plugin offers us to choose
1. Single Date
2. Multiple Date
3. Range of Date

So this plugin will be useful for many situations. Let try this.

Step1:
Create a new Ionic 4 project using the below command

ionic start myapp blank

Step2:
Install the calendar plugin using the below command.

npm install ion2-calendar@next moment --save

It is a third party plugin. I personally tested this plugin and works fine.

Step3:
Import the CalendarModule class to home.module.ts file 

import { CalendarModule } from 'ion2-calendar';

And put an entry of the CalendarModule to import section of home.module.ts file.

imports: [CalendarModule]

Step4:
This calendar plugin gives us <ion-calendar> tag, which is used to display the dates in month view format. Use the below code to display the month view calendar in the home.page.html file.

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

The above calendar allows us to choose a single date only. If you want to choose multiple dates, use the options property in your home.page.html file.

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

To use the options property on <ion-calendar> tag, import the CalendarComponentOptions object in the home.page.ts file.

import { CalendarComponentOptions } from 'ion2-calendar';

And create an optionsMulti variable in the home.page.ts file like below.

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

The CalendarComponentOptions object had pickMode property, which is used to select single, multiple and range of dates. The value of multi allows us to choose the multiple dates. Save the codes and preview it on your browser.

If you want to choose a range of dates, then use the below code on your home.page.ts file.

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

And paste the below code in your home.page.html file, which takes the optionsRange variable.

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

That's all. Next, This calendar plugin offers modal page scrollable month views. Let see them in detail.

Calendar UI in Modal Page
Choose Single Date Calendar

Import the ModalController class to your home.page.ts file to open the calendar page in modal.

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

Create an object reference for ModalController.

constructor(public modalCtrl: ModalController) { }

Create a function on your home.page.ts filea and create CalendarModalOptions object like below.

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

The color property takes the Ionic 4 built-in colors.

import the  CalendarModal, CalendarModalOptions from the ion2-calendar package.

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

Call the create() function of modal controller and pass the CalendarModal as page and pass the modal options also.

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

Call the present() function to display the modal calendar.

myCalendar.present();
Choose Multiple Date Calendar

If you want to choose multiple dates on the modal page, you need to modify the options of the modal calendar. In the above code, just change the pickMode of CalendarModalOptions to multi.

  const options = {
   pickMode: 'multi',
   title: 'MULTI',
  };
Choose Range of Date

Change the pickMode to choose the range of dates.

  const options: CalendarModalOptions = {
   pickMode: 'range',
   title: 'RANGE',
   color:'danger'
  };

This plugin works with the browser preview. So you can directly preview this using the below command.

ionic serve --lab

Get the full source code using the below link.

https://github.com/bharathirajatut/ionic4/blob/master/ionic4-calendar-ui-example1/

Feature of this calendar plugin for Ionic 4.
1. Support date range.
2. Support multi-date.
3. Support HTML components.
4. Disable weekdays or weekends.
5. Setting days event.
6. Setting localization.
7. Material design

Summary:
In this tutorial, you learnt how to create calendar ui using the third party calendar plugin. And also learned, how to call the modal page of this calendar UI. 

The official repo of this third-party calendar plugin is given below.

https://github.com/HsuanXyz/ion2-calendar