Ionic 2 - Native Calendar


Hi guys,
I am trying to build a simple Calendar app. In view I will select a start date and time and an end start date and time

> <ion-item>
>     <ion-label>Data Inceput Programare</ion-label>
>     <ion-datetime displayFormat="DD MMM YY h:mm A" pickerFormat="DD MMM YY h mm A" [(ngModel)]="appoiment.startDate"></ion-datetime>
>   </ion-item>

>   <ion-item>
>     <ion-label>Data Sfarsit Programare</ion-label>
>     <ion-datetime displayFormat="DD MMM YY h:mm A" pickerFormat="DD MMM YY h mm A" [(ngModel)]="appoiment.endDate"></ion-datetime>
>   </ion-item>

Then after i press a button I expect to create an event on the callendar for inputed infromations

 <button ion-button color="secondary" small icon-left round (click)="addAppoiment()">
    <ion-icon name='contact'></ion-icon>
      Adaugare programare

In ts i have this

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Calendar } from '@ionic-native/calendar';

  appoiment = {
   name: "",
   number: "",
   startDate: new Date(),
   endDate: new Date(),
  constructor(public navCtrl: NavController, public navParams: NavParams, private calendar: Calendar ) {
      (msg) => { console.log(msg); },
      (err) => { console.log(err); }

    this.calendar.createEvent(, this.appoiment.number,, this.appoiment.startDate, this.appoiment.endDate);
    alert('Data de inceput: ' + this.appoiment.startDate);
    alert('Data de sfarsit: ' + this.appoiment.endDate);

What is happening:

  • I can create a “Programari” calendar
  • I CANNOT add any events on that calendar using createEvent() method
    -If I use cerateEventInteractivly() method I am allowed to pick a calendar and i can add an event

feodra 25 with
[mihai@localhost MySMSApp]$ ionic -version


[mihai@localhost MySMSApp]$ cordova -version

I am trying this app on a galaxy S7 with android 7

Noob alert for me though here! Any help and redirect to a more comprehensive documentation will be appreciated


To add more here: Looks like I cannot pick a date with ionic datepicker and use that in native calendar to create an event

Data de inceput:  2017-01-07T00:00:00Z
Data de sfarsit:  2017-01-11T00:00:00Z
main.js:1362 ERROR Error: Uncaught (in promise): startDate and endDate must be JavaScript Date Objects
    at d (polyfills.js:3)
    at l (polyfills.js:3)
    at polyfills.js:3
    at Object.Calendar.createEventWithOptions (Calendar.js:93)
    at Calendar.createEvent (Calendar.js:125)
    at callCordovaPlugin (main.js:55851)
    at main.js:55863
    at main.js:44668
    at new t (polyfills.js:3)
    at tryNativePromise (main.js:44667)
    at getPromise (main.js:44675)
    at wrapPromise (main.js:55862)
    at Calendar.<anonymous> (main.js:55993)
    at Calendar.value [as createEvent] (main.js:101192)
    at ListPage.addAppoiment (main.js:55697)
defaultErrorLogger @ main.js:1362
ErrorHandler.handleError @ main.js:1422
IonicErrorHandler.handleError @ main.js:110368
next @ main.js:5032
schedulerFn @ main.js:4106
SafeSubscriber.__tryOrUnsub @ main.js:35408 @ main.js:35357
Subscriber._next @ main.js:35299 @ main.js:35263 @ main.js:55442
EventEmitter.emit @ main.js:4092
NgZone.triggerError @ main.js:4463
onHandleError @ main.js:4424
t.handleError @ polyfills.js:3
n.runGuarded @ polyfills.js:3
(anonymous) @ polyfills.js:3
a @ polyfills.js:3
invoke @ polyfills.js:3

Per ionic documentation

ISO 8601 Datetime Format: YYYY-MM-DDTHH:mmZ

Ionic uses the ISO 8601 datetime format for its value. The value is simply a string, rather than using JavaScript’s Date object. Additionally, when using the ISO datetime format, it makes it easier to serialize and pass within JSON objects, and sending databases a standardized format which it can be easily parsed if need be.

Guess no one on the forum was able to use a datepicker to create an event? Can you guys give an example


Doesn’t the error message tell you exactly what needs to be done? You have ISO8601 strings, you are trying to call a function that wants JavaScript Date objects. The Date.parse() function turns one into the other.


Thanks for for that rapropos.

I think I wanted to know if anyone here did something like this, I doubt that they didn’t and wanted to know some good practices.

The Date.parse() function – didn’t worked due to a typescript transpiler problem

If anyone is interested I make it worked like this:

this.calendar.createEvent(, this.appoiment.number,,new Date( this.appoiment.startDate),new Date(this.appoiment.endDate));