Tháng 6 năm 2008
Lưu ý: Đây là một dự án nguồn mở do một nhân viên Google khởi xướng và không phải là một thư viện được hỗ trợ chính thức. Chúng tôi mời tất cả những ai quan tâm tham gia và đóng góp :)
Giới thiệu
Bạn có bao giờ muốn tạo một trải nghiệm lịch tuỳ chỉnh trên trang web của mình bằng dữ liệu Lịch Google nhưng không chắc chắn về cách trình bày dữ liệu lịch một cách trực quan chưa? Có vẻ như không ít nhà phát triển cũng gặp phải tình huống khó xử này. Mặc dù Google Calendar Data API là một API dịch vụ web mạnh mẽ vì cho phép bạn khai thác sự phong phú của tất cả dữ liệu trên Lịch Google, nhưng đây vẫn là một API dữ liệu chỉ đọc/ghi mà không có quy định nào về việc trực quan hoá dữ liệu.
Trong bài viết này, tôi sẽ minh hoạ một thư viện mẫu mà tôi đã viết để giảm bớt vấn đề này. Tôi đã bắt đầu dự án mã nguồn mở Calendar Visualization (CalVis) nhằm cung cấp một giao diện người dùng (UI) dễ sử dụng và có thể tuỳ chỉnh để trình bày dữ liệu từ tài khoản Lịch Google. CalVis lấy dữ liệu trực tiếp từ tài khoản Lịch Google của bạn thông qua Google Calendar Data API. (Lưu ý của người biên tập: Kể từ phiên bản 3, Lịch Google không còn sử dụng định dạng Dữ liệu của Google nữa.) Ứng dụng này sử dụng thư viện ứng dụng JavaScript Google Data bên dưới để giao tiếp với Lịch Google và được thiết kế để tối đa hoá tính linh hoạt trong việc tuỳ chỉnh.
CalVis được thiết kế để giúp nhà phát triển không phải tạo lại trải nghiệm giao diện người dùng lịch phong phú. Các nhà phát triển có thể sử dụng thành phần này làm vùng chứa mẫu có thể tuỳ chỉnh để phủ dữ liệu của Lịch Google. Nhà phát triển có thể sử dụng CalVis để hiển thị dữ liệu lịch và đạt được mức độ tích hợp tuỳ chỉnh sâu với các trang web của họ. Như bạn sẽ tìm hiểu, giao diện được xây dựng dựa trên CalVis hoàn toàn có thể tuỳ chỉnh thông qua JavaScript, HTML và CSS. Nhà phát triển có thể triển khai nhanh chóng và dễ dàng một giao diện lịch tuỳ chỉnh với một bộ thành phần điều khiển lịch thiết yếu để hiển thị dữ liệu lịch.
Sử dụng CalVis
Các bước sau đây sẽ giúp bạn bắt đầu sử dụng CalVis cho quá trình phát triển.
Bước 1 – Tải thư viện Calendar Visualization
Trước tiên, bạn cần thêm trình tải vào tệp HTML. Trình tải này sẽ tải động các lớp cốt lõi của CalVis cũng như các thư viện phụ thuộc của lớp này (chẳng hạn như thư viện ứng dụng JavaScript của Google Data).
<script src="//gcal.appspot.com/calvis/calvis.js" type="text/javascript"></script>
Bước 2 – Sử dụng biểu định kiểu CSS để mô tả các thuộc tính kiểu.
Tệp CSS mặc định sẽ tạo ra giao diện mặc định giống như ví dụ này. Bạn có thể tải tệp CSS này xuống và tuỳ chỉnh để có một giao diện hoàn toàn khác.
<link rel="stylesheet" type="text/css" href="//gcal.appspot.com/calvis/default.css" />
Bước 3 – Bố trí cấu trúc trực quan của giao diện lịch bằng HTML
CalVis có một số thành phần trực quan được xác định trước tạo nên giao diện lịch. Bố cục cấu trúc của các thành phần giao diện này được xác định bằng bố cục HTML của bạn.
Các thành phần giao diện người dùng của CalVis là:
-
Login Control (chỉ dành cho lịch riêng tư)
Đây là thành phần HTML cung cấp đường liên kết đăng nhập/đăng xuất.
-
Status Control
Đây là thành phần HTML cung cấp thông tin về trạng thái hoặc lỗi.
-
Navigation Control
Đây là thành phần HTML kết xuất chế độ điều hướng trên lịch theo chế độ xem hiện tại.
-
View Control
Đây là thành phần HTML hiển thị lựa chọn chế độ xem lịch, chỉ có chế độ xem theo tháng hoặc theo tuần trong bản phát hành này.
-
Nội dung lịch
Đây là thành phần HTML hiển thị lịch thực tế. Có lưới để chỉ định từng ô ngày.
-
Hiển thị sự kiện
Đây là thành phần HTML hiển thị thông tin chi tiết về sự kiện khi có một trình kích hoạt sự kiện. Trong bản phát hành này, hệ thống chỉ hỗ trợ trình kích hoạt sự kiện "nhấp chuột" và "di chuột".
Ví dụ về cách sắp xếp trực quan các thành phần này bằng cấu trúc bảng HTML cơ bản –
<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>
|
|
Bước 4 – Khởi chạy và định cấu hình CalVis bằng JavaScript
Bạn có thể tuỳ chỉnh mọi hành vi hoặc giao diện bằng cách sử dụng JavaScript. Xin lưu ý rằng trước khi có thể sửa đổi một đối tượng trong JavaScript, trước tiên, đối tượng đó phải được trình duyệt tải. Vì vậy, trước tiên, bạn cần đợi cho đến khi tất cả các thư viện phụ thuộc được tải bằng trình tải CalVis. Việc này được thực hiện bằng phương thức calvis.ready(). Phương thức này lấy một phương thức gọi lại sẽ được gọi khi tất cả các thư viện được tải và CalVis đã sẵn sàng để sử dụng.
window.onload = function() {
calvis.ready(callback);
}
Trong hàm gọi lại, bạn sẽ tạo một thực thể của đối tượng calvis.Calendar. Giờ đây, bạn phải chỉ định các mã CSS (được xác định từ bố cục HTML ở Bước 3) để liên kết với các thành phần giao diện người dùng lịch tương ứng.
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');
Giờ đây, bạn có thể chỉ định tài khoản Lịch Google mà CalVis sẽ lấy dữ liệu. Cách chỉ định một lịch công khai:
// set the calenar to pull data from this Google Calendar account calendar.setPublicCalendar(calId);
Để chỉ định một lịch riêng tư, bạn cũng cần chỉ định thành phần HTML tương ứng với nút đăng nhập –
// set the calenar to pull data from this Google Calendar account
calendar.setPrivateCalendar(calId);
calendar.setLoginControl('loginControlDiv');
Để hiển thị thông tin chi tiết về sự kiện, bạn cần cung cấp một phương thức gọi lại để khi một sự kiện trong danh sách trên lịch được kích hoạt (bằng sự kiện "nhấp" hoặc "di chuột"), lệnh gọi lại sẽ được gọi để hiển thị thông tin chi tiết về sự kiện. Ví dụ về một lệnh gọi lại hiển thị sự kiện –
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();
Tuỳ chỉnh kiểu
Để tuỳ chỉnh kích thước, màu sắc hoặc kiểu của một ô ngày riêng lẻ, bạn chỉ cần sửa đổi các thuộc tính định kiểu CSS của một số lớp CSS được xác định trước. Ví dụ: bạn có thể sửa đổi chiều rộng và chiều cao của từng ô ngày trong chế độ xem theo tháng bằng cách ghi đè lớp CSS mặc định monthViewCell và contentCell.
Bản minh hoạ
Bản minh hoạ này minh hoạ cách sử dụng CalVis với kiểu mặc định.
Bản minh hoạ này minh hoạ cách sử dụng CalVis với chế độ tuỳ chỉnh để tạo một ứng dụng kết hợp với Google Maps và YouTube API.
Đóng góp
CalVis là một dự án nguồn mở, mã nguồn của dự án này có thể tải xuống thông qua Subversion trên Google Code Project Hosting.
Tài nguyên