从日历 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 即可使其工作。 如果您有任何其他问题，请随时回复。

问候。