CalVis: tworzenie niestandardowego interfejsu AJAX dla Kalendarza Google

Austin Chau, Google Developer Programs
czerwiec 2008

Uwaga: jest to projekt typu open source rozpoczęty przez pracownika Google. Nie jest on oficjalnie obsługiwaną biblioteką. Zachęcamy do udziału wszystkich zainteresowanych :)

Wprowadzenie

Czy chcesz czasami w swojej witrynie tworzyć kalendarz dostosowany do danych z Kalendarza Google, ale nie wiesz, jak prezentować dane z kalendarza? Jest wielu programistów, którzy dzielą ten dylemat. Interfejs Google Calendar Data API jest zaawansowanym internetowym interfejsem API, ponieważ umożliwia dostęp do wszystkich danych Kalendarza Google, ale jest czystym interfejsem API do odczytu i zapisu, bez możliwości wizualizacji danych.

W tym artykule zaprezentuję przykładową bibliotekę, która powstała, aby pomóc w rozwiązaniu tego problemu. Rozpocząłem projekt typu open source o nazwie Wizualizacja Kalendarza (CalVis), którego celem jest zapewnienie łatwego i dostosowywanego interfejsu użytkownika do prezentowania danych z konta Kalendarza Google. Aplikacja CalVis pobiera dane bezpośrednio z konta Kalendarza Google za pomocą interfejsu Google Calendar Data API. Uwaga od redakcji: od wersji 3 Kalendarz Google nie używa już formatu danych Google. Wykorzystuje poniższą bibliotekę klienta JavaScript danych Google do komunikacji z Kalendarzem Google i została zaprojektowana w celu zmaksymalizowania elastyczności w dostosowywaniu.

Aplikacja CalVis została zaprojektowana tak, aby odciążać deweloperów od konieczności ponownego odtwarzania interfejsu multimedialnego kalendarza. Programiści mogą go używać jako dostosowywanego kontenera szablonu, aby nakładać się na dane Kalendarza Google. Programiści mogą używać CalVis do renderowania danych kalendarza i osiągania głębokiej dostosowanej integracji ze swoimi witrynami. Jak się przekonasz, interfejs stworzony na podstawie CalVisa można w pełni dostosowywać za pomocą JavaScriptu, HTML i CSS. Deweloperzy mogliby szybko i łatwo wdrożyć niestandardowy interfejs kalendarza z zestawem niezbędnych komponentów sterowania kalendarzem do renderowania danych kalendarza.

Korzystanie z CalVis

Poniżej znajdziesz informacje, które pomogą Ci zacząć korzystać z CalVis na potrzeby programowania.

Krok 1. Wczytaj bibliotekę wizualizacji Kalendarza

Najpierw musisz umieścić kod wczytujący w pliku HTML. Ten moduł dynamicznie wczytuje podstawowe klasy CalVis oraz ich zależne biblioteki (np. bibliotekę klienta Google Data JavaScript). 

<script src="//gcal.appspot.com/calvis/calvis.js" type="text/javascript"></script>

Krok 2. Użyj atrybutów arkusza stylów CSS, aby opisać atrybuty stylów.

Domyślny plik CSS generuje domyślny wygląd i styl, jak w tym przykładzie. Możesz pobrać ten plik CSS i dostosować go, aby uzyskać zupełnie inny wygląd. 

<link rel="stylesheet" type="text/css" href="//gcal.appspot.com/calvis/default.css" />

Krok 3. Zaplanuj strukturę wizualną interfejsu kalendarza za pomocą kodu HTML

Interfejs CalVis składa się z kilku wstępnie zdefiniowanych elementów wizualnych, które składają się na interfejs kalendarza. Struktura tych komponentów interfejsu jest określana przez układ HTML.

Składniki interfejsu CalVis to:

  • Kontrola logowania (tylko w przypadku kalendarzy prywatnych)
    Jest to komponent HTML, który zawiera link logowania/wylogowania.
  • Kontrola stanu
    Jest to komponent HTML, który zawiera informacje o stanie lub błędy.
  • Elementy sterujące nawigacją
    Jest to komponent HTML, który renderuje nawigację w kalendarzu w stosunku do bieżącego widoku.
  • Kontrola nad widokiem danych
    Ten komponent HTML generuje widok kalendarza. W tej wersji dostępne są tylko widoki miesiąca lub tygodnia.
  • Treść kalendarza
    Jest to komponent HTML, który renderuje rzeczywisty kalendarz. Z siatką wyznaczającą poszczególne komórki daty.
  • Wyświetlanie zdarzeń
    Jest to komponent HTML, który generuje szczegóły zdarzenia po wyzwoleniu zdarzenia. W tej wersji dostępne są tylko reguły zdarzenia „click” i „mouseover”.

