Июнь 2008 г.
Примечание: это проект с открытым исходным кодом, созданный сотрудником Google, а не официально поддерживаемая библиотека. Приглашаем всех желающих присоединиться и внести свой вклад :)
Введение
Вы когда-нибудь хотели создать на своём сайте персонализированный календарь, используя данные Google Календаря, но не знали, как их визуально представить? Похоже, многие разработчики сталкиваются с этой дилеммой. Хотя API данных Google Календаря — это мощный API веб-сервиса, позволяющий использовать все богатства данных Google Календаря, он по-прежнему остаётся API для чтения и записи данных без возможности визуализации.
В этой статье я продемонстрирую пример библиотеки, написанной мной для решения этой проблемы. Я начал проект с открытым исходным кодом «Визуализация календаря» ( CalVis ), цель которого — предоставить простой и настраиваемый пользовательский интерфейс (UI) для представления данных из учётной записи Google Календаря. CalVis извлекает данные непосредственно из вашей учётной записи Google Календаря через API данных Google Календаря . ( Примечание редактора: начиная с версии 3, Google Календарь больше не использует формат Google Data.) Он использует клиентскую JavaScript-библиотеку Google Data для взаимодействия с Google Календарем и разработан для максимальной гибкости в настройке.
CalVis разработан, чтобы избавить разработчиков от необходимости заново создавать пользовательский интерфейс календаря. Разработчики могут использовать его в качестве настраиваемого шаблона-контейнера для наложения данных Google Календаря. Разработчики могут использовать CalVis для отображения данных календаря и достижения глубокой интеграции со своими сайтами. Как вы узнаете, интерфейс, созданный на основе CalVis, полностью настраивается с помощью JavaScript, HTML и CSS. Разработчики смогут быстро и легко развернуть настраиваемый интерфейс календаря с набором необходимых компонентов управления для отображения данных календаря.
Использование CalVis
Следующие шаги помогут вам начать использовать CalVis для разработки.
Шаг 1 — Загрузите библиотеку визуализации календаря
Для начала вам необходимо включить загрузчик в HTML-файл. Он динамически загружает основные классы CalVis, а также зависимые от него библиотеки (например, клиентскую библиотеку Google Data JavaScript).
<script src="//gcal.appspot.com/calvis/calvis.js" type="text/javascript"></script>
Шаг 2 — Используйте таблицу стилей CSS для описания атрибутов стиля.
CSS-файл по умолчанию создаст стандартный внешний вид, как в этом примере . Вы можете скачать этот CSS-файл и настроить его, чтобы получить совершенно другой внешний вид.
<link rel="stylesheet" type="text/css" href="//gcal.appspot.com/calvis/default.css" />
Шаг 3. Создайте визуальную структуру интерфейса календаря с помощью HTML.
CalVis содержит несколько предустановленных визуальных компонентов, составляющих интерфейс календаря. Структурное расположение этих компонентов интерфейса определяется HTML-макетом.
Компоненты пользовательского интерфейса CalVis:
- Контроль входа (только для личных календарей)
Это HTML-компонент, предоставляющий ссылку для входа/выхода из системы. - Контроль статуса
Это HTML-компонент, который предоставляет информацию о состоянии или ошибках. - Управление навигацией
Это HTML-компонент, который отображает навигацию по календарю с учетом текущего представления. - Управление просмотром
Это HTML-компонент, который отображает выбор представления календаря. В этой версии доступны только представления по месяцам и неделям. - Тело календаря
Это HTML-компонент, который отображает сам календарь. С сетками для обозначения отдельных ячеек с датами. - Отображение событий
Это HTML-компонент, который отображает информацию о событии при срабатывании триггера. В этой версии поддерживаются только триггеры событий «щелчок» и «наведение мыши».
Пример того, как визуально расположить эти компоненты, используя базовую структуру HTML-таблицы -
<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 — Инициализация и настройка CalVis с помощью JavaScript
Вы можете настроить любое поведение или внешний вид с помощью JavaScript. Имейте в виду, что перед изменением объекта в JavaScript он должен быть загружен браузером, поэтому сначала необходимо дождаться загрузки всех зависимых библиотек с помощью загрузчика CalVis. Это делается с помощью метода calvis.ready(). Этот метод принимает метод обратного вызова, который будет вызван после загрузки всех библиотек и готовности CalVis к использованию.
window.onload = function() {
calvis.ready(callback);
}
Внутри функции обратного вызова вы создадите экземпляр объекта calvis.Calendar. Теперь вам нужно назначить различные CSS-идентификаторы (они определены в HTML-макете на шаге 3) для сопоставления с соответствующими компонентами пользовательского интерфейса календаря.
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');
Теперь вы можете указать, из какого аккаунта Google Календаря CalVis будет извлекать данные. Чтобы указать общедоступный календарь,
// set the calenar to pull data from this Google Calendar account calendar.setPublicCalendar(calId);
Чтобы указать личный календарь, вам также необходимо указать HTML-компонент, соответствующий кнопке входа -
// set the calenar to pull data from this Google Calendar account
calendar.setPrivateCalendar(calId);
calendar.setLoginControl('loginControlDiv');
Для отображения сведений о событии необходимо предоставить метод обратного вызова. При появлении события в календаре (по щелчку или наведению мыши) будет вызван обратный вызов для отображения сведений о событии. Пример обратного вызова для отображения события:
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();
Настроить стиль
Чтобы настроить размер, цвет или стиль отдельной ячейки с датой, достаточно изменить атрибуты стилей CSS нескольких предопределённых CSS-классов. Например, вы можете изменить ширину и высоту каждой ячейки с датой в представлении месяца, переопределив CSS-классы по умолчанию monthViewCell и contentCell.
Демо
В этой демонстрации показано использование CalVis со стилем по умолчанию.
В этой демонстрации показано использование CalVis с возможностью настройки для создания мэшапа с API Google Maps и YouTube.
Способствовать
CalVis — проект с открытым исходным кодом , исходный код которого доступен для загрузки через Subversion на хостинге проектов Google Code.