Google Calendar api intergration with ionic

Ionic Framework ionic-v3
1

My app’s purpose is to create a google calendar event to the google account of whom ever is signed in. I manage to successfully do it in javascript by following these 2 guides:

However, when I try to integrate it into ionic version 3 typescript. It keeps showing error when I try to run the function to sign in

undefined is not an object (evaluating ‘gapi.client.init’)

My code are:

  • in index.html, I include
<script async defer src="assets/js/gglcalapi.js"></script>
  • in home.ts:
....
declare var gapi: any;
....
// Client ID of your google console project
  CLIENT_ID = 'XXXXXXXXX.apps.googleusercontent.com';

// Authorization scopes required by the API; multiple scopes can be included, separated by spaces.
  SCOPES = "https://www.googleapis.com/auth/calendar";

// Array of API discovery doc URLs for APIs used by the quickstart
  DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"];

//this function is executed when I click the button
  handleClientLoad() {
    gapi.load('client:auth2', this.initClient());
  }

  initClient() {
    gapi.client.init({
      discoveryDocs: this.DISCOVERY_DOCS,
      clientId: this.CLIENT_ID,
      scope: this.SCOPES,
    }).then(this.sigin());
  }

  sigin() {
    gapi.auth2.getAuthInstance().signIn();

I’m learning to create mobile app so I’m really appreciated if anyone could help.

2

You managed to solve?

3

Have you been able to manage this?
I’ve been trying for two weeks now to access the google calendar for my app but can’t figure out how to do this…

It worked within minutes when I tried it in vanilla Javascript, but I’ve not been able to find how to do this in ionic…

4

It is not possible, because you have to authorize the domain where the script is. solution is to use Ionic Native - Calendar

5

And is there not a solution to authorize this?

The company where I am doing an internship (I’m still very new to programming) currently organizes 3 different types of events (for example tech dives and fun events) for their employees and they send invites to them using google calendar, where each employee can then say if they will be attending or not.

They would still like to use this method but would also like to develop an app where employees could get an overview of all their events and sign-up/sign-out for the ones they like and get an overview for they events they signed-up for. This should all still be updated in google calendar as well so I think I need to use the google calendar.

I was able to get event information from a calendar in vanilla javascript so I would think it should also be possible in ionic (it is a javascript framework after all isn’t it?)

6

I’m using https://console.developers.google.com
where on credentials do I have to inform Authorized JavaScript Sources
In ionic there is no web way to infuse the source javascript.
This was my problem, plus I used the native calendar, which integrated with my calendar from my gmail account.

7

I have tried Ionic Native Calendar which is easy to use but there’s no support for attendees (send invitation to others’ email). I guess there’s no way to do that at the moment in ionic.

8

This might be a stupid question, but nobody at my internship is able to help me either…

I’ve seen on google developers that you could integrate google calendar in node.js
My backend is in node.js
Although it sounds strange to call my own restfull service to contact another api, does this mean I could do it in node.js and then contact my backend from ionic to collect and send the data I need?

At first I thought this should be possible but then I started thinking about the authorization and I’m not sure if this would be possible.