Hey,
I’ ve been trying for almost two weeks now to integrate the google calendar api in Ionic, no luck so far…
At first I just tried to access it in plain Javascript and that was working within minutes, then I started creating my app and tried to integrate it in Ionic and I got completely lost. I’ve been trying everything I know but I just can’t figure out how to do it (I’m still new to coding)…
As a last attempt I tried using the same code I think I was using when it worked in vanilla Javascript and adapted it to typescript but this as well does not seem to work and is giving me an error
TypeError: undefined is not an object (evaluating ‘this.DISCOVERY_DOCS’)
Please help me 
import { Http } from '@angular/http';
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, App, ModalController } from 'ionic-angular';
import { UsersProvider } from '../../providers/users/users';
import { GooglePlus } from '@ionic-native/google-plus';
import { LoginPage } from '../login/login';
declare var gapi: any;
@IonicPage()
@Component({
selector: 'page-events',
templateUrl: 'events.html',
})
export class EventsPage {
myId: string;
// Client ID and API key from the Developer Console
CLIENT_ID = "####################.apps.googleusercontent.com";
// Array of API discovery doc URLs for APIs used by the quickstart
DISCOVERY_DOCS = [
"https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"
];
// Authorization scopes required by the API; multiple scopes can be
// included, separated by spaces.
SCOPES = "https://www.googleapis.com/auth/calendar.readonly";
constructor(public navCtrl: NavController,
public navParams: NavParams,
private userService: UsersProvider,
private googlePlus: GooglePlus,
private app: App,
private modalCtrl: ModalController,
private http: Http) {
}
ngOnInit(){
this.userService.getMyId()
.subscribe(data => this.myId = data.id)
// this.http.get('https://www.googleapis.com/calendar/v3/calendars/###################.calendar.google.com/events')
// .subscribe(res => console.log(res))
this.handleClientLoad()
}
authorizeButton = document.getElementById('authorize-button');
signoutButton = document.getElementById('signout-button');
/**
* On load, called to load the auth2 library and API client library.
*/
handleClientLoad() {
gapi.load('client:auth2', this.initClient);
}
/**
* Initializes the API client library and sets up sign-in state
* listeners.
*/
initClient() {
gapi.client.init({
discoveryDocs: this.DISCOVERY_DOCS,
clientId: this.CLIENT_ID,
scope: this.SCOPES
}).then(function () {
// Listen for sign-in state changes.
gapi.auth2.getAuthInstance().isSignedIn.listen(this.updateSigninStatus);
// Handle the initial sign-in state.
this.updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
this.authorizeButton.onclick = this.handleAuthClick();
this.signoutButton.onclick = this.handleSignoutClick();
});
}
/**
* Called when the signed in status changes, to update the UI
* appropriately. After a sign-in, the API is called.
*/
updateSigninStatus(isSignedIn) {
if (isSignedIn) {
this.authorizeButton.style.display = 'none';
this.signoutButton.style.display = 'block';
this.listUpcomingEvents();
} else {
this.authorizeButton.style.display = 'block';
this.signoutButton.style.display = 'none';
}
}
/**
* Sign in the user upon button click.
*/
handleAuthClick(event) {
gapi.auth2.getAuthInstance().signIn();
}
/**
* Sign out the user upon button click.
*/
handleSignoutClick(event) {
gapi.auth2.getAuthInstance().signOut();
}
/**
* Append a pre element to the body containing the given message
* as its text node. Used to display the results of the API call.
*
* @param {string} message Text to be placed in pre element.
*/
appendPre(message) {
var pre = document.getElementById('content');
var textContent = document.createTextNode(message + '\n');
pre.appendChild(textContent);
}
/**
* Print the summary and start datetime/date of the next ten events in
* the authorized user's calendar. If no events are found an
* appropriate message is printed.
*/
listUpcomingEvents() {
gapi.client.calendar.events.list({
'calendarId': 'primary',
'timeMin': (new Date()).toISOString(),
'showDeleted': false,
'singleEvents': true,
'maxResults': 10,
'orderBy': 'startTime'
}).then(function(response) {
var events = response.result.items;
this.appendPre('Upcoming events:');
if (events.length > 0) {
for (let i = 0; i < events.length; i++) {
var event = events[i];
var when = event.start.dateTime;
if (!when) {
when = event.start.date;
}
this.appendPre(event.summary + ' (' + when + ')')
}
} else {
this.appendPre('No upcoming events found.');
}
});
}