CalVis: Google Takviminiz için özelleştirilmiş bir AJAX kullanıcı arayüzü oluşturma

Austin Chau, Google Geliştirici Programları
Haziran 2008

Not: Bu, bir Google çalışanı tarafından başlatılan açık kaynaklı bir projedir ve resmi olarak desteklenen bir kitaplık değildir. İlgilenen herkesi katılmaya ve katkıda bulunmaya davet ediyoruz :)

Giriş

Google Takvim verilerini kullanarak web sitenizde özelleştirilmiş bir takvim deneyimi oluşturmak istediniz ancak takvim verilerini görsel olarak nasıl sunacağınızdan emin olamadınız mı? Bu ikilemi yaşayan çok sayıda geliştirici olduğu anlaşılıyor. Google Calendar Data API, tüm Google Takvim verilerinizin zenginliğinden yararlanmanıza olanak tanıdığı için güçlü bir web hizmeti API'si olsa da veri görselleştirme olanağı sunmayan salt okuma/yazma veri API'si olarak kalır.

Bu makalede, bu sorunu hafifletmek için yazdığım örnek bir kitaplığı göstereceğim. Google Takvim hesabındaki verileri sunmak için kolay ve özelleştirilebilir bir kullanıcı arayüzü (UI) sağlamayı amaçlayan Calendar Visualization (CalVis) adlı açık kaynaklı projeyi başlattım. CalVis, verileri doğrudan Google Calendar Data API aracılığıyla Google Takvim hesabınızdan çeker. (Editörün Notu: Google Takvim, v3'ten itibaren Google Veri Biçimi'ni kullanmamaktadır.) Google Takvim ile iletişim kurmak için altta Google Data JavaScript istemci kitaplığını kullanır ve özelleştirmede esnekliği en üst düzeye çıkarmak için tasarlanmıştır.

CalVis, geliştiricilerin zengin takvim kullanıcı arayüzü deneyimini yeniden oluşturmak zorunda kalmasını önlemek için tasarlanmıştır. Geliştiriciler, Google Takvim verilerini yerleştirmek için özelleştirilebilir bir şablon kapsayıcı olarak kullanabilir. Geliştiriciler, takvim verilerini oluşturmak ve siteleriyle derin düzeyde özelleştirilmiş entegrasyon elde etmek için CalVis'i kullanabilir. Öğreneceğiniz gibi, CalVis'in üzerine inşa edilen bir arayüz JavaScript, HTML ve CSS aracılığıyla tamamen özelleştirilebilir. Geliştiriciler, takvim verilerini oluşturmak için bir dizi temel takvim kontrol bileşeni içeren özelleştirilmiş bir takvim arayüzünü hızlı ve kolay bir şekilde dağıtabilir.

CalVis'i kullanma

Aşağıdaki adımlar, geliştirme sürecinizde CalVis'i kullanmaya başlamanıza yardımcı olur.

1. adım: Takvim görselleştirme kitaplığını yükleyin

Öncelikle yükleyiciyi HTML dosyanıza eklemeniz gerekir. Bu yükleyici, CalVis'in temel sınıflarını ve bağımlı kitaplıklarını (ör. Google Data JavaScript istemci kitaplığı) dinamik olarak yükler. 

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

2. adım: Stil özelliklerini tanımlamak için CSS stil sayfası kullanın.

Varsayılan CSS dosyası, bu örnekteki gibi varsayılan bir görünüm oluşturur. Bu CSS dosyasını indirebilir ve tamamen farklı bir görünüm ve tarz elde etmek için özelleştirebilirsiniz. 

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

3. adım: Takvim arayüzünün görsel yapısını HTML ile oluşturun

CalVis, takvim arayüzünü oluşturan çeşitli önceden tanımlanmış görsel bileşenlere sahiptir. Bu arayüz bileşenlerinin yapısal düzeni, HTML düzeninizle tanımlanır.

