Skip to content

4. Another JavaScript Calendar

Here is another JavaScipt Calendar by Mihai Bazon. Let's see how we can integrate it with Orthodox Calendar. First download it and unzip into examples/jscalendar-1.0 directory. We need put links to calendar itself, style sheets, setup script and language script:

<link rel="stylesheet" type="text/css" media="all" href="jscalendar-1.0/calendar-win2k-cold-1.css" title="win2k-cold-1" />
<script type="text/javascript" src="jscalendar-1.0/calendar.js"></script>
<script type="text/javascript" src="jscalendar-1.0/lang/calendar-en.js"></script>
<script type="text/javascript" src="jscalendar-1.0/calendar-setup.js"></script>

Then in the HTML code goes already known pop up script for Orthodox Calendar.

The place of JavaScipt calendar will be:

<div style="float: right; margin-left: 1em; margin-bottom: 1em;" id="calendar-container"></div>

The place of Orthodox Calendar will be:

<div id="T1"></div>

Then slightly modify setup script from static example of the JavaScipt Calendar and we will get Example 4.1. If you click on the date you will get Orthodox Calendar for that day.

In Example 4.2 we created table with 2 cells and placed Orthodox Calendar into left cell and JavaScipt Calendar into right cell.

In Example 4.3 we placed an additional code to see today's date Orthodox Calendar when page is loaded. Then

if (calendar.dateClicked)

statement was removed to show Orthodox Calendar when you change Month and Year.

Finally in Example 4.4 table was hidden.