Ionic 2 - Native Calendar

Ionic Framework ionic-v3
1

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
  </button>

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(),
   info:""
  };
  constructor(public navCtrl: NavController, public navParams: NavParams, private calendar: Calendar ) {
   this.calendar.createCalendar('Programari').then(
      (msg) => { console.log(msg); },
      (err) => { console.log(err); }
    );
}


   addAppoiment(){
    this.calendar.requestWritePermission()
    this.calendar.createEvent(this.appoiment.name, this.appoiment.number, this.appoiment.info, 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

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

and

[mihai@localhost MySMSApp]$ cordova -version
6.5.0

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

2

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
SafeSubscriber.next @ main.js:35357
Subscriber._next @ main.js:35299
Subscriber.next @ main.js:35263
Subject.next @ 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
Thanks

3

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.

4

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.name, this.appoiment.number, this.appoiment.info,new Date( this.appoiment.startDate),new Date(this.appoiment.endDate));