2. Buttons

Let's see now how to work with buttons. For example, we need to show the Lives of Saints on May 1, 2008 and April 2, 2009 when we click on the button: Example 2.1.

The top half of HTML is the same as in previous examples - we have references to the loadCalendar.js scrip, Style Sheet and script to manage pop up window. Code for the May button will be:

<button onclick="loadCalendar2(5,1,2008,1,1,3,0,0)">May 1, 2008</button>

First 3 parameters of loadCalendar2 is Month, Day and Year which is May 1, 2008. 4th parameter allows output of today's day in format Gregorian/Julian. 5th parameter allows output of Calendar's header. Then 6th parameter says output only Lives of major Saints in separate paragraphs. 7th parameter disallows output of the Scripture Readings and 8th parameter disallows output of Troparion. Code for April button is:

<button onclick="loadCalendar2(4,2,2009,1,1,3,0,0)">April 2, 2009</button>

In Example 2.2 we can see how to create a button to show today's Lives of Saints and Scripture Readings. Code is:

<button onclick="todayDate()">Today</button>

When you click on the button it calls todayDate function which looks like JavaScipt in Example 1.2:

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

var today=new Date();        // Get today's date
var mm=today.getMonth()+1;   // Get today's month
var dd=today.getDate();      // Get today's day
var yy=today.getFullYear();  // Get today's year
var dt=1;                    // Output date
var hh=1;                    // Output header
var ll=1;                    // Output Lives of Saints
var tt=0;                    // Do not output Troparion
var ss=1;                    // Output Daily Scripture Reading

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

Let's do "tomorrow" button. See Example 2.3. In order to do this we need calculate tomorrow's day by adding one day to today. We are going to use the getTime() method to calculate next day. The getTime() method returns the number of milliseconds since midnight of January 1, 1970. In one day we have 24*60*60*1000 milliseconds: 24 hour * 60 minutes * 60 seconds * 1000 milliseconds. Tomorrow's day will be:

var today=new Date(); // Get today's date
var tomorrow = new Date(today.getTime() + 24*60*60*1000); // Get tomorrow date

Now we can write another function tomorrowDate() to calculate and call the calendar:

function tomorrowDate() {

var today=new Date();           // Get today's date
var tomorrow = new Date(today.getTime() + 24*60*60*1000);  // Get tomorrow's date
var mm=tomorrow.getMonth()+1;   // Get tomorrow 's month
var dd=tomorrow.getDate();      // Get tomorrow 's day
var yy=tomorrow.getFullYear();  // Get tomorrow 's year
var dt=1;                       // Output date
var hh=1;                       // Output header
var ll=1;                       // Output Lives of Saints
var tt=0;                       // Do not output Troparions
var ss=1;                       // Output Daily Scripture Reading

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

Based on Example 2.3 we can create the "next day" button. See Example 2.4. We need create variable global to both functions todayDate() and nextdayDate():

var currentDay = new Date();

Then at the and of each function we will assign the calculated day to this variable. In todayDate() function it will be:

currentDay = today;

and in nextdayDate() function it will be:

currentDay = next;

The nextdayDate() will be:

function nextdayDate() {

var next = new Date(currentDay.getTime() + 24*60*60*1000);  // Get next day date
var mm=next.getMonth()+1;   // Get next month
var dd=next.getDate();      // Get next day
var yy=next.getFullYear();  // Get next year
var dt=1;                   // Output date
var hh=1;                   // Output header
var ll=1;                   // Output Lives of Saints
var tt=0;                   // Do not output Troparions
var ss=1;                   // Output Daily Scripture Reading

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

currentDay = next;
}

Functions todayDate() and nextdayDate() have common HTML code to call Orthodox Calendar. Let's optimize code in Example 2.5:

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

function callCalendar(x) {
var mm=x.getMonth()+1;        // Get today's month
var dd=x.getDate();           // Get today's day
var yy=x.getFullYear();       // Get today's year
var dt=1;                     // Output date
var hh=1;                     // Output header
var ll=3;                     // Output Lives of Saints
var tt=0;                     // Do not output Troparions
var ss=1;                     // Output Daily Scripture Reading

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

function todayDate() {
var today=new Date();   // Get today's date
callCalendar(today);
currentDay = today;
}

function nextdayDate() {
var next = new Date(currentDay.getTime() + 24*60*60*1000); // Get next day date
callCalendar(next);
currentDay = next;
}

</script>

Now it is easy to create "previous day" button. We will write another function previousDate() based on nextdayDate(). Just change plus sign to minus and change variable name next to previous:

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

Let's add "previous day" button before today day button:

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

You can see results in Example 2.6 or Example 2.7.