Juni 2008
Catatan - Ini adalah project open source yang dimulai oleh Googler dan bukan library yang didukung secara resmi. Kami mengundang semua orang yang berminat untuk bergabung dan berkontribusi :)
Pengantar
Pernahkah Anda ingin membuat pengalaman kalender yang disesuaikan di situs Anda menggunakan data Google Kalender, tetapi tidak yakin cara menampilkan data kalender secara visual? Sepertinya ada banyak developer yang mengalami dilema ini. Meskipun Google Calendar Data API adalah API layanan web yang canggih karena memungkinkan Anda memanfaatkan kekayaan semua data Google Kalender Anda, API ini tetap merupakan API data baca/tulis murni tanpa ketentuan untuk visualisasi data.
Dalam artikel ini, saya akan mendemonstrasikan 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 Calendar Data API. (Catatan Editor: Mulai v3, Google Kalender tidak lagi menggunakan format Data Google.) Aplikasi ini menggunakan library klien JavaScript Data Google di bawahnya untuk berkomunikasi dengan Google Kalender, dan dirancang untuk memaksimalkan fleksibilitas dalam penyesuaian.
CalVis dirancang untuk menghindarkan developer dari keharusan 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 sangat disesuaikan dengan situs mereka. Seperti yang akan Anda pelajari, antarmuka yang dibangun di atas CalVis dapat disesuaikan sepenuhnya melalui JavaScript, HTML, dan CSS. Developer dapat men-deploy antarmuka kalender yang disesuaikan dengan cepat dan mudah menggunakan serangkaian komponen kontrol kalender penting untuk merender data kalender.
Menggunakan CalVis
Langkah-langkah berikut akan membantu Anda mulai menggunakan CalVis untuk pengembangan.
Langkah 1 - Muat library Visualisasi Kalender
Pertama, Anda harus menyertakan loader dalam file HTML. Loader ini memuat secara dinamis 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 untuk mendapatkan tampilan dan nuansa yang benar-benar berbeda.
<link rel="stylesheet" type="text/css" href="//gcal.appspot.com/calvis/default.css" />
Langkah 3 - Tata struktur visual antarmuka kalender dengan HTML
CalVis memiliki beberapa komponen visual yang telah ditentukan sebelumnya yang membentuk antarmuka kalender. Susunan struktural komponen antarmuka ini ditentukan oleh tata letak HTML Anda.
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 informasi atau error status.
-
Kontrol Navigasi
Ini adalah komponen HTML yang merender navigasi kalender sesuai 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 menentukan setiap sel tanggal.
-
Tampilan Acara
Ini adalah komponen HTML yang merender detail acara saat pemicu acara. Hanya pemicu peristiwa "klik" dan "mouseover" 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 apa pun menggunakan JavaScript. Perlu diingat bahwa sebelum Anda dapat mengubah objek di JavaScript, objek tersebut harus dimuat terlebih dahulu oleh browser, jadi Anda harus menunggu hingga semua library dependen dimuat dengan loader CalVis, yang 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 (yang ditentukan dari tata letak HTML di Langkah 3) untuk dipetakan ke 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 datanya harus diambil oleh CalVis. Untuk menentukan kalender publik -
// set the calenar to pull data from this Google Calendar account calendar.setPublicCalendar(calId);
Untuk menentukan kalender pribadi, Anda juga perlu 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 listingan acara di kalender dipicu (baik oleh peristiwa 'klik' atau 'mouseover'), callback akan dipanggil untuk menampilkan detail acara. Contoh callback tampilan acara-
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('');
}
// set the default view to be "month"
calendar.setDefaultView('month');
// display the calendar
calendar.render();
Menyesuaikan gaya visual
Untuk menyesuaikan ukuran, warna, atau gaya setiap sel tanggal, Anda hanya perlu mengubah atribut gaya CSS dari beberapa class CSS yang telah ditentukan sebelumnya. Misalnya, Anda dapat mengubah lebar dan tinggi setiap sel tanggal dalam tampilan bulan dengan mengganti class CSS default monthViewCell dan contentCell.
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