browser-samples Calendar API quickstart requests whitelisted domain

Expected Behavior

I followed all steps in the example https://developers.google.com/calendar/quickstart/js

Setup a new project via the button
Setup a new API key via the button
copied and pasted the code to a page on my web site /googleCal.html

Now I expect to see the Google Oauth authorization screen to grant access to my calendar

Actual Behavior

{ "error": "idpiframe_initialization_failed", "details": "Not a valid origin for the client: https:// has not been whitelisted for client ID XXXX-YYYY.apps.googleusercontent.com. Please go to https://console.developers.google.com/ and whitelist this origin for your project's client ID." }

I tried without success all combinations of below: a) restricting the application to web browsers and added "https://mydomain/*" as the URL restriction b) restricting the API to calendar only

All info I find about whitelisting points to an Oauth client, which generates a client Id and secret, not the requested client ID and API key.

I tried adding an Oauth client with the correct whitelisted website, even though this is not part of the example and "mix and match": The API key from the "API KEYS" section, and the Oauth client ID from the "OAuth 2.0 Client IDs" section. The Oauth client lists the required domain in it's callback URI.

Now the error seemingly goes away, but I get the error below in the console, on the call gapi.client.calendar.events.list ....

Bottom line, the example is somehow incomplete and does not work.

JavaScript Console Output

Uncaught TypeError: Cannot read property 'events' of undefined at googleCal.html:137 at e.Br (cb=gapi.loaded_0:239) at $k (cb=gapi.loaded_0:242) at Vk (cb=gapi.loaded_0:242) at _.Gk.cT (cb=gapi.loaded_0:242) at Fk (cb=gapi.loaded_0:234)

(View your JavaScript Console to see if there are any errors)