3. Календарь JavaScript

Интегрирование систем экономит время. В этой главе мы покажем как интергировать Православный каледарь с календарем JavaScipt. На интернете можно найти бесплатные календари, написанные на JavaScipt. Возьмем, например, JACS, написааный Антоном Гаретом.

Загрузите его и установите на своем сервере. Nа нашем сервере русифицированная версия находится в папке examples и в zip file. Посмотрите пример 3.1. Обратите внимание, что JACS выводит дату в поле с идентификатором T2. Форма даты всегда DD-MMM-YYYY. Это - ключевой момент.

Теперь создадим таблицу с двумя ячейками. Правая ячейка будет для JACS, а левая для Православного календаря. Смотрите пример 3.2.

На следующем шаге подсоединим Православый каледарь к левой ячейке. Как обычно, в заголовке уставовим ссылку на loadCalendar2r.js и стили. Давайте выберем стиль calendar_style_blue.css, чтобы цвета каледарей подходил друг к другу. Затем заменим строчку "Православный календарь" на <div id="T1"></div> и вызовем JACS, чтобы он обращался к Православному календарю:

JACS.next('jacsStatic2', loadCalendar2r,5,11,2008,1,1,1,0,1);

Вам необходимо щелкнуть на любой день, чтобы увидеть Православный календарь за 13 марта 2008 г. пример 3.3. В следующем примере мы добавим JavaScipt код, чтобы при щелчке на день, показывался Православный каледарь на это же день.

Для этого мы напишем функцию ortCal(). Она будет извлекать дату из поля с идентификатором T2, преобразовывать ее форму приемлемую для loadCalendar2r и вызывать Православный календарь на этот день. Вот эта функция:

function ortCal() {
monthNames= ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'];

var x=document.getElementById('T2');

// value имеет формат dd-mmm-yyyy
var d=x.value.substr(0,2);  // Определить день
var y=x.value.substr(7,4);  // Определить год
var mm=x.value.substr(3,3);
var m=1;                    // По умолчанию это январь
for (i=0;i<=11;i++)
{
if (mm == monthNames[i])
{
m=i+1;                      // Получить месяц
break;
}
}

var dt=1;                  // Выводить дату
var h=1;                   // Выводить заголовок
var l=1;                   // Выводить Жития
var t=0;                   // Запретить тропари
var s=1;                   // Выводить Евангельские чтения

loadCalendar2r(m,d,y,dt,h,l,t,s);
return 0;
}

День и год JACS легко преобразовать, потому что формат совпадает с форматом Православного календаря. Для месяца это чуть сложнее, потому что требует преобразования трехсимвольного названия месяца в цифру. Это делается в цикле for. Потом идет подготовка остальных параметров для loadCalendar2r и сам вызов календаря.Смотрите пример 3.4. Теперь, когда вы щелкаете на день, в левой ячейке у вас появляется Православный календарь на то же день. Отлично! Но как сделать так, чтобы при загрузке страницы в первый раз показывался Православный календарь на текущий день? Для этого нам нужна еще одна функция. Вот она:

function setCurrentDate() {
// Get todays date and write it into element T2
monthNames= ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'];

var today=new Date();        // Определить сегодняшнюю дату
var m=today.getMonth();      // Определить месяц
var d=today.getDate();       // Определить день
var y=today.getFullYear();   // Определить год

var x=document.getElementById('T2');         // Если Day < 10 тогда к Day приписать ведущий 0
if (d < 10) {d = "0" + d};                   // Например: 01, 02, 03 и т.д.
x.value = d + "-" + monthNames[m] + "-" + y; // Создать дату в формате dd-mmm-yyyy

ortCal();

return 0;
}

Функция setCurrentDate опереляет текущую дату, преобразует ее в формат DD-MMM-YYYY, понятный для JACS и записывает ее в элемент T2. Затем она вызывает функцию ortCal, котора показывает Православный календать на этот же день. Функция setCurrentDate должна вызываться перед вызовом JACS, чтобы заполнить элемент T2 текущей датой. Смотрите пример 3.5. Это - полностью функционирующая версия Православного календаря. Нам осталось только спрятать поле с датой для JACS и саму таблицу. Для тавблицы параметер border должен быть 0:

border="0"

для поля type должен быть hidden:

type="hidden"

Окончательная версия показана в примере 3.6