Возвращает массив дат и времени из API календаря

Не существует четкого, краткого и простого примера настройки вызова JavaScript API календаря Google.

Я нашел пример, который я пытался использовать, подключил свой ключ OAuth, и он не работает. Чтобы увидеть конкретные ошибки, посетите эталон и откройте консоль.

<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/[email protected]/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 на основе возвращаемого массива дат. Затем отфильтруйте раскрывающееся меню временных интервалов на основе того, что уже забронировано на день (если какие-либо временные интервалы доступны).

Я не могу пройти мимо этого первого шага, чтобы заставить все говорить друг с другом.


javascript google-calendar-api jquery oauth2-playground
person Alexander Dixon    schedule 02.10.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я вижу, что вы используете Google People API. Для запрошенного вами звонка (получение массива дат и времени в настоящее время в вашем календаре Google) я предлагаю вам использовать API календаря Google (вместо 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, идентификатор клиента и идентификатор календаря, чтобы он работал. Если у вас есть какие-либо другие вопросы, пожалуйста, не стесняйтесь обращаться к нам.

С уважением.

person carlesgg97    schedule 07.10.2019
comment
Теперь проблема заключается в том, что экран OAuth2 предлагает пользователю войти в свою учетную запись Google, когда в этом нет необходимости. Более того, когда я нажимаю «Авторизовать и загружаю», а затем закрываю приглашение, кажется, что все загружается отлично. Любые идеи? Я реализовал код и ввел свои учетные данные на промежуточном сайте. - person Alexander Dixon; 10.10.2019
comment
Александр Диксон: Чтобы использовать API со стороны клиента, вам необходимо использовать поток аутентификации OAuth2 (в том числе запрашивать его у пользователя). Вместо этого вы можете либо получить информацию календаря со стороны сервера с помощью «служебной учетной записи», либо получить данные со стороны клиента без использования API Google (см. эту ссылку: stackoverflow.com/questions/18064149/). Ваше здоровье! - person carlesgg97; 10.10.2019