Итак, перед нами стоит задача подключиться к публичному календарю Google и вывести полностью события календаря на страничку нашего сайта.
Зачем это нужно? Хочется предоставить возможность ведения календаря многим людям, имеющим разную степень компьютерной грамотности и не разрабатывать административную часть связанную с редактированием, поиском, добавлением событий. Пусть этим занимаются профессионалы Google, мы же воспользуемся результатами их труда.
В качестве средства работы с календарем используем JavaScript и события календаря будем выводить на веб-страницу.
Для начала подготовим заготовку для нашей страницы:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="calendarTitle"></div>
<div id="events"></div>
<div id="content" style="width:100%;height:380px">Загрузка... </div>
</body>
</html>
Затем в заголовок страницы между тегами <head> и </head> добавляем код работы с календарем.
Первым делом подключаем библиотеку Google API:
<script type="text/javascript">
google.load("gdata", "2.x");
Первым параметром функции load идет название библиотеки, вторым — ее версия.
Затем описываем функцию инициализации библиотеки:
function init() {
// инициализируем Google библиотеку, устанавливая обработчик ошибок
google.gdata.client.init(handleGDError);
// выводим календарь
loadCalendar();
}
Далее, обработчик ошибок:
function handleGDError(e) {
document.getElementById('content').setAttribute('style', 'display:none');
if (e instanceof Error) {
// выводим модальное окно со строкой, файлом и текстом ошибки
alert('Ошибка в строке ' + e.lineNumber + ' в ' + e.fileName + '\n' + 'Сообщение: ' + e.message);
// если доступно, выводим HTTP код ошибки и строку статуса
if (e.cause) {
var status = e.cause.status;
var statusText = e.cause.statusText;
alert(Ошибка HTTP ' + status + ' с текстом: ' +
statusText);
}
} else {
alert(e.toString());
}
}
Далее пишем функцию запроса к календарю:
function loadCalendar() {
var calendarUrl = "http://www.google.com/calendar/feeds/u0upesqc5es2opgjslm9sao53840group.calendar.google.com/public/basic/"
//Указываем фид (адрес) реального календаря Google. Получить его можно в окне управления календарем.
var service = new google.gdata.calendar.CalendarService("gdata-js-client-samples-simple");
//Создаем сервис календаря (параметр функции - любая строка.
var query = new google.gdata.calendar.CalendarEventQuery(calendarUrl);
//Создаем запрос к календарю. Это и дальнейшее очень напоминает работу с базой данных
var startMin = google.gdata.DateTime.fromIso8601("2010-01-07T00:00:00.000-08:00");
var startMax = google.gdata.DateTime.fromIso8601("2010-12-31T00:00:00.000-08:00");
query.setMinimumStartTime(startMin);
query.setMaximumStartTime(startMax);
//Устанавливаем диапазон дат событий, которые хотим получить
query.setOrderBy("starttime");
query.setSortOrder("ascending");
//Устанавливаем поле и порядок для сортировки данных
query.setSingleEvents(false);
//Устанавливаем способ выдачи событий календаря: true - отдельными событиями, false - списком
service.getEventsFeed(query, listEvents, handleGDError);
//Выполняем запрос и назначаем процедуру обработки данных в случае успеха, и знакомый нам обработчик ошибок
}
Далее идет собственно обработка событий календаря и вывод на страницу:
function listEvents(feedRoot) {
var entries = feedRoot.feed.getEntries();
var eventTable=document.getElementById('events');
document.getElementById('jsSourceFinal').setAttribute('style',
'display:none');
if (eventTable.childNodes.length > 0) {
eventTable.removeChild(eventTable.childNodes[0]);
}
document.getElementById('calendarTitle').innerHTML = "Календарь: " + feedRoot.feed.title.$t;
//Выводим название календаря
var tr = eventTable.insertRow(i);
tr.setAttribute('bgcolor','#ccffcc');
var len = entries.length;
var j = 0;
for (var i = 0; i < len; i++) {
var entry = entries[i];
var title = entry.getTitle().getText();
var place = entry.getContent().getText();
var startDateTime = place.substring(6,place.indexOf('')-1).trim();
place = place.substr(place.indexOf('Место:')+7);
var age = place.substr(place.indexOf('Описание мероприятия:')+21);
place = place.substr(0,place.indexOf('')-1).trim();
var endDateTime = startDateTime.substr(startDateTime.indexOf('-')+1);
endDateTime = endDateTime.substr(endDateTime.indexOf(',')+1).trim();
endDateTime = endDateTime.substr(0,endDateTime.indexOf(' '));
if (startDateTime.indexOf('-')>0){
startDateTime = startDateTime.substr(0,startDateTime.indexOf('-')-1);
}
startDateTime = startDateTime.substr(startDateTime.indexOf(',')+1).trim();
var startMonth = startDateTime.substr(startDateTime.indexOf(' ')+1,3).trim();
startDateTime = startDateTime.substr(0,startDateTime.indexOf(' '));
tr = eventTable.insertRow(j++);
tr.setAttribute('bgcolor','ffffff');
td = tr.insertCell(0);
td.appendChild(document.createTextNode(startMonth));
td = tr.insertCell(1);
if(startDateTime==endDateTime){
td.appendChild(document.createTextNode(startDateTime));
}else{
td.appendChild(document.createTextNode(startDateTime + '-' + endDateTime));
}
td = tr.insertCell(2);
td.appendChild(document.createTextNode(title));
td = tr.insertCell(3);
td.appendChild(document.createTextNode(age));
td = tr.insertCell(4);
td.appendChild(document.createTextNode(place));
}
}
Здесь мы работаем с краткой версией событий — это уменьшает трафик, но требует некоторых усилий по парсингу результата. Можно получать полноформатные события и в следующих статьях мы рассмотрим работу с таким форматом данных.
И в конце последней строкой скрипта запускаем процедуру инициализации, которая запустит механизм обработки календаря после загрузки библиотеки Google:
google.setOnLoadCallback(init);
Вот и все. В дальнейшем планирую рассказать о работе с Google календарем на PHP и Java.
