3. JavaScript Calendar

Integration with another systems saves a lot of time. In this Chapter we will see how integrate Orthodox Calendar with JavaScipt Calendar. On the Internet you can find a couple of free JavaScript Calendars. Let's take JACS by Anthony Garrett.

Download it and put into your calendar directory on the webserver. On our server here is Example 3.1. Note that JACS puts date into input field with id T2. Format of that date is always DD-MMM-YYYY. This is the key.

Now, let's create table with 2 cells. The right cell will be for the JACS and the left cell will for Orthodox Calendar. See Example 3.2.

Next step is to attach Orthodox Calendar to the left cell. First, as usual, in the header section of HTML put reference to loadCalendar.js and to Style Sheets. Let's choose calendar_style_blue.css to match colors of JACS. Then replace the string "Orthodox Calendar" with <div id="T1"></div> and call JACS in the way it calls LoadCalendar:

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

You need to click on any day in the JACS in order to see Orthodox Calendar of May 11, 2008 in the left cell. Check Example 3.3. In the next example we will add a JavaScript code to see Orthodox Calendar on the day you click on JACS.

To do this we will write JavaScript function ortCal(). This function extracts date from id T2, separates day, month and year, and then creates parameters for LoadCalendar2, and finally calls LoadCalendar2. Here is the code:

function ortCal() {
monthNames= ['Jan','Feb','Mar','Apr','May','Jun', 'Jul','Aug','Sep','Oct','Nov','Dec'];

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

// value has following format dd-mmm-yyyy
var d=x.value.substr(0,2);   // Get Day
var y=x.value.substr(7,4);   // Get Year
var mm=x.value.substr(3,3);
var m=1;                     // this is January by defaul
for (i=0;i<=11;i++)
{
if (mm == monthNames[i])
{
m=i+1;                      // Get Month
break;
}
}

var dt=1;                  // Output date
var h=1;                   // Output header
var l=1;                   // Output Lives of Saints
var t=0;                   // Do not output Troparion
var s=1;                   // Output Daily Scripture Reading

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

Day and year is very easy to convert, because they have the same format as LoadCalendar2. For the moth it is slightly difficult, because we need to convert 3 character month name into the digit. This is done in the for cycle. Then the code shows how to create parameters for LoadCalendar2 and how to call LoadCalendar2 itself. See Example 3.4. Now when you click on the day in the left cell it shows Orthodox Calendar for the same day. Excellent! But how to show today's Orthodox Calendar day when the webpage loads for the first time? We need another function for that. Here it is:

function setCurrentDate() {
// Get todays date and write it into element T2
monthNames= ['Jan','Feb','Mar','Apr','May','Jun', 'Jul','Aug','Sep','Oct','Nov','Dec'];

var today=new Date();       // Get Date
var m=today.getMonth();     // Get Month
var d=today.getDate();      // Get Day
var y=today.getFullYear();  // Get Year

var x=document.getElementById('T2');          // If Day < 10 then Day shoud represent with leading 0
if (d < 10) {d = "0" + d};                    // For exapmle: 01, 02, 03 etc.
x.value = d + "-" + monthNames[m] + "-" + y;  // Create date in format dd-mmm-yyyy

ortCal();

return 0;
}

setCurrentDate function takes today's date converts it to the JACS format DD-MMM-YYYY and writes this into element T2. Then it calls ortCal() which shows today's date Orthodox Calendar. setCurrentDate must be called before JACS in order to fill element T2 with today's date. See Example 3.5. This version is fully functional version of Orthodox Calendar. Let's hide the table and the input field for JACS and we will be done. For the table border parameter should be 0:

border="0"

and for the input field type should be hidden:

type="hidden"

The final Orthodox Calendar version is here (Example 3.6).