Haziran 2008
Not: Bu proje, Google çalışanı tarafından başlatılan ve harici olarak desteklenen bir kitaplık olmayan açık kaynaklı bir projedir. Katılmak ve katkıda bulunmak isteyen herkesi davet ederiz :)
Giriş
Google Takvim verilerini kullanarak web sitenizde özelleştirilmiş bir takvim deneyimi oluşturmak istiyor ancak takvim verilerini nasıl sunacağınızı tam olarak bilmiyor musunuz? Bu ikilemi paylaşan çok sayıda geliştirici olduğu görülüyor. Google Calendar Data API, tüm Google Takvim verilerinizin zenginliğini kullanmanıza olanak tanıyan güçlü bir web hizmeti API'sidir. Bununla birlikte, veri görselleştirmeye gerek olmadan bir salt okuma/yazma veri API'sı olarak kalır.
Bu makalede, bu sorunu gidermek için yazdığım bir örnek kitaplığı göstereceğiz. Google Takvim hesabındaki verileri sunmak için kolay ve özelleştirilebilir bir kullanıcı arayüzü (UI) sağlamayı amaçlayan açık kaynaklı Takvim Görselleştirme (CalVis) projesini başlattım. CalVis, Google Calendar Data API aracılığıyla verileri doğrudan Google Takvim hesabınızdan alır. (Editörün Notu: 3. sürümden itibaren Google Takvim, Google Veri biçimini artık kullanmamaktadır.) Google Takvim ile iletişim kurmak için aşağıdaki Google Veri JavaScript istemci kitaplığından yararlanır ve özelleştirme esnekliğini en üst düzeye çıkarmak için tasarlanmıştır.
CalVis, geliştiricilerin zengin takvim kullanıcı arayüzü deneyimini yeniden oluşturma zorunluluğundan kurtaracak şekilde tasarlanmıştır. Geliştiriciler bunu Google Takvim verilerinin yer paylaşımı için özelleştirilebilir şablon kapsayıcısı olarak kullanabilir. Geliştiriciler takvim verilerini oluşturmak ve siteleriyle derinlemesine özelleştirilmiş entegrasyon elde etmek için CalVis'i kullanabilir. Öğreneceğiniz üzere, CalVis üzerine inşa edilen arayüz JavaScript, HTML ve CSS üzerinden tamamen özelleştirilebilir. Geliştiriciler takvim verilerini oluşturmak için bir dizi önemli takvim kontrol bileşeniyle özelleştirilmiş bir takvim arayüzünü hızlı ve kolay bir şekilde dağıtabilecekti.
CalVis'i kullanma
Aşağıdaki adımlar, geliştirmeniz için CalVis'i kullanmaya başlamanıza yardımcı olur.
1. Adım - Takvim Görselleştirme kitaplığını yükleyin
Önce yükleyiciyi HTML dosyanıza eklemeniz gerekir. Bu yükleyici, CalVis'in temel sınıflarının yanı sıra bağımlı kitaplıklarını (Google Data JavaScript istemci kitaplığı gibi) dinamik olarak yükler.
<script src="//gcal.appspot.com/calvis/calvis.js" type="text/javascript"></script>
2. Adım - Stil özelliklerini açıklamak için CSS stil sayfasını kullanın.
Varsayılan CSS dosyası, bu örnekteki gibi varsayılan bir görünüm ve tarz oluşturur. Bu CSS dosyasını indirip tamamen farklı bir görünüm ve tarza sahip olacak şekilde özelleştirebilirsiniz.
<link rel="stylesheet" type="text/css" href="//gcal.appspot.com/calvis/default.css" />
3. Adım - HTML'den takvim arayüzünün görsel yapısını oluşturun
CalVis, takvim arayüzünü oluşturan önceden tanımlanmış çeşitli görsel bileşenlere sahiptir. Bu arayüz bileşenlerinin yapısal düzeni HTML düzeninize göre 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 Denetimi
Bu, durum bilgilerini veya hataları sağlayan HTML bileşenidir.
-
Gezinme Denetimi
Bu, geçerli görünüme göre takvimde gezinmeyi oluşturan HTML bileşenidir.
-
Görüntüleme Denetimi
Bu, takvim görünümü seçimini oluşturan 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şturan HTML bileşenidir. Bağımsız tarih hücrelerini tanımlamak için ızgaralar.
-
Etkinlik Görüntüleme
Bu, bir etkinlik tetikleyicisinin ardından etkinlik ayrıntılarını oluşturan HTML bileşenidir. Bu sürümde yalnızca "click" ve "mouseover" etkinlik tetikleyicisi desteklenmektedir.
Temel HTML tablosu yapısını kullanarak bu bileşenleri görsel olarak düzenleme örneği:
<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 kullanarak herhangi bir davranışı veya görünümü özelleştirebilirsiniz. JavaScript'te bir nesneyi değiştirebilmeniz için öncelikle nesnenin tarayıcı tarafından yüklenmesi gerektiğini, bu yüzden de bağlı tüm kitaplıkların CalVis yükleyiciyle yüklenmesini beklemeniz gerektiğini, bunun calvis.Ready() yöntemiyle yapılacağını unutmayın. 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 açarsınız. Şimdi, ilgili takvim kullanıcı arayüzü bileşenlerini eşlemek için çeşitli CSS kimliklerini (3. Adımdaki HTML düzeninden tanımlanır) atamanız 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);
Gizli 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 çağırma yöntemini belirtmeniz gerekir. Böylece, takvimdeki bir etkinlik girişi tetiklendiğinde ("tıklama" veya "mouseover" etkinliği tarafından) geri çağırma işlemi, etkinlik ayrıntılarının gösterilmesi için çağrılır. Bir etkinliğe ait görüntülü ağ 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 create() yöntemini kullanabilirsiniz:
// set the default view to be "month"
calendar.setDefaultView('month');
// display the calendar
calendar.render();
Stili özelleştirin
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, ay görünümündeki her tarih hücresinin genişliğini ve yüksekliğini varsayılan CSS class monthViewCell ve contentHücrelerini geçersiz kılarak değiştirebilirsiniz.
Demo
Bu demo, CalVis'in varsayılan stilde nasıl kullanıldığını gösterir.
Bu demo, Google Haritalar ve YouTube API'si ile karma uygulama oluşturmak için özelleştirmelerle CalVis'i kullanmayı göstermektedir.
Katkıda bulun
CalVis, kaynak kodunu Google Code Project Hosting üzerinde Subversion üzerinden indirilebilen bir açık kaynak projesidir.
Kaynaklar