июнь 2008 г.
Примечание. Это проект с открытым исходным кодом, запущенный сотрудником Google, а не официально поддерживаемая библиотека. Приглашаем всех желающих присоединиться и внести свой вклад :)
Введение
Вы когда-нибудь хотели создать индивидуальный календарь на своем веб-сайте, используя данные Календаря Google, но не совсем знали, как представить данные календаря визуально? Кажется, есть большое количество разработчиков, которые разделяют эту дилемму. Хотя API данных Календаря Google является мощным API веб-сервиса, поскольку он позволяет вам использовать все богатство данных вашего Календаря Google, он остается чистым API данных для чтения/записи без возможности визуализации данных.
В этой статье я собираюсь продемонстрировать пример библиотеки, которую я написал для решения этой проблемы. Я начал проект с открытым исходным кодом Calendar Visualization ( CalVis ), целью которого является предоставление простого и настраиваемого пользовательского интерфейса (UI) для представления данных из учетной записи Google Calendar. CalVis получает данные непосредственно из вашей учетной записи Календаря Google через API данных Календаря Google . ( Примечание редактора. Начиная с версии 3, Календарь Google больше не использует формат данных Google.) Он использует расположенную ниже клиентскую библиотеку JavaScript данных Google для связи с Календарем 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('');
}
Наконец, вы можете установить представление календаря по умолчанию (представление «месяц» или «неделя») и вызвать метод render() для отображения пользовательского интерфейса календаря —// set the default view to be "month"
calendar.setDefaultView('month');
// display the calendar
calendar.render();
Настроить стиль
Чтобы настроить размер, цвет или стиль отдельной ячейки даты, вам просто нужно изменить атрибуты стиля CSS нескольких предопределенных классов CSS. Например, вы можете изменить ширину и высоту каждой ячейки даты в представлении месяца, переопределив классы CSS по умолчанию monthViewCell и contentCell.
Демо
Эта демонстрация демонстрирует использование CalVis со стилем по умолчанию.
Эта демонстрация демонстрирует использование CalVis с настройкой для создания мэшапа с Google Maps и YouTube API.
Способствовать
CalVis — это проект с открытым исходным кодом , исходный код которого доступен для загрузки через Subversion на хостинге проектов Google Code.