title: Ionic calendar event does not load on device
body: <p>I am doing a calendar event application and it runs perfect in a browser but when I build it on a device the date format is different and it is showing me errors. I have used ionic2-calendar for this and the error is happening only on a real device it runs perfectly on a browser.</p>
  
  <p>I have tried everything but I can't solve this problem.</p>
  
  <p>This is my home.page.ts</p>
  
  <pre><code>import { CalendarComponent } from 'ionic2-calendar/calendar';
  import { Component, ViewChild, OnInit, Inject, LOCALE_ID } from '@angular/core';
  import { Platform, ToastController, AlertController } from '@ionic/angular';
  import { formatDate } from '@angular/common';
  
  import { LocalNotifications, ELocalNotificationTriggerUnit, ILocalNotificationActionType, ILocalNotification } from '@ionic-native/local-notifications/ngx';
  
  import { Storage } from '@ionic/storage';
  
  import { StorageService, Item } from '../services/storage.service';
  
  @Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
  })
  export class HomePage implements OnInit {
    scheduled = [];
    event = {
      startTime: '',
      endTime: '',
      setreminder: false,
      title: '',
    }; 
  
    minDate = new Date().toISOString();
  
    eventSource = [];
    viewTitle;
  
  
    calendar = {
      mode: 'month',
      currentDate: new Date(),
    };
  
    items: Item[] = [];
    newItem: Item = &lt;Item&gt;{};
  
    @ViewChild(CalendarComponent) myCal: CalendarComponent;
  
    constructor(private plt: Platform, 
      private localNotifications: LocalNotifications, 
      private toastController: ToastController,
      private storage: Storage, 
      private storageService: StorageService,
      private alertCtrl: AlertController, @Inject(LOCALE_ID) private locale: string) {
  
      this.plt.ready().then(() =&gt; {
        this.loadItems();
        this.localNotifications.on('click').subscribe(res =&gt; {
          let msg = res.data ? res.data.mydata : '';
          this.showAlert(res.title, res.text, msg);
        });
  
        this.localNotifications.on('trigger').subscribe(res =&gt; {
          let msg = res.data ? res.data.mydata : '';
          this.showAlert(res.title, res.text, msg);
        });
      });
  
     }
  
  
    ngOnInit() {
      this.resetEvent();
    }
  
    resetEvent() {
      this.event = {
        startTime: new Date().toISOString(),
        endTime: new Date().toISOString(),
      setreminder: false,
      title: '',
  
  
      };
    }
    addEvent() {
  
      let eventCopy = {
            title: this.event.title,
            startTime:  new Date(this.event.startTime),
            endTime: new Date(this.event.startTime),
  
      };
  
      let eventss = this.eventSource;
  
             eventss.push(eventCopy);
             this.eventSource = [];
             this.eventSource = eventss;
                   this.myCal.loadEvents();
                   console.log(eventss);
  
      this.storageService.addItem(eventCopy).then(item =&gt; {
        eventCopy = &lt;Item&gt;{};
        this.showToast('Event Added!');
  
        this.loadItems();
  
      });
    }  
  
  
    loadItems() {
      this.storageService.getItems().then(items =&gt; {
        this.items = items;
        if (items) {
       this.eventSource = items;
        }
        else{
          console.log('No events Yet');
        }
  
  
        console.log(this.eventSource);
      });
  
  
  
  
    }
  
  
  
    getStorage(){
    this.storage.get('name').then((val) =&gt; {
      return ['name'];
    });
  
  
  }
   // Change current month/week/day
   next() {
    var swiper = document.querySelector('.swiper-container')['swiper'];
    swiper.slideNext();
  }
  
  back() {
    var swiper = document.querySelector('.swiper-container')['swiper'];
    swiper.slidePrev();
  }
  
  // Change between month/week/day
  changeMode(mode) {
    this.calendar.mode = mode;
  }
  
  // Focus today
  today() {
    this.calendar.currentDate = new Date();
  }
  
  // Selected date reange and hence title changed
  onViewTitleChanged(title) {
    this.viewTitle = title;
  }
  // Calendar event was clicked
  async onEventSelected(event) {
    // Use Angular date pipe for conversion
    let start = formatDate(event.startTime, 'medium', this.locale);
    let end = formatDate(event.endTime, 'medium', this.locale);
  
    const alert = await this.alertCtrl.create({
      header: 'Check your ajenda please',
      // subHeader: event.desc,
      message: 'From: ' + start + '&lt;br&gt;&lt;br&gt;To: ' + end,
      buttons: ['OK']
    });
    alert.present();
  }
  
  // Time slot was clicked
  onTimeSelected(ev) {
    let selected = new Date(ev.selectedTime);
    this.event.startTime = selected.toISOString();
    selected.setHours(selected.getHours() + 1);
    this.event.endTime = (selected.toISOString());
  }
  
  // scheduleNotification() {
  //  this.localNotifications.schedule({
  //       id: 1,
  //       title: 'Agenda Reminder',
  //       text: 'Please Check Your Agenda',
  //       data: { mydata: 'Please Check your agenda on ' + new Date(this.event.startTime) },
  //       trigger: { at: new Date(new Date(this.event.startTime)) }
  //     });}
  
  
  showAlert(header, sub, msg) {
    this.alertCtrl.create({
      header: header,
      subHeader: sub,
      message: msg,
      buttons: ['Ok']
    }).then(alert =&gt; alert.present());
  }
  async showToast(msg) {
    const toast = await this.toastController.create({
      message: msg,
      duration: 2000
    });
    toast.present();
  }
  
  
  }
  </code></pre>
  
  <p>this is my storage.service.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Storage } from '@ionic/storage';
  export interface Item {
    // title: string,
    startTime: Date,
    endTime: Date,
  
    // reminder: Date,
  
  
  }
  
  const ITEMS_KEY = 'my-items';
  
  @Injectable({
    providedIn: 'root'
  })
  export class StorageService {
  
    constructor(private storage: Storage) { }
  
    // CREATE
    addItem(item: Item): Promise&lt;any&gt; {
      return this.storage.get(ITEMS_KEY).then((items: Item[]) =&gt; {
        if (items) {
          items.push(item);
          return this.storage.set(ITEMS_KEY, items);
        } else {
          return this.storage.set(ITEMS_KEY, [item]);
        }
      });
    }
  
    // READ
    getItems(): Promise&lt;Item[]&gt; {
      return this.storage.get(ITEMS_KEY);
    }
  
  
  }
  </code></pre>
  
  <p>this is my home.page.html</p>
  
  <pre><code>&lt;ion-header&gt;
    &lt;ion-toolbar color="primary"&gt;
      &lt;ion-title&gt;
        {{ viewTitle }}
      &lt;/ion-title&gt;
      &lt;ion-buttons slot="start"&gt;
          &lt;ion-menu-button&gt;&lt;/ion-menu-button&gt;
        &lt;/ion-buttons&gt;
      &lt;ion-buttons slot="end"&gt;
        &lt;ion-button (click)="today()"&gt;Today&lt;/ion-button&gt;
      &lt;/ion-buttons&gt;
    &lt;/ion-toolbar&gt;
  &lt;/ion-header&gt;
  &lt;ion-content class="bg-style"&gt;
  
    &lt;!-- Card for adding a new event --&gt;
    &lt;ion-card class="bg-card"&gt;
      &lt;ion-card-header tappable (click)="collapseCard = !collapseCard"&gt;
        &lt;ion-card-title class="font-color"&gt;Add Reminder&lt;/ion-card-title&gt;
      &lt;/ion-card-header&gt;
      &lt;ion-card-content *ngIf="!collapseCard"&gt;
  
        &lt;ion-item&gt;
          &lt;ion-label&gt;Set Time&lt;/ion-label&gt;
          &lt;ion-datetime displayFormat="MM/DD/YYYY h:mm" pickerFormat="MMM D:h:mm"  [(ngModel)]="event.startTime" &gt;&lt;/ion-datetime&gt;
        &lt;/ion-item&gt;
  
  
        &lt;ion-button  expand="block" (click)="addEvent()"&gt;Add Event&lt;/ion-button&gt;
  
      &lt;/ion-card-content&gt;
  
    &lt;/ion-card&gt;
  
  
  
    &lt;ion-row&gt;
      &lt;ion-col size="4"&gt;
        &lt;ion-button expand="block" [color]="calendar.mode == 'month' ? 'primary' : 'secondary'" (click)="changeMode('month')"&gt;Month&lt;/ion-button&gt;
      &lt;/ion-col&gt;
      &lt;ion-col size="4"&gt;
        &lt;ion-button expand="block" [color]="calendar.mode == 'week' ? 'primary' : 'secondary'" (click)="changeMode('week')"&gt;Week&lt;/ion-button&gt;
      &lt;/ion-col&gt;
      &lt;ion-col size="4"&gt;
        &lt;ion-button expand="block" [color]="calendar.mode == 'day' ? 'primary' : 'secondary'" (click)="changeMode('day')"&gt;Day&lt;/ion-button&gt;
      &lt;/ion-col&gt;
      &lt;!-- Move back one screen of the slides --&gt;
      &lt;ion-col size="6" text-left&gt;
        &lt;ion-button fill="clear" (click)="back()"&gt;
          &lt;ion-icon name="arrow-back" slot="icon-only"&gt;&lt;/ion-icon&gt;
        &lt;/ion-button&gt;
      &lt;/ion-col&gt;
  
      &lt;!-- Move forward one screen of the slides --&gt;
      &lt;ion-col size="6" text-right&gt;
        &lt;ion-button fill="clear" (click)="next()"&gt;
          &lt;ion-icon name="arrow-forward" slot="icon-only"&gt;&lt;/ion-icon&gt;
        &lt;/ion-button&gt;
      &lt;/ion-col&gt;
    &lt;/ion-row&gt;
  
    &lt;calendar
    [eventSource]="eventSource" 
    [calendarMode]="calendar.mode" 
    [currentDate]="calendar.currentDate"
    (onEventSelected)="onEventSelected($event)"
    (onTitleChanged)="onViewTitleChanged($event)"
    (onTimeSelected)="onTimeSelected($event)" 
    startHour="6"
    endHour="20"
    step="30"
    startingDayWeek="1"&gt;
    &lt;/calendar&gt;
  
  &lt;ion-item *ngFor="let item of items"&gt;
    &lt;label&gt; {{item.startTime}}&lt;/label&gt;
    &lt;!-- &lt;label&gt; {{item.endTime}}&lt;/label&gt; --&gt;
  
  &lt;/ion-item&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>It works perfect on my browser this only happens in my device.</p>
  
  <p>This is the error message, I have used ionic2-calendar for this and the error is happening only on a real device it runs perfectly on a browser </p>
  
  <pre><code>ng:///NgCalendarModule/CalendarComponent.ngfactory.js:266 ERROR TypeError: event_1.startTime.getTime is not a function
  at MonthViewComponent.push…/node_modules/ionic2-calendar/monthview.js.MonthViewComponent.onDataLoaded (/src-app-home-home-module.js:1423)
  at MonthViewComponent.push…/node_modules/ionic2-calendar/monthview.js.MonthViewComponent.ngOnChanges (/src-app-home-home-module.js:1272)
  at checkAndUpdateDirectiveDynamic (vendor.js:56161)
  at checkAndUpdateNodeDynamic (vendor.js:57422)
  at checkAndUpdateNode (vendor.js:57371)
  at debugCheckAndUpdateNode (vendor.js:58002)
  at debugCheckDirectivesFn (vendor.js:57962)
  at Object.eval [as updateDirectives] (ng:///NgCalendarModule/CalendarComponent.ngfactory.js:323)
  at Object.debugUpdateDirectives [as updateDirectives] (vendor.js:57954)
  at checkAndUpdateView (vendor.js:57350)
  </code></pre>