How To Add Reminder In Ionic 2

How to Add Reminder in Ionic 2

A calendar is a very useful tool to remind you about time-specific events in your day to day life. It gives you the facility to track your events and as a result, you can use your brain in many other creative things than to keep reminding yourself about some specific events in your life.

Let’s start with integrating the reminder in your application using ionic. Below are the steps for the same.

 

Steps:

First, add ionic native calendar Cordova plugin in your application.

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

 

Then import plugin in app.module.ts file.

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

Then add createEvent() function for creating an event in the calendar and passing parameter following to ionic docs.        

this.calendar.createEvent(title, location, notes, startDate,    endDate).then(
		   (msg) => { alert(msg); },
		   (err) => { alert(err); }
	); 

 

Then create html form for getting user calendar event data.

<form (submit)="getCalender()">
	   <ion-item>
          <ion-label>Title</ion-label>
          <ion-input type="text" [(ngModel)]="title" name="title"></ion-input>
      </ion-item>

      <ion-item>
          <ion-label>Note</ion-label>
          <ion-input type="text" [(ngModel)]="notes" name="notes"></ion-input>
      </ion-item>

      <ion-item>
          	<ion-label>Location</ion-label>
<ion-input type="text" [(ngModel)]="location" name="location"></ion-input>
      </ion-item>

      <ion-item>
          <ion-label>Start Date</ion-label>
<ion-datetime displayFormat="DD MMM YYYY" [(ngModel)]="startDate" name="startDate"></ion-datetime>
      </ion-item>

      <ion-item>
<ion-label>Start Time</ion-label>
<ion-datetime displayFormat="hh:mm:a" [(ngModel)]="startTime" name="startTime"></ion-datetime>
      </ion-item>

      <ion-item>
      <ion-label>End Date</ion-label>
<ion-datetime displayFormat="DD MMM YYYY" [(ngModel)]="endDate" name="endDate"></ion-datetime>
      </ion-item>

      <ion-item>
<ion-label>End Time</ion-label>
<ion-datetime displayFormat="hh:mm:a" [(ngModel)]="endTime" name="endTime"></ion-datetime>
      </ion-item>

      <br><br>
      <button ion-button full>Submit</button>
	</form>

 

Now add two different field for time and date in event form and marge date and time and convert javascript ISO Date() format.

getCalender(){		
var startDateTimeISO = this.buildISODate(this.startDate, this.startTime);
var enddateTimeISO = this.buildISODate(this.endDate, this.endTime);
        	
this.calendar.requestWritePermission();	this.calendar.createEvent(this.title, this.location, this.notes, new Date(startDateTimeISO), new Date(enddateTimeISO)).then(
		        (msg) => { alert('msg '+msg); },
		        (err) => { alert('err '+err); }
);	
 }

buildISODate(date, time){
      var dateArray = date && date.split('-');
      var timeArray = time && time.split(':');
var normalDate = new Date(parseInt(dateArray[0]), parseInt(dateArray[1])-1, parseInt(dateArray[2]), parseInt(timeArray[0]), parseInt(timeArray[1]), 0, 0);
      return normalDate.toISOString();
  }

 

Then adding event notification add ionic local notification plugin.

    ionic cordova plugin add de.appplant.cordova.plugin.local-notification
    npm install --save @ionic-native/local-notifications

Then import plugin in app.module.ts file.

    import { LocalNotifications } from '@ionic-native/local-notifications';

Now add notification module in your submission form function.
 

 this.localNotifications.schedule({
		   	   title: this.title,
			   text: this.notes,
			   at: new Date(startDateTimeISO),
			   led: 'FF0000',
			   sound: null
		});

 

Then add Cordova platform which you are prefer.

     ionic cordova platform add ios
     ionic cordova platform add android

Now run your ionic application on your device.

      Ionic cordova run android --device

Hope this blog helped you to learn how to add Reminder in Ionic 2 quickly. Need more assistance regarding Hybrid App Development Contact us now!