從日歷 API 返回日期和時間數組

Question

沒有用於設置 JavaScript google 日歷 API 調用的清晰、簡潔且易於遵循的示例。

我發現了一個示例，我嘗試使用將我的 OAuth 密鑰插入但它不起作用。 要查看具體錯誤，請訪問Staging 網站並打開控制台。

<script type="text/javascript">
  // Enter an API key from the Google API Console:
  //   https://console.developers.google.com/apis/credentials
  var apiKey = 'mXMq9NAQ9EOzdgleTTy4wobx';
  // Enter the API Discovery Docs that describes the APIs you want to
  // access. In this example, we are accessing the People API, so we load
  // Discovery Doc found here: https://developers.google.com/people/api/rest/
  var discoveryDocs = ["https://www.googleapis.com/calendar/v3/calendars/torontohomecleaning12@gmail.com/events"];
  // Enter a client ID for a web application from the Google API Console:
  //   https://console.developers.google.com/apis/credentials?project=_
  // In your API Console project, add a JavaScript origin that corresponds
  //   to the domain where you will be running the script.
  var clientId = '646125501608-jtauc86qulpebg2oh49k4qglfjui82gc.apps.googleusercontent.com';
  // Enter one or more authorization scopes. Refer to the documentation for
  // the API or https://developers.google.com/people/v1/how-tos/authorizing
  // for details.
  var scopes = 'events';
  var authorizeButton = document.getElementById('authorize-button');
  var signoutButton = document.getElementById('signout-button');
  function handleClientLoad() {
    // Load the API client and auth2 library
    gapi.load('client:auth2', initClient);
  }
  function initClient() {
    gapi.client.init({
        apiKey: apiKey,
        discoveryDocs: discoveryDocs,
        clientId: clientId,
        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 updateSigninStatus(isSignedIn) {
    if (isSignedIn) {
      authorizeButton.style.display = 'none';
      signoutButton.style.display = 'block';
      makeApiCall();
    } else {
      authorizeButton.style.display = 'block';
      signoutButton.style.display = 'none';
    }
  }
  function handleAuthClick(event) {
    gapi.auth2.getAuthInstance().signIn();
  }
  function handleSignoutClick(event) {
    gapi.auth2.getAuthInstance().signOut();
  }
  // Load the API and make an API call.  Display the results on the screen.
  function makeApiCall() {
    gapi.client.people.people.get({
      'resourceName': 'people/me',
      'requestMask.includeField': 'person.names'
    }).then(function(resp) {
      var p = document.createElement('p');
      var name = resp.result.names[0].givenName;
      p.appendChild(document.createTextNode('Hello, '+name+'!'));
      document.getElementById('content').appendChild(p);
    });
  }
</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>

問題：我找不到復制和粘貼示例，我所要做的只是換掉 OAuthkey 和 clientID，這樣我就可以返回我擁有的 Google 日歷上當前的日期和時間數組.

最終目標：能夠根據返回的日期數組過濾 jQuery 日期選擇器中斷日期。 然后，根據當天已預訂的內容（如果有可用的時間段）過濾時間段下拉菜單。

我無法超越讓一切都互相交談的第一步。

Answer 1

我看到您使用的是 Google People API。 對於您請求的呼叫（獲取當前在您的 google 日歷上的日期和時間數組），我建議您使用 Google Calendar API（而不是 People API）。 您可以按照這個全面的快速入門。 對於您的特定需求，您還可以前往 列表事件API 頁面，您可以使用 API 調用生成器生成必要的 Javascript 代碼以使其工作。

這是它為您需要發出的請求生成的代碼：

<script src="https://apis.google.com/js/api.js"></script>
<script>
  /**
   * Sample JavaScript code for calendar.events.list
   * See instructions for running APIs Explorer code samples locally:
   * https://developers.google.com/explorer-help/guides/code_samples#javascript
   */

  function authenticate() {
    return gapi.auth2.getAuthInstance()
        .signIn({scope: "https://www.googleapis.com/auth/calendar https://www.googleapis.com/auth/calendar.events https://www.googleapis.com/auth/calendar.events.readonly https://www.googleapis.com/auth/calendar.readonly"})
        .then(function() { console.log("Sign-in successful"); },
              function(err) { console.error("Error signing in", err); });
  }
  function loadClient() {
    gapi.client.setApiKey("YOUR_API_KEY");
    return gapi.client.load("https://content.googleapis.com/discovery/v1/apis/calendar/v3/rest")
        .then(function() { console.log("GAPI client loaded for API"); },
              function(err) { console.error("Error loading GAPI client for API", err); });
  }
  // Make sure the client is loaded and sign-in is complete before calling this method.
  function execute() {
    return gapi.client.calendar.events.list({
      "calendarId": "YOUR_CALENDAR_ID"
    })
        .then(function(response) {
                // Handle the results here (response.result has the parsed body).
                console.log("Response", response);
              },
              function(err) { console.error("Execute error", err); });
  }
  gapi.load("client:auth2", function() {
    gapi.auth2.init({client_id: "YOUR_CLIENT_ID"});
  });
</script>
<button onclick="authenticate().then(loadClient)">authorize and load</button>
<button onclick="execute()">execute</button>

您只需要設置您的 API 密鑰、客戶端 ID 和日歷 ID 即可使其工作。 如果您有任何其他問題，請隨時回復。

問候。