Create Calendar in Ionic/Angular Applications

Ionic Calendar Integration Tutorial: In this extended tutorial, you'll learn how to use the npm ion2-calendar package to add or make a Calendar UI component in an Ionic Angular app.

The ion2-calendar plugin is a useful package that is mostly used to add the calendar UI module to an Ionic/Angular app. It can be downloaded through the node package manager and comes with features for building calendar components right out of the box.

You will get the following features in ion2-calender:

• Date-Range.
• Multi-Date Support.
• HTML Components.
• Disable Weekdays/Weekends.
• Setting Days_Event.
• Material-Design.
• Setting-Localization.

A calendar is essential to improving the user experience and helping you manage your time. This calendar can help you track your daily schedule, list things to do, add new events, and do a lot more.

There are many angular calendar UI plugins, but we're building the interactive calendar UI in ionic with the ion2-calendar UI plugin.

Ionic 6 & Angular Calendar UI

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

Set up the Ionic App

Installing Ionic CLI is the first step in making Ionic apps, so run the command to start Ionic CLI installation.

npm install -g @ionic/cli

Bash

Now, type the command to install the ionic, angular app:

ionic start calender blank --type=angular

Bash

Check out the app:

cd calendar

Bash

You can install the ionic lab package to run the app in your browser.

npm i @ionic/lab --save-dev

Bash

Start the app up in the browser:

ionic serve -l

Bash

Get Rid of Type Errors

There must be no strict type errors. Make sure "strictTemplates" is turned: to false in the tsconfig.json file's in angularCompilerOptions section.

Install ion2-calendar Plugin

To install the ion2-calendar package, open the terminal screen, type the command at the command prompt, and run it.

npm i ion2-calendar@next moment

Bash

Register Calendar Module

We need to register the CalendarModule in the components module typescript file and use the Home component. Still, you can make any component and write it in the module file for that component.

Update home.module.ts file:

// Other Imports

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

@NgModule({
  imports: [
    CalendarModule
  ],
  declarations: [HomePage]
})

export class HomePageModule {}

TypeScript

Make a simple calendar interface

Set up a few variables and the onChange() method in the TypeScript file to make a simple calendar interface.

Update home.page.ts file:

// Your Imports

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

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

  constructor() { }

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

TypeScript

The ion-calendar directive calls up the calendar component. In the calendar UI, you can set up different events and methods to manage dates.

Update home.page.html file:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Create Calendar in Ionic/Angular Applications
    </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>

Markup

Multiple Date Selection

Adding the ability to choose from more than one date is easy if you use the calendar package, import CalendarComponentOptions, and create an optionsMulti object. Ionic lets you select more than one piece of data at once by setting the pick mode property of an object to "multi."

Update home.page.ts file:

// Other Imports
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() { }
 
}

TypeScript

Update home.page.html file:

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

Markup

Set a range of dates

To make a range of dates in the calendar, you need to change the pick mode to the field. The calendar plugin will take care of the rest.

Update home.page.ts file:

// Other Imports
import { CalendarComponentOptions } from 'ion2-calendar';

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

export class HomePage {

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

  type: any = 'string'; // It count be anything like 'string' Or 'js-date' Or 'moment' Or 'time' Or 'object'
  
  optionsRange: CalendarComponentOptions = {
    pickMode: 'range'
  };

  constructor() { }
 
}

TypeScript

Update home.page.html file:

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

Markup

Show the Calendar in the Modal

You can use the ModalController, CalendarModal, and CalendarModalOptions APIs to open Calendar in a modal popup.

Also, make a custom function, which we'll call calendarModal(), and put the code you need into it. Bind the method to the ionic button's click event as well.

<ion-button (click)="calendarModal()">Open Calendar</ion-button>

Markup

// Other Imports

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) { }
 
  calendarModal() {
      const options: CalendarModalOptions = {
        pickMode: 'range',
        title: 'Range Date',
  };

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

}

TypeScript

Conclusion

So, for now, that's all. We learned how to make a Calendar UI in the Ionic app. We made a simple Calendar, a Calendar with multiple dates, a Calendar with a date range, and a Calendar in a popover.

If you face any difficulty or want any help, just comment below and we will help you out. And make sure to subscribe us on YouTube.