Juni 2008
Catatan - Ini adalah project open source yang dimulai oleh Googler, bukan library yang didukung secara resmi. Kami mengundang semua orang yang tertarik untuk bergabung dan berkontribusi :)
Pengantar
Pernahkah Anda ingin membuat pengalaman kalender yang disesuaikan di situs Anda menggunakan data Google Kalender, tetapi tidak yakin cara menyajikan data kalender secara visual? Sepertinya ada banyak developer yang membagikan dilema ini. Meskipun Google Kalender Data API adalah API layanan web yang canggih karena dapat memanfaatkan kekayaan semua data Google Kalender Anda, API ini tetap menjadi API data baca/tulis murni tanpa ketentuan untuk visualisasi data.
Dalam artikel ini, saya akan menunjukkan contoh library yang telah saya tulis untuk mengatasi masalah ini. Saya memulai project open source, Visualisasi Kalender (CalVis), yang bertujuan untuk menyediakan antarmuka pengguna (UI) yang mudah dan dapat disesuaikan untuk menyajikan data dari akun Google Kalender. CalVis mengambil data langsung dari akun Google Kalender Anda melalui Google Kalender Data API. (Catatan Editor: Mulai v3, Google Kalender tidak lagi menggunakan format Data Google.) Library ini menggunakan library klien JavaScript Data Google di bawahnya untuk berkomunikasi dengan Google Kalender, dan dirancang untuk memaksimalkan fleksibilitas dalam penyesuaian.
CalVis dirancang agar developer tidak perlu membuat ulang pengalaman UI kalender yang kaya. Developer dapat menggunakannya sebagai penampung template yang dapat disesuaikan untuk menempatkan data Google Kalender. Developer dapat menggunakan CalVis untuk merender data kalender dan mencapai tingkat integrasi yang disesuaikan dengan situs mereka. Seperti yang akan Anda pelajari, antarmuka yang dibuat di atas CalVis sepenuhnya dapat disesuaikan melalui JavaScript, HTML, dan CSS. Developer dapat men-deploy antarmuka kalender yang disesuaikan dengan cepat dan mudah dengan serangkaian komponen kontrol kalender penting untuk merender data kalender.
Menggunakan CalVis
Langkah-langkah berikut membantu Anda untuk mulai menggunakan CalVis untuk pengembangan Anda.
Langkah 1 - Muat library Visualisasi Kalender
Pertama, Anda harus menyertakan loader dalam file HTML. Loader ini secara dinamis memuat class inti CalVis serta library dependennya (seperti library klien JavaScript Data Google).
<script src="//gcal.appspot.com/calvis/calvis.js" type="text/javascript"></script>
Langkah 2 - Gunakan stylesheet CSS untuk mendeskripsikan atribut gaya.
File CSS default akan menghasilkan tampilan dan nuansa default seperti contoh ini. Anda dapat mendownload file CSS ini dan menyesuaikannya agar memiliki tampilan dan nuansa yang sangat berbeda.
<link rel="stylesheet" type="text/css" href="//gcal.appspot.com/calvis/default.css" />
Langkah 3 - Susun struktur visual antarmuka kalender dengan HTML
CalVis memiliki beberapa komponen visual yang telah ditetapkan yang membentuk antarmuka kalender. Pengaturan struktural komponen antarmuka ini ditentukan oleh tata letak HTML.
Komponen UI CalVis adalah:
-
Kontrol Login (hanya untuk kalender pribadi)
Ini adalah komponen HTML yang menyediakan link login/logout.
-
Kontrol Status
Ini adalah komponen HTML yang memberikan error atau informasi status.
-
Kontrol Navigasi
Ini adalah komponen HTML yang merender navigasi kalender sehubungan dengan tampilan saat ini.
-
Kontrol Tampilan
Ini adalah komponen HTML yang merender pilihan tampilan kalender, hanya tampilan bulan atau minggu yang tersedia dalam rilis ini.
-
Isi Kalender
Ini adalah komponen HTML yang merender kalender sebenarnya. Dengan petak untuk menetapkan masing-masing sel tanggal.
-
Tampilan Peristiwa
Ini adalah komponen HTML yang merender detail peristiwa setelah pemicu peristiwa. Hanya pemicu peristiwa "klik" dan "arahkan mouse" yang didukung dalam rilis ini.
Contoh cara mengatur komponen ini secara visual menggunakan struktur tabel HTML dasar -
<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>
|
|
Langkah 4 - Lakukan inisialisasi dan konfigurasi CalVis dengan JavaScript
Anda dapat menyesuaikan perilaku atau tampilan dengan menggunakan JavaScript. Perlu diingat bahwa sebelum Anda dapat memodifikasi objek dalam JavaScript, objek harus dimuat terlebih dahulu oleh browser. Jadi, Anda harus menunggu hingga semua library dependen dimuat dengan loader CalVis, hal ini dilakukan dengan metode calvis.ready(). Metode ini menggunakan metode callback yang akan dipanggil saat semua library dimuat dan CalVis siap digunakan.
window.onload = function() {
calvis.ready(callback);
}
Di dalam fungsi callback, Anda akan membuat instance objek calvis.Calendar. Sekarang Anda harus menetapkan berbagai ID CSS (ditentukan dari tata letak HTML pada Langkah 3) untuk memetakan komponen UI kalender yang sesuai.
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');
Sekarang Anda dapat menentukan akun Google Kalender mana yang digunakan CalVis untuk mengambil data. Untuk menentukan kalender publik -
// set the calenar to pull data from this Google Calendar account calendar.setPublicCalendar(calId);
Untuk menentukan kalender pribadi, Anda juga harus menentukan komponen HTML yang sesuai dengan tombol login -
// set the calenar to pull data from this Google Calendar account
calendar.setPrivateCalendar(calId);
calendar.setLoginControl('loginControlDiv');
Untuk menampilkan detail acara, Anda perlu menyediakan metode callback sehingga saat daftar acara di kalender dipicu (baik dengan acara 'klik' atau 'arahkan mouse'), callback akan dipanggil untuk menampilkan detail acara. Contoh callback tampilan peristiwa-
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('');
}
Terakhir, Anda dapat menetapkan tampilan default kalender (tampilan 'bulan' atau 'minggu') dan memanggil metode render() untuk menampilkan UI kalender -
// set the default view to be "month"
calendar.setDefaultView('month');
// display the calendar
calendar.render();
Sesuaikan gaya visual
Untuk menyesuaikan ukuran, warna, atau gaya sel tanggal individual, Anda hanya perlu mengubah atribut gaya CSS dari beberapa class CSS yang telah ditetapkan. Misalnya, Anda dapat memodifikasi lebar dan tinggi setiap sel tanggal dalam tampilan bulan dengan mengganti classViewCell dan contentCell class CSS default.
Demo
Demo ini menunjukkan penggunaan CalVis dengan gaya default.
Demo ini menunjukkan penggunaan CalVis dengan penyesuaian untuk membuat mash-up dengan Google Maps dan YouTube API.
Kontribusi
CalVis adalah project open source, yang kode sumbernya tersedia untuk didownload melalui Subversion di Google Code Project Hosting.
Resource