Return 来自日历的日期和时间数组 API

Question

没有清晰、简洁且易于理解的示例来设置 JavaScript google 日历 API 调用。

我发现了一个示例，我尝试使用该示例将我的 OAuth 密钥插入其中，但它不起作用。要查看具体错误，请访问 Staging Website 并打开控制台。

<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，这样我就可以 return 当前日期和时间的数组我拥有的 Google 日历。

最终目标：能够根据 returned 日期数组过滤 jQuery 日期选择器的限制日期。然后，根据当天已经预订的内容过滤时段下拉菜单（如果有任何时段可用）。

我无法超越让所有东西相互交谈的第一步。

Answer 1

我看到你在使用 Google 人 API。对于您请求的电话（获取当前在您的 google 日历上的一组日期和时间）我建议您使用 Google 日历 API（而不是人员 API） .您可以关注 this comprehensive quickstart. For your specific needs, you can also head over to the list events 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 即可使其正常工作。如果您有任何其他问题，请随时回复。

此致。

Return 来自日历的日期和时间数组 API

Return array of dates and times from Calendar API

javascript

jquery

google-calendar-api

oauth2-playground