I am trying to integrate Google Calendar API with Js inside an application. I tried to follow Google Quickstart. If I paste the example code in an HTML doc, change the clientID and the API key, I get the error attached when I open the file in Chrome.

Also, with console.log(gapi.client) I get back null.

The first block of code is where gapi functions are called (calendar_model.js).

The second block is where I link the api script to the document (I need to do that by js, in a file called dependency.js).

The third block is my index.js, from where I call the function in dependency.js.

console.log("first");

// Client ID and API key from the Developer Console
var CLIENT_ID = 'xxxxxxxxxxxxxxxxx.apps.googleusercontent';
var API_KEY = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx';

// Array of API discovery doc URLs for APIs used by the quickstart
var DISCOVERY_DOCS = [""];

// Authorization scopes required by the API; multiple scopes can be
// included, separated by spaces.
var SCOPES = ".readonly";

var authorizeButton;
var signoutButton;
/**
 *  On load, called to load the auth2 library and API client library.
 */
function handleClientLoad() {
  console.log("gapi type: " + typeof gapi + '\n');
  console.log("gapi client type: " + typeof gapi.client + '\n');
  gapi.load('client:auth2', initClient);
}

/**
 *  Initializes the API client library and sets up sign-in state
 *  listeners.
 */
function initClient()
{
  console.log("initClient callback start");
  gapi.client.init({
    apiKey: API_KEY,
    clientId: CLIENT_ID,
    discoveryDocs: DISCOVERY_DOCS,
    scope: SCOPES
  }).then(function () {
    // Listen for sign-in state changes.
    gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
    console.log(gapi);
    // Handle the initial sign-in state.
    updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
    authorizeButton.onclick = handleAuthClick;
    signoutButton.onclick = handleSignoutClick;
  }, function(error) {
    appendPre(JSON.stringify(error, null, 2));
  });
}

I am trying to integrate Google Calendar API with Js inside an application. I tried to follow Google Quickstart. If I paste the example code in an HTML doc, change the clientID and the API key, I get the error attached when I open the file in Chrome.

Also, with console.log(gapi.client) I get back null.

The first block of code is where gapi functions are called (calendar_model.js).

The second block is where I link the api script to the document (I need to do that by js, in a file called dependency.js).

The third block is my index.js, from where I call the function in dependency.js.

console.log("first");

// Client ID and API key from the Developer Console
var CLIENT_ID = 'xxxxxxxxxxxxxxxxx.apps.googleusercontent.';
var API_KEY = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx';

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

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

var authorizeButton;
var signoutButton;
/**
 *  On load, called to load the auth2 library and API client library.
 */
function handleClientLoad() {
  console.log("gapi type: " + typeof gapi + '\n');
  console.log("gapi client type: " + typeof gapi.client + '\n');
  gapi.load('client:auth2', initClient);
}

/**
 *  Initializes the API client library and sets up sign-in state
 *  listeners.
 */
function initClient()
{
  console.log("initClient callback start");
  gapi.client.init({
    apiKey: API_KEY,
    clientId: CLIENT_ID,
    discoveryDocs: DISCOVERY_DOCS,
    scope: SCOPES
  }).then(function () {
    // Listen for sign-in state changes.
    gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
    console.log(gapi);
    // Handle the initial sign-in state.
    updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
    authorizeButton.onclick = handleAuthClick;
    signoutButton.onclick = handleSignoutClick;
  }, function(error) {
    appendPre(JSON.stringify(error, null, 2));
  });
}

window.testMicroAppDependency = {
    calendarInit: function(){
        var calendar_root = document.getElementById("gcalendar-root");
        //create authorize button
        var x = document.createElement("button");
        x.setAttribute("id", "authorize_button");
        //x.style = "display: none";
        calendar_root.appendChild(x);
        //create signout button
        x = document.createElement("button");
        x.setAttribute("id", "signout_button");
        //x.style = "display: none";
        calendar_root.appendChild(x);

        authorizeButton = document.getElementById('authorize_button');
        signoutButton = document.getElementById('signout_button');
        
        x = document.createElement("script");
        x.src = "https://apis.google./js/api.js";
        x.async = true;
        x.defer = true;
        x.setAttribute("onload", "handleClientLoad()");
        x.setAttribute("onreadystatechange", "if (this.readyState === 'plete') this.onload()");
        calendar_root.appendChild(x);
    }
}

registry.add("microapp", "googlecalendar", {
        init: function (parentNode, options) {

            this._waitForDependency(function (error, dependency) {
                if (error) {
                    console.error("Unable to start Google Calendar MicroApp: " + error);
                } else {                    
                    var content = document.createElement("div");
                    content.setAttribute("id", "gcalendar-root");
                    parentNode.appendChild(content);
                    dependency.calendarInit();
                }
            });
        },

        _waitForDependency: function(callback) {
            var timeout = 5000;
            var startTime = new Date().getTime();
            var interval = setInterval(function() {
                if (window.hasOwnProperty("testMicroAppDependency")) {
                    clearInterval(interval);
                    callback(null, window.testMicroAppDependency);
                }
                if (new Date().getTime() - startTime > timeout) {
                    clearInterval(interval);
                    callback("Loading of HelloWorld MicroApp scripts timed out.", null);
                }
                console.log("... (waiting for testMicroAppDependency)");
            }, 100);
        }
    });

Here is the console where I log the type of gapi and of gapi.client. gapi is an object, so the library is loaded, but gapi.client is undefined.

I am pretty a newbie in web dev, maybe it's a silly issue or I didn't prehend something about Google API, but I can't get resolve it.

Any help is appreciated :)

• javascript
• google-calendar-api

Share Improve this question Follow edited Mar 12, 2020 at 9:22 Andrea Folino asked Mar 6, 2020 at 12:23 Andrea FolinoAndrea Folino 7122 silver badges88 bronze badges 9

• 1 hi, without any code here, we can't guess what is wrong. If I may try a guess, I think you didn't include all scripts properly (or wait until the google api is loaded before calling it) – Pierre Commented Mar 6, 2020 at 12:27
• did it prompt you to login? – Linda Lawton - DaImTo Commented Mar 6, 2020 at 12:27
• Install npmjs./package/@types/googlemaps so it cant detect maps for typescript and then try to debug it. – Vlad B. Commented Mar 6, 2020 at 12:37
• I have inserted some code block @Pierre, hope it helps – Andrea Folino Commented Mar 6, 2020 at 12:47
• 2 Make sure import <script src="apis.google./js/api.js"></script> in your index.html – Vlad B. Commented Mar 6, 2020 at 12:55

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 6

The main issue you are having is you are calling initClient function as an explicit function here:

gapi.load('client:auth2', initClient())

you have to pass it as an implicit function because gapi.load will use it as a callback (I remend you to check more about them). Therefore, it must be passed like this:

gapi.load('client:auth2', initClient)

Notice the subtle, but really important difference between the parenthesis in initClient() and initClient.

---

Also, you have these variables in the air without assigning them values for what I could see:

var authorizeButton;
var signoutButton;

They should be assigned the button elements to eventually handle them in your code:

var authorizeButton = document.getElementById('authorize_button');
var signoutButton = document.getElementById('signout_button');