Google Calendar - Google API a služby

vydáno: 02.06.2016, seriál: Google API a služby

Toto je 2. díl seriálu Google API a služby, pokud se dostatečně neorientujete, zkuste první díl.

Další z řady mnoha užitečných věci od Google které vám při tvorbě webu mohou usnadnit život je Google Calendar. Nezáleží na tom, jestli chcete jen pasivně zobrazovat Váš kalendář, nebo zda chcete uživatelům umožnit do něj zapisovat vlastní události. Nyní si ukážeme, jak ho na web přidat a jak pracovat s událostmi v něm.

Podobně jako u ostatních API, i zde Google nabízí celou řadu nejpoužívanějších jazyků, ve kterých lze s jeho kalendářem pracovat. My si zde ukážeme verzi s JavaScriptem.

První co budete potřebovat je klientské ID přidelěné Googlem. Pokud jste již v předchozích dílech našeho seriálu nějaké ID vytvářeli, je tento postup naprosto stejný. Pro ty z vás, kteří jsou ve službách Googlu nováčky doporučujeme využít průvodce na https://console.developers.google.com/flows/enableapi?apiid=calendar

Nyní na naši stránku umístíme následující kód:

Ukázka:

Javascript

var clientId = 'xxxxx';
      var scopes = ["https://www.googleapis.com/auth/calendar.readonly"];

      function checkAuth() {
        gapi.auth.authorize(
          {
            'client_id': clientId,
            'scope': scopes.join(' '),
            'immediate': true
          }, handleAuthResult);
      }

      function handleAuthResult(authResult) {
        var authorizeDiv = document.getElementById('authorize-div');
        if (authResult && !authResult.error) {
          authorizeDiv.style.display = 'none';
          loadCalendarApi();
        } else {
          authorizeDiv.style.display = 'inline';
        }
      }

Pojďme si nyní rozebrat, co jsme vlastně udělali.

Na prvním řádku jsme deklarovali proměnnou clientId, do které si jako hodnotu dosaďte své klientské ID od Google.
Druhý řádek určuje, v jakém režimu se s kalendářem bude pracovat, v tomto případě jej otevíráme pouze pro čtení.
Následuje funkce chechAuth(), která tyto informace vezme a ověří.
Poslední zatím vložená funkce se zavolá pro zpracování výsledku ověření, kdy pokud je vše v pořádku na řádku 16 skryje <div> s autorizací a na řádku 17 načte samotnou API Google Kalendáře. Pokud se však něco pokazilo, tak <div> s autorizací opět zobrazí a je možné ji provést ručně. Místo toho je možné (a vhodné) například poslat na sever k zalogování chybu. Pokud se rozhodneme ponechat uživateli možnost autorizovat API ručně, je potřeba přidat ještě následující funkci, která to umožní:

Ukázka:

Javascript

function handleAuthClick(event) {
        gapi.auth.authorize(
          {client_id: clientId, scope: scopes, immediate: false},
          handleAuthResult);
        return false;
      }

Pokud se API podařilo autorizovat, je ještě potřeba ji načíst, abychom s ní mohli pracovat. Toho docílí následující funkce, kterou po úspěšné autorizaci sama volá handleAuthResult().

Ukázka:

Javascript

function loadCalendarApi() {
        gapi.client.load('calendar', 'v3', listEvents);
      }

Tento řádek je prakticky stejný jako u ostatních API - obsahuje název API, kterou chceme načíst, její verzi a funkci, která se má po načtení provést.

Nyní bychom tedy měli mít API úspěšně oveřenou a načtenou, můžeme s ní tedy pracovat. Pojďme vytvořit funkci, která se má volat po načtení API, tedy listEvents(). Tato funkce by nám měla vrátit seznam budoucích událostí v kalendáři.

Ukázka:

Javascript

function listEvents() {
        var request = gapi.client.calendar.events.list({
          'calendarId': 'primary',
          'timeMin': (new Date()).toISOString(),
          'showDeleted': false,
          'singleEvents': true,
          'maxResults': 10,
          'orderBy': 'startTime'
        });

        request.execute(function(resp) {
          var events = resp.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.');
          }

        });
      }

Počet událostí máme nyní na řádku 7 omezen na 10, lze ho však nastavit libovolně, nebo i dynamicky proměnnou. Kupříkladu, pokud víme, že máme v kalendáři vždy jednu událost denně, můžeme si načíst 30 událostí a zobrazit uživateli harmonogram na měsíc dopředu.

Funkce mimo jiné vypisuje text, kupříkladu pokud nebyla nalezena žádná událost, je tedy potřeba přidat prostor, kam se budou tyto zprávy vypisovat:

Ukázka:

Javascript

function appendPre(message) {
        var pre = document.getElementById('output');
        var textContent = document.createTextNode(message + '\n');
        pre.appendChild(textContent);
      }

V tuto chvíli máme hotový všechen Javascript potřebný pro správnou práci s kalendářem. Ještě je potřeba přidat následující javascriptový odkaz do hlavičky naší stránky a vytvořit HTML elementy, ve kterých se bude zobrazovat samotný obsah kalendáře:

Ukázka:

HTML

<head>
<script src="https://apis.google.com/js/client.js?onload=checkAuth">
</head>
<body>
    <div id="authorize-div" style="display: none">
      <span>Authorize access to Google Calendar API</span>
      <button id="authorize-button" onclick="handleAuthClick(event)">
        Authorize
      </button>
    </div>
    <pre id="output"></pre>
</body>

Použité tagy: <head>, <script>, <body>, <div>, <span>, <button>, <pre>

A je to, celý kalendář je hotov a nyní na Vaši stránku vypíše seznam událostí ve Vašem kalendáři, např. takto:

Google Search Console návody

Seriál Google API a služby

Seznam všech článků seriálu:

Google Fonts
Google Calendar

Témata

Seriály

Google Calendar - Google API a služby

Seriál Google API a služby

Seznam všech článků seriálu: