For Webmasters
   Example 1.1
1. More Examples
   Example 1.2
   Example 1.3
   Example 1.4
2. Buttons
   Example 2.1
   Example 2.2
   Example 2.3
   Example 2.4
   Example 2.5
   Example 2.6
   Example 2.7
3. JavaScript Calendar
   Example 3.1
   Example 3.2
   Example 3.3
   Example 3.4
   Example 3.5
   Example 3.6
4. Another JS Calendar
   Example 4.1
   Example 4.2
   Example 4.3
   Example 4.4
5. Integration with PHP
   Example 5.1
Appendix A
Appendix B

   Show example



For Webmasters

Set up Orthodox Calendar on your website by examples

We have developed an interface for our Orthodox Calendar based on AJAX technology. You can read more about AJAX at the W3Schools website. We will show you how to set up Orthodox Calendar on your website step by step, starting from simple JavaScript examples and going into a more complex integration of the JavaScript calendar. You can read more about JavaScript at the W3Schools website.

The general idea is that JavaScript loadCalendar2.js, which uses XMLHttpRequest object calls simple proxy PHP script ppp.php. Proxy PHP script reads parameters from loadCalendar2.js and calls our calendar.php script. Then loadCalendar2.js returns Orthodox Calendar's HTML code into ElementById T1. We need proxy PHP script because XMLHttpRequest does not work across domains.

Download and unizip Example's directory zip file. To set up Orthodox Calendar first you need to copy loadCalendar2.jsppp.php and one of Style Sheets (calendar_style_cherry.css calendar_style_blue.css or calendar_style_gray.css) into your web server. Check our Example directory.

Let's see how it works in Example 1.1 You can check HTML code for each example by viewing page source in the browser.

Example 1.1 shows today's Lives of Saints, Scripture Reading and Troparion. Put a reference to JavaScript  loadCalendar2.js somewhere in the header section of HTML:

<script type="text/javascript" src="loadCalendar2.js"></script>

Then put a reference to Style Sheets:

<link rel="stylesheet" type="text/css" href="calendar_style_cherry.css" />

<div id="T1"></div> - this is were our JavaScript returns HTML code.

Finally, here is small JavaScript to call the calendar script from our website:

<script type="text/Javascript">
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=1;
var ss=1;


// Get today's date
// Get today's month
// Get today's day
// Get today's year
// Output date
// Output header
// Output Lives of Saints
// Output Troparion
// Output Daily Scripture Reading

That's it!

In Appendix A you can find a full description of parameters of loadCalendar2 function. Appendix B has description of Style Sheets. You can find and try different Orthodox Calendar views in this example.


Next Chapter: 1. More Examples

With questions, comments, and technical support please write to us:

O Most Holy Trinity, Our God, Glory to Thee!