Having a calendar component in your Ionic app could be an essential element for your whole app experience, and while there’s not a standard solution, there are a lot of free components we can use.

In this post we will use one of the best calendar components for Ionic called ionic2-calendar. Don’t worry about the name – it was updated for all versions and works fine with Ionic 5 as well!

We will integrate the component into our app and also create a simple modal so you could use the calendar sort of like a date picker as well!

Getting Started

First of all we need a new Ionic app and install the calendar. We also generate another page that we will later use for our modal:

ionic start ionCalendar blank --type=angular
cd ./ionCalendar
npm install ionic2-calendar
ionic g page pages/calModal

To use the calendar, you need to import it into the according page module. If you also want to localisee it for a specific language, you can use the registerLocaleData from Angular and import the language package you need. In my example I simply used the German language, but there are many more available!

Go ahead and change your home/home-module.ts to this now:

import { NgModule, LOCALE_ID } 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';
 
import { NgCalendarModule  } from 'ionic2-calendar';
import { CalModalPageModule } from '../pages/cal-modal/cal-modal.module';
 
import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';
registerLocaleData(localeDe);
 
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    NgCalendarModule,
    CalModalPageModule
  ],
  declarations: [HomePage],
  providers: [
    { provide: LOCALE_ID, useValue: 'de-DE' }
  ]
})
export class HomePageModule {}

That’s the only thing you need to do upfront for your calendar component!

#Ionic #intermediate