Ionic 2+ - Open Native Calendar with Cordova and Ionic Native 3.x+

Introduction


In this tutorial ,we'll see how to use the device Native Calendar in Ionic 2+ with Cordova and Ionic Native 3.x+ .

We will create a simple Ionic 2+ application example which demonstrates how to open or create native calendar ,how to ask for read and write permissions to calendar and how to schedule or add events to calendar .

Getting started


Lets get started by generating a new Ionic 2+ application using the Ionic CLI v3+ :

Open your terminal or command prompt then run :

ionic start IonicNativeCalendarExample 

Navigate inside root folder :

cd IonicNativeCalendarExample 

Install the Cordova Calendar plugin and its Ionic Native wrapper .

ionic plugin add --save cordova-plugin-calendar
npm install --save @ionic-native/calendar

We need to add the Calendar provider to main module providers array :

Open src/app/app.module.ts then add :

import { Calendar } from '@ionic-native/calendar';

@NgModule({
declarations: [
    MyApp,
    HomePage   
],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    HomePage
],
providers: [
    StatusBar,
    SplashScreen,
    Calendar,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}     

Now we are ready to inject and use the native Calendar API .

Open src/pages/home/home.ts then :

import { Calendar } from '@ionic-native/calendar';

@Component({
selector: 'home',
templateUrl: 'home.html',
})
export class HomePage {

constructor(private calendar: Calendar) {
}

openCalendar(){
    this.calendar.openCalendar(new Date()).then(
        (msg) => { console.log(msg); },
        (err) => { console.log(err); }
    );
}

}

We have injected Calendar via component constructor then used the instance to open a calendar with current date .

Open src/pages/home/home.html and add a button to open the native calendar :

<button ion-button (click)="openCalendar()">Open Calendar on Current Date</button>

This is just a simple example to open a calendar .You can call more available methods for asking for read and write permissions then scheduling or adding events to Calendar .

Here is an example that ask for read/write permissions ,if they are granted an event will be added to Calendar interactively ,If not permissions will be first requested and then the event will be added .

addEvent(){
    return this.calendar.createEventInteractively("event title");
}
scheduleEvents(){
    this.calendar.hasReadWritePermission().then((result)=>{
    if(result === false){
        this.calendar.requestReadWritePermission().then((v)=>{
            this.addEvent();
        },(r)=>{
            console.log("Rejected");
        })
    }
    else
    {
        this.addEvent();
    }
    })     

You can find more information about the methods you can call via Ionic Native docs for this plugin .

Conclusion


You can add a target platform (Android and iOS only ) then run your Calendar app using an emulator or real device .

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status