Przykład wizualizacji tych komponentów za pomocą podstawowej struktury tabeli HTML: 

  <table style="width: 800px;">
    <tr>
      <td colspan="2" valign="top">
        <div style="float: left;" id="loginControlDiv"></div>
        <div style="float: right;" id="statusControlDiv"></div>
      </td>
    </tr>      
    <tr>
      <td valign="top">
        <div id="navControlDiv"></div>
      </td>
      <td valign="top" align="right">
        <div id="viewControlDiv"></div>
      </td>
    </tr>
    <tr>
      <td colspan="2" valign="top">
        <div id="calendarBodyDiv"></div>
      </td>
    </tr>
    <tr>
      <td colspan="2" valign="top">
        <div id="eventDisplayDiv"></div>
      </td>
    </tr>
  </table>

Krok 4. Zainicjuj i skonfiguruj CalVis za pomocą JavaScriptu

Dowolne działanie lub wygląd możesz dostosować za pomocą JavaScriptu. Pamiętaj, że aby można było modyfikować obiekt w języku JavaScript, musi on zostać załadowany przez przeglądarkę, więc najpierw trzeba poczekać na wczytanie wszystkich zależnych bibliotek za pomocą wczytującego się CalVis. W tym celu należy użyć metody calvis.ready(). Ta metoda wywołuje metodę wywołania zwrotnego, która jest wywoływana, gdy wszystkie biblioteki są załadowane, a CalVis jest gotowy do użycia. 

window.onload = function() {
  calvis.ready(callback);
}

W ramach funkcji wywołania zwrotnego wywołasz instancję instancji calvis.Calendar. Teraz musisz przypisać różne identyfikatory CSS (zdefiniowane w układzie HTML w kroku 3), aby zmapować je na odpowiednie komponenty interfejsu kalendarza. 

var calId = 'developer-calendar@google.com';

var calendar = new calvis.Calendar();

// set the CSS IDs for various visual components for the calendar container
calendar.setCalendarBody('calendarBodyDiv');
calendar.setStatusControl('statusControlDiv');
calendar.setNavControl('navControlDiv');
calendar.setViewControl('viewControlDiv');

Teraz możesz określić, z którego konta Kalendarza Google powinny być pobierane dane. Aby określić kalendarz publiczny: 

// set the calenar to pull data from this Google Calendar account
calendar.setPublicCalendar(calId);

Aby określić kalendarz prywatny, musisz też podać komponent HTML odpowiadający przyciskowi logowania – 

// set the calenar to pull data from this Google Calendar account
calendar.setPrivateCalendar(calId);
calendar.setLoginControl('loginControlDiv');

Aby wyświetlić szczegóły wydarzenia, musisz podać metodę wywołania zwrotnego, tak by po aktywowaniu zdarzenia w kalendarzu (wywołujących zdarzenie „click” lub „mouseover”) wywoływano wywołanie zwrotne do wyświetlenia szczegółów wydarzenia. Przykład wywołania wywołania zwrotnego zdarzenia 

calendar.setEventCallback('click', displayEvent);

function displayEvent(event) {    
  var title = event.getTitle().getText();  
  var date = event.getTimes()[0].getStartTime().getDate();
  var content = event.getContent().getText();  
  
  var eventHtml = [;
  eventHtml.push(date.toString());
  eventHtml.push('<br><br>');
  eventHtml.push('<b>Event title:</b> ');
  eventHtml.push(title);
  eventHtml.push('<br>');
  eventHtml.push('<br>');
  eventHtml.push('<b>Description:</b>');
  eventHtml.push('<p style="font-size: 11px;">');
  eventHtml.push(content); 
  eventHtml.push('</p>');
  eventHtml.push('<br>');

  document.getElementById('eventDisplayDiv').innerHTML = eventHtml.join('');
}
Możesz też ustawić domyślny widok kalendarza (widok miesiąca lub tygodnia) i wywołać metodę renderowania(), aby wyświetlić interfejs kalendarza. 
// set the default view to be "month"
calendar.setDefaultView('month');

// display the calendar
calendar.render();

Dostosuj styl

Aby dostosować rozmiar, kolor lub styl pojedynczej komórki daty, wystarczy zmodyfikować atrybuty stylu CSS kilku wstępnie zdefiniowanych klas CSS. Na przykład w widoku miesiąca możesz zmienić szerokość i wysokość każdej komórki z datami, zastępując domyślne wartości CSS class monthViewCell i contentCell.

Wersja demonstracyjna

Ta demonstracja pokazuje używanie CalVis z stylem domyślnym.

Ta prezentacja pokazuje, jak korzystać z CalVis z dostosowaniem do łączenia danych z Mapami Google i YouTube API.

Publikuj

CalVis to projekt typu open source, którego kod źródłowy jest dostępny do pobrania w ramach usługi Google Code Project Hosting.

Zasoby