CalVis'in kullanıcı arayüzü bileşenleri şunlardır:

  • Giriş Kontrolü (yalnızca özel takvimler için)
    Bu, giriş/çıkış bağlantısını sağlayan HTML bileşenidir.
  • Durum Kontrolü
    Bu, durum bilgisi veya hatalar sağlayan HTML bileşenidir.
  • Gezinme Kontrolü
    Bu, takvimde gezinmeyi geçerli görünüme göre oluşturmak için kullanılan HTML bileşenidir.
  • Görünüm Kontrolü
    Bu, takvim görünümü seçimini oluşturmak için kullanılan HTML bileşenidir. Bu sürümde yalnızca ay veya hafta görünümleri kullanılabilir.
  • Takvim Gövdesi
    Bu, gerçek takvimi oluşturmak için kullanılan HTML bileşenidir. Tek tek tarih hücrelerini belirlemek için kullanılan ızgaralar.
  • Etkinlik Görüntüleme
    Bu, bir etkinlik tetiklendiğinde etkinlik ayrıntılarını oluşturmak için kullanılan HTML bileşenidir. Bu sürümde yalnızca "tıklama" ve "fareyle üzerine gelme" etkinlik tetikleyicisi desteklenir.

Temel HTML tablo yapısını kullanarak bu bileşenlerin görsel olarak nasıl düzenleneceğine dair bir örnek: 

  <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>

4. adım: CalVis'i JavaScript ile başlatın ve yapılandırın

JavaScript'i kullanarak davranış veya görünüm özelliklerini özelleştirebilirsiniz. JavaScript'te bir nesneyi değiştirebilmeniz için önce tarayıcı tarafından yüklenmesi gerektiğini unutmayın. Bu nedenle, önce tüm bağımlı kitaplıkların CalVis yükleyiciyle yüklenmesini beklemeniz gerekir. Bu işlem, calvis.ready() yöntemiyle yapılır. Bu yöntem, tüm kitaplıklar yüklendiğinde ve CalVis kullanıma hazır olduğunda çağrılacak bir geri çağırma yöntemi alır. 

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

Geri çağırma işlevinin içinde, calvis.Calendar nesnesinin bir örneğini oluşturursunuz. Şimdi, çeşitli CSS kimliklerini (bunlar 3. adımda HTML düzeninden tanımlanır) ilgili takvim kullanıcı arayüzü bileşenleriyle eşlemeniz gerekir. 

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');

Artık CalVis'in hangi Google Takvim hesabından veri alacağını belirleyebilirsiniz. Herkese açık bir takvim belirtmek için: 

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

Özel bir takvim belirtmek için giriş düğmesine karşılık gelen HTML bileşenini de belirtmeniz gerekir. 

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

Etkinlik ayrıntılarını görüntülemek için bir geri arama yöntemi sağlamanız gerekir. Böylece, takvimdeki bir etkinlik girişi tetiklendiğinde (tıklama veya fareyle üzerine gelme etkinliğiyle) geri arama yöntemi çağrılarak etkinlik ayrıntıları görüntülenir. Etkinlik görüntüleme geri çağırma örneği: 

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('');
}
Son olarak, takvimin varsayılan görünümünü ("ay" veya "hafta" görünümü) ayarlayabilir ve takvim kullanıcı arayüzünü görüntülemek için render() yöntemini çağırabilirsiniz: 
// set the default view to be "month"
calendar.setDefaultView('month');

// display the calendar
calendar.render();

Stili özelleştirme

Tek bir tarih hücresinin boyutunu, rengini veya stilini özelleştirmek için önceden tanımlanmış birkaç CSS sınıfının CSS stil özelliklerini değiştirmeniz yeterlidir. Örneğin, varsayılan CSS sınıfı monthViewCell ve contentCell'i geçersiz kılarak ay görünümünüzdeki her tarih hücresinin genişliğini ve yüksekliğini değiştirebilirsiniz.

Demo

Bu demo, CalVis'in varsayılan stil ile kullanımını gösterir.

Bu demo, Google Haritalar ve YouTube API ile bir mash-up oluşturmak için CalVis'in özelleştirilerek kullanılmasını gösterir.

Katkıda bulun

CalVis, kaynak kodu Google Code Project Hosting'de Subversion üzerinden indirilebilen bir açık kaynak projesidir.

Kaynaklar