集成Google日历api javascript时未显示google日历？

Question

我正在尝试在我的网页上显示javascript引用的Google日历，但由于某种原因，它没有显示在我的网页上。谁能告诉我我在下面的代码中做错了什么。谢谢您的帮助。我还尝试仅使用iframe，但与api搭配使用效果不佳。这是我的下面的代码。

    <div class="text-center">
    <h1 class="display-4">Welcome</h1>


    <div id="Home" class="tabcontent">




        <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 = 'CLIENT_ID';
            var API_KEY = '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.
       *
      */

      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>

    </div>



</div> 

Answer 1

要在您的网页中嵌入Google日历，您可以使用iframes

只需将其与日历的嵌入URL一起嵌入到html代码中：

<iframe src="URL of you calendar" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

要找出嵌入URL，最简单的方法是

• 转到Google Calendar UI
• 选择感兴趣的日历
• 单击三个垂直点-> Settings and Sharing
• 向下滚动到Integrate calendar
• 复制粘贴Embed code
• 或根据需要复制Public URL to this calendar并粘贴到您的html代码中

注意：

如果要嵌入非公开日历，则可能需要更改预先制作日历的Access permissions公开可见。