JSでGoogleカレンダーに予定を追加したい。(GoogleCalendarAPIからは追加できました)

JavaScript(以下JS)でGoogleカレンダーに予定を追加したいです。

ページ内のJSコードをデベロッパーツールに貼り付けて実行しました。

// Refer to the JavaScript quickstart on how to setup the environment:
// https://developers.google.com/calendar/quickstart/js
// Change the scope to 'https://www.googleapis.com/auth/calendar' and delete any
// stored credentials.

var event = {
  'summary': 'Google I/O 2015',
  'location': '800 Howard St., San Francisco, CA 94103',
  'description': 'A chance to hear more about Google\'s developer products.',
  'start': {
    'dateTime': '2015-05-28T09:00:00-07:00',
    'timeZone': 'America/Los_Angeles'
  },
  'end': {
    'dateTime': '2015-05-28T17:00:00-07:00',
    'timeZone': 'America/Los_Angeles'
  },
  'recurrence': [
    'RRULE:FREQ=DAILY;COUNT=2'
  ],
  'attendees': [
    {'email': 'lpage@example.com'},
    {'email': 'sbrin@example.com'}
  ],
  'reminders': {
    'useDefault': false,
    'overrides': [
      {'method': 'email', 'minutes': 24 * 60},
      {'method': 'popup', 'minutes': 10}
    ]
  }
};

var request = gapi.client.calendar.events.insert({
  'calendarId': 'primary',
  'resource': event
});

request.execute(function(event) {
  appendPre('Event created: ' + event.htmlLink);
});

エラーが出ました。
Uncaught TypeError: Cannot read property 'calendar' of undefined at <anonymous>:34:27

Uses the JavaScript client library.
とありましたが、Javascript Client libraryの使い方がよく分かりません。

下のページの
Try this API
の所に自分のGoogleカレンダーIDを入力して

{
  "end": {
    "dateTime": "2020-06-05T22:00:00+09:00"
  },
  "start": {
    "dateTime": "2020-06-05T21:00:00+09:00"
  },
  "summary": "課題やる"
}

としたら、Googleカレンダーに予定を追加できました。

参考

Events: insert | Calendar API | Google Developers

行動規範の内容に同意します

回答1件

コメントに書いてあるリンク先のセットアップを済ませていないからだと思います。
https://developers.google.com/calendar/quickstart/js

ここに書かれてあるコードはセットアップが済んでいる前提のものだと思われます。
quickstartを見る限り、少なくともClient IDとAPI Keyの2つを取得して、それらを基にインスタンスの初期化することは必須のようです。Try this APIの場合は、それを内部でよしなにやっているのでしょう。

まずは、quickstartを読んでみて概要を掴むところから始めるといいのではないかと思います。

投稿2020/06/05 12:30

markey

総合スコア355

DrqYuto

2020/06/05 12:55

ありがとうございます！今手元に環境が無いので、明日試してみます

DrqYuto

2020/06/06 02:28

```   <!DOCTYPE html> <html> <head> <title>Google Calendar API Quickstart</title> <meta charset="utf-8" /> </head> <body> <p>Google Calendar API Quickstart</p>  <button id="authorize_button" style="display: none;">Authorize</button> <button id="signout_button" style="display: none;">Sign Out</button> <pre id="content" style="white-space: pre-wrap;"></pre> <script type="text/javascript"> // Client ID and API key from the Developer Console var CLIENT_ID = '略'; var API_KEY = '略'; // Array of API discovery doc URLs for APIs used by the quickstart var 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. var SCOPES = "https://www.googleapis.com/auth/calendar.readonly"; var authorizeButton = document.getElementById('authorize_button'); var signoutButton = document.getElementById('signout_button'); /** * On load, called to load the auth2 library and API client library. */ function handleClientLoad() { gapi.load('client:auth2', initClient); } /** * Initializes the API client library and sets up sign-in state * listeners. */ function initClient() { 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); // 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)); }); } /** * Called when the signed in status changes, to update the UI * appropriately. After a sign-in, the API is called. */ function updateSigninStatus(isSignedIn) { if (isSignedIn) { authorizeButton.style.display = 'none'; signoutButton.style.display = 'block'; listUpcomingEvents(); } else { authorizeButton.style.display = 'block'; signoutButton.style.display = 'none'; } } /** * Sign in the user upon button click. */ function handleAuthClick(event) { gapi.auth2.getAuthInstance().signIn(); } /** * Sign out the user upon button click. */ function 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. */ function 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. */ function 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; appendPre('Upcoming events:'); if (events.length > 0) { for (i = 0; i < events.length; i++) { var event = events[i]; var when = event.start.dateTime; if (!when) { when = event.start.date; } appendPre(event.summary + ' (' + when + ')') } } else { appendPre('No upcoming events found.'); } }); } </script> <script async defer src="https://apis.google.com/js/api.js" onload="this.onload=function(){};handleClientLoad()" onreadystatechange="if (this.readyState === 'complete') this.onload()"> </script> <script> // Refer to the JavaScript quickstart on how to setup the environment: // https://developers.google.com/calendar/quickstart/js // Change the scope to 'https://www.googleapis.com/auth/calendar' and delete any // stored credentials. var event = { 'summary': 'Google I/O 2015', 'location': '800 Howard St., San Francisco, CA 94103', 'description': 'A chance to hear more about Google\'s developer products.', 'start': { 'dateTime': '2015-05-28T09:00:00-07:00', 'timeZone': 'America/Los_Angeles' }, 'end': { 'dateTime': '2015-05-28T17:00:00-07:00', 'timeZone': 'America/Los_Angeles' }, 'recurrence': [ 'RRULE:FREQ=DAILY;COUNT=2' ], 'attendees': [ {'email': 'lpage@example.com'}, {'email': 'sbrin@example.com'} ], 'reminders': { 'useDefault': false, 'overrides': [ {'method': 'email', 'minutes': 24 * 60}, {'method': 'popup', 'minutes': 10} ] } }; var request = gapi.client.calendar.events.insert({ 'calendarId': 'primary', 'resource': event }); request.execute(function(event) { appendPre('Event created: ' + event.htmlLink); }); </script> </body> </html>  ``` と、<script>タグの中に入れました。カレンダー取得はできたのですが、エラーが出ました。 VM603:191 Uncaught ReferenceError: gapi is not defined at VM603:191 (anonymous) @ VM603:191 (index):1 Unchecked runtime.lastError: The message port closed before a response was received. 参考 browser-samples/index.html at master · gsuitedevs/browser-samples https://github.com/gsuitedevs/browser-samples/blob/master/calendar/quickstart/index.html