2. Кнопки

Теперь посмотрим, как работать с кнопками. Допустим, что при нажатии кнопок нам надо посмотреть жития святых в 1-го мая 2008 г. и 2-го апреля 2009 г. пример 2.1.

Начальная часть HTML кода такая же как и в предыдущих примерах: имеется ссылка на loadCalendar2r.js, стили и скрипт для всплывающих окон. Для майской кнопки код будет:

<button onclick="loadCalendar2r(5,1,2008,1,1,3,0,0)">Май 1, 2008</button>

Первые три параметра loadCalendar2r это месяц, день и год, т.е. 1 мая 2008. Чертветрый параметер позволяет выводить дату в формате "григорианский/юлианский". Пятый параметер выводит заголовок календаря. Шестой параметер опеределят вывод жизнеописаний святых в отдельных строчках. Седьмой параметер запрещает вывод тропарей и восьмой параметер запрещает вывод Евангельских чтений.

Код для апрельской кнопки:

<button onclick="loadCalendar2r(4,2,2009,1,1,3,0,0)">Апрель 2, 2009</button>

В примере 2.2 мы видим, как сделать кнопку для показа жизнеописаний святых и Евангельских чтений на текущий день. Код кнопки:

<button onclick="todayDate()">Сегодня</button>

При нажатии кнопки вызывается функция todayDate которая аналогична функции из примера 1.2 .

<script type="text/Javascript">
function todayDate() {

var today=new Date();        // Определить текущую дату
var mm=today.getMonth()+1;   // Определить текущий месяц
var dd=today.getDate();      // Определить текущий день
var yy=today.getFullYear();  // Определить текущий год
var dt=1;                    // Выводить дату в формате "григорианский/юлианский"
var hh=1;                    // Выводить заголовок
var ll=1;                    // Выводить жития святых
var tt=0;                    // Запретить тропари
var ss=1;                    // Выводить Евангельские чтения

loadCalendar2r(mm,dd,yy,dt,hh,ll,tt,ss);
}
</script>

Давайте сделаем кнопку "Завтра" пример 2.3. Чтобы ее сделать, нам надо прибавить один день к текущему дню. Для этого мы используем метод getTime(). Метод getTime() возвращает количество миллисекунд с полуночи 1-го января 1970 г. В одном дне у нас 24*60*60*1000 миллисекунд: 24 часа * 60 минут * 60 секунд * 1000 миллисекунд. Завтрашний день, таким образом, будет:

var today=new Date(); // Определить текущую дату
var tomorrow = new Date(today.getTime() + 24*60*60*1000); // Определить завтрашнюю дату

Теперь мы можем написать функцию для вызова Православного календаря на завтрашний день:

function tomorrowDate() {

var today=new Date();            // Определить текущую дату
var tomorrow = new Date(today.getTime() + 24*60*60*1000);   // Определить завтрашнюю дату
var mm=tomorrow.getMonth()+1;    // Определить завтрашний месяц
var dd=tomorrow.getDate();       // Определить завтрашний день
var yy=tomorrow.getFullYear();   // Определить завтрашний год
var dt=1;                        // Выводить дату
var hh=1;                        // Выводить заголовок
var ll=1;                        // Выводить жития святых
var tt=0;                        // Запретить тропари
var ss=1;                        // Выводить Евангельские чтения

loadCalendar2r(mm,dd,yy,dt,hh,ll,tt,ss);
}

На основе примера 2.3 мы можем написать код для кнопки "Следующий день" пример 2.4. Нам надо создать переменную, которая глобальна по отношению к функциям todayDate() и nextdayDate():

var currentDay = new Date();

Затем в конце каждой функции мы присвоим этой переменной значение вычисленного дня. Для todayDate() функции это будет:

currentDay = today;

а для nextdayDate():

currentDay = next;

Окончательный код для nextdayDate():

function nextdayDate() {

var next = new Date(currentDay.getTime() + 24*60*60*1000);   // Определить дату следующего дня
var mm=next.getMonth()+1;    // Определить месяц следующего дня
var dd=next.getDate();       // Определить день следующего дня
var yy=next.getFullYear();   // Определить год следующего дня
var dt=1;                    // Выводить дату
var hh=1;                    // Выводить заголовок
var ll=1;                    // Выводить жития святых
var tt=0;                    // Запретить тропари
var ss=1;                    // Выводить Евангельские чтения

loadCalendar2(mm,dd,yy,dt,hh,ll,tt,ss);

currentDay = next;
}

Функции todayDate() и nextdayDate() содержат одинаковый HTML код. Его можно оптимизировать, как показано в примере 2.5:

<script type="text/Javascript">
var currentDay = new Date(); // Set up current day for today

function callCalendar(x) {
var mm=x.getMonth()+1;   // Определить месяц
var dd=x.getDate();      // Определить день
var yy=x.getFullYear();  // Определить год
var dt=1;                // Выводить дату
var hh=1;                // Выводить заголовок
var ll=3;                // Выводить жития святых
var tt=0;                // Запретить тропари
var ss=1;                // Выводить Евангельские чтения

loadCalendar2r(mm,dd,yy,dt,hh,ll,tt,ss);
}

function todayDate() {
var today=new Date();    // Определить текущую дату
callCalendar(today);
currentDay = today;
}

function nextdayDate() {
var next = new Date(currentDay.getTime() + 24*60*60*1000);  // Определить дату следующего дня
callCalendar(next);
currentDay = next;
}

</script>

Теперь легко сделать кнопку "Предыдущий день". На основе nextdayDate() мы напишем другую функцию previousDate(). В ней необходимо заменить знак + на знак - и имя переменной next на previous:

function previousDate() {
var previous = new Date(currentDay.getTime() - 24*60*60*1000); // Get tomorrow date
callCalendar(previous);
currentDay = previous;
}

Добавим код "Предыдущий день" перед кнопкой "Сегодня":

<button onclick="previousDate()">Previous Day</button>

Результат вы можете посмотреть в примере 2.6 или примере 2.7.