How to Build an Ionic 5 Calendar with Modal & Customisation

How to Build an Ionic 5 Calendar with Modal & Customisation

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

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Pros and Cons of Ionic Development

If you think Ionic is the right cross-platform application development, here are a few pros and cons of Ionic development. 

Ionic 5 Image Upload with NestJS & Capacitor: The API

Image upload is one of the most common use cases in your Ionic app, and to show you everything you need, we’ll build both the API and app together! This is the first part of our mini series on image upload with Ionic. Today, we are going to implement a NestJS API that works with a MongoDB so we can upload files from our app, get a list of all uploaded images and also delete images.

Ionic 5 Image Upload with NestJS & Capacitor: Capacitor App

In this part we’ll create an Ionic app with Capacitor so we can upload image files from the browser and iOS & Android apps!

How to Use Ionic Controllers in Ionic 5.x

In this video, we take a look at how Ionic's controllers work in Ionic 5. This is specific to plain JavaScript or StencilJS - other frameworks provide a wrapper for the controllers.

Hire Dedicated Ionic Developers

If you are planning to create customized, feature-rich & cross-platform mobile apps in a cost-effective manner? **[Hire Dedicated Ionic Developers](https://hourlydeveloper.io/hire-dedicated-ionic-app-developer/ "Hire Dedicated Ionic...