Tháng 6 năm 2008
Lưu ý – Đây là một dự án nguồn mở do nhân viên của Google bắt đầu và không phải là thư viện được hỗ trợ chính thức. Chúng tôi mời tất cả những ai muốn tham gia và đóng góp :)
Giới thiệu
Bạn đã bao giờ muốn tạo trải nghiệm lịch tùy chỉnh trên trang web của mình bằng cách sử dụng dữ liệu Lịch Google nhưng chưa biết cách trình bày dữ liệu lịch theo cách trực quan chưa? Có vẻ như có rất nhiều nhà phát triển chia sẻ vấn đề khó khăn này. Mặc dù API dữ liệu của Lịch Google là một API dịch vụ web mạnh mẽ vì API này cho phép bạn khai thác tính phong phú của tất cả dữ liệu Lịch Google, nhưng API này vẫn là API dữ liệu đọc/ghi thuần túy mà không cần cung cấp tính năng trực quan hóa dữ liệu.
Trong bài viết này, tôi sẽ minh hoạ 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 nguồn mở này, tính năng Hình ảnh hóa Lịch (CalVis) nhằm cung cấp giao diện người dùng (UI) dễ dàng và có thể tùy chỉnh để trình bày dữ liệu từ tài khoản Lịch Google. CalVis trực tiếp lấy dữ liệu từ tài khoản Lịch Google của bạn thông qua API Dữ liệu Lịch Google. (Lưu ý của người chỉnh sửa: Kể từ phiên bản 3, Lịch Google không còn sử dụng định dạng Dữ liệu Google nữa). Bộ công cụ này sử dụng Thư viện ứng dụng JavaScript của Google Data bên dưới để giao tiếp với Lịch Google và được thiết kế để tối đa hóa tính linh hoạt trong việc tùy 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 đa dạng. Các nhà phát triển có thể sử dụng mẫu làm vùng chứa mẫu có thể tuỳ chỉnh để phủ lên dữ liệu Lịch Google. Các nhà phát triển có thể sử dụng CalVis để hiển thị dữ liệu lịch và đạt được cấp độ tích hợp tùy chỉnh sâu rộng với trang web của họ. Như bạn sẽ tìm hiểu, một giao diện được xây dựng dựa trên CalVis là 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 giao diện lịch tuỳ chỉnh một cách nhanh chóng và dễ dàng bằng một bộ thành phần kiểm soát lịch thiết yếu để kết xuất 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 để phát triển ứng dụng.
Bước 1 – Tải thư viện Hình ảnh hóa lịch
Trước tiên, bạn cần đưa trình tải vào tệp HTML. Trình tải này tải động các lớp chính của CalVis cũng như các thư viện phụ thuộc của nó (chẳng hạn như thư viện ứng dụng Google Data JavaScript).
<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 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à tùy chỉnh tệp để có 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 hình ảnh của giao diện lịch bằng HTML
CalVis có một số thành phần hình ảnh đượ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 theo 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à:
-
Kiểm soát đăng nhập (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.
-
Kiểm soát trạng thái
Đây là thành phần HTML cung cấp thông tin trạng thái hoặc lỗi.
-
Điều khiển điều hướng
Đây là thành phần HTML hiển thị điều hướng lịch liên quan đến chế độ xem hiện tại.
-
Chế độ xem quyền kiểm soát
Đâ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. 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 trình kích hoạt sự kiện. Chỉ bản kích hoạt sự kiện "nhấp" và "di chuột" mới được hỗ trợ trong bản phát hành này.
Ví dụ về cách sắp xếp các thành phần này một cách trực quan bằng cách sử dụ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 tạo và định cấu hình CalVis bằng JavaScript
Bạn có thể tuỳ chỉnh bất kỳ hành vi hoặc giao diện nào bằng cách sử dụng JavaScript. Hãy nhớ rằng trước khi bạn có thể sửa đổi một đối tượng trong JavaScript, trước tiên, trình duyệt phải tải đối tượng này. Do đó, 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 sử dụng phương thức gọi lại sẽ được gọi khi tất cả thư viện được tải và CalVis đã sẵn sàng để sử dụng.
window.onload = function() {
calvis.ready(callback);
}
Bên trong hàm callback, bạn sẽ tạo bản sao của đối tượng của calvis.Calendar. Bây giờ, bạn phải chỉ định nhiều mã nhận dạng CSS (được xác định từ bố cục HTML ở Bước 3) để ánh xạ tớ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à ViVi 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 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 phương thức gọi lại để khi danh sách sự kiện trên lịch được kích hoạt (bằng sự kiện 'nhấp chuột' 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ề 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('');
}
Cuối cùng, bạn có thể đặt chế độ xem mặc định của lịch (chế độ xem theo 'tháng' hoặc 'tuần') và gọi phương thức render() để hiển thị giao diện người dùng lịch -
// set the default view to be "month"
calendar.setDefaultView('month');
// display the calendar
calendar.render();
Tuỳ chỉnh kiểu
Để tùy 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 vài lớp CSS định sẵn. 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ạ việc sử dụng CalVis với kiểu mặc định.
Bản minh họa này minh hoạ việc sử dụng CalVis với tính năng tuỳ chỉnh để kết hợp dữ liệu với Google Maps và API YouTube.
Đóng góp
CalVis là một dự án nguồn mở có mã nguồn để tải xuống qua Subversion trên tính năng Lưu trữ dự án mã của Google.
Tài nguyên