Setting up the Epoch Prime AJAX JavaScript Calendar on your Machine

Epoch Prime is designed for easy setup on any type of computer or web server. Follow these 3 simple steps to integrate the power and flexiblity of Epoch Prime into your page:

1. Get the Files

Getting Epoch Prime is easy! You can download a 30 day free trial of the Epoch Prime installation package at the Epoch Prime Free Trial Download Page. You will need to purchase a license within 30 days of downloading the Epoch Prime installation package.

2. Include the Files in Your Page

Once you've downloaded the Epoch Prime installation package, you need to include them in your web pages. This is easy — just add a <script> and <link> tag that links to Epoch Prime's JavaScript and CSS files.

<head>
<title>My Epoch Prime Test Page</title>
<!--The Epoch Prime Styles-->
<link rel="stylesheet" type="text/css" href="[path_to_css]/epochprime_styles.css"/>
<!--The Epoch Prime JavaScript Code-->
<script type="text/javascript" src="[path_to_javascript]/epochprime_classes.js"></script>
</head>

Don't forget to double-check the file paths in the href/src attributes!

3. Create the configuration XML

If you want to dynamically customize the features of Epoch Prime and add dates, without editing epochprime_classes.js, you can create an XML string with the configuration/date values you want. Configuration values specified in the XML will override the default settings in epochprime_classes.js—configuration values not specified will default to those set in calConfig() and setLang(). See the Using XML HowTo Guide for more details.

You may leave the configuration XML blank if you like – if you do, Epoch Prime will default to a flat, multi-select calendar.

Sample XML

Here is an example of an XML configuration string—it is the same XML string used to configure the popup calendar at the bottom of the page. Any of the configuration variables may be left out; if so they will revert to the defaults in the calConfig() function. For a full list of configuration variables see the Epoch Prime XML Specs.

<?xml version="1.0" encoding="UTF-8"?>
<importdata>
 <configs>
  <statecfg>
   <displayyearinitial>2006</displayyearinitial> <!--the year to default to when clicking "clear"-->
   <displaymonthinitial>9</displaymonthinitial> <!--the month to default to when clicking "clear"-->
   <displayyear>2006</displayyear> <!--the initial year to display-->
   <displaymonth>9</displaymonth> <!--the initial month to display-->
   <mindate>2006-06-21</mindate> <!--the earliest date a user can click-->
   <maxdate>2006-10-16</maxdate> <!--the latest date a user can click-->
   <dateformat>Y-m-d</dateformat> <!--the default date format to use-->
  </statecfg>
  <initcfg>
   <name>popupcal</name> <!--The name to prepend all id's of elements in the calendar -->
   <mode>popup</mode> <!--The mode of the calendar - can be "popup" or "flat"-->
   <multiselect>0</multiselect> <!--Enable/disable multiple date selection (can be 1 or 0)-->
   <startday>0</startday> <!--The day the week "starts" on - can be 0 (Sunday) to 6 (Saturday)-->
   <showweeks>1</showweeks> <!--Whether to show the week headings (can be 1 or 0)-->
   <selcurmonthonly>1</selcurmonthonly> <!--Whether dates outside the month will be selected (1 or 0)-->
  </initcfg>
 </configs>
 <datesadd> <!--Dates to add to the calendar-->
  <date value="2006-09-04" selected="no" type="holiday" title="Labor Day"></date>
  <date value="2006-09-22" selected="yes" title="Already Selected!"></date>
  <date value="2006-09-18" selected="disabled" title="Try to select me"></date>
 </datesadd>
</importdata>

4. Set up Epoch Prime on Your Page

In this example, we set up a page containing 2 calendars – one is a standard popup/datepicker and the other is a flat/inline calendar. You can initialize Epoch Prime just like any other object (i.e. var myArray = new Array();). Epoch Prime needs 2 arguments to initialize – a containing element (targetelement) and XML configuration data (xmlconfig). If xmlConfig is not specified, Epoch Prime will initialize with a default configuration. See the Using XML HowTo Guide for more details.

For more detailed information on what values you can pass to Epoch on initialization, see the EpochPrime Class Reference – or see the code below for examples.

In your page's <HEAD>

<html>
<head>
<title>My Epoch Prime Test Page</title>
<!--The Epoch Prime Styles-->
<link rel="stylesheet" type="text/css" href="[path_to_css]/epochprime_styles.css"/>
<!--The Epoch PrimeJavaScript Code-->
<script type="text/javascript" src="[path_to_javascript]/epochprime_classes.js"></script>
<!--JavaScript to initialize our 2 calendars-->
<script type="text/javascript">
 var popupcalendar, flatcalendar;
 window.onload = function() {
 /*get a handle on the containing elements for the 2 calendars*/
 var popupElement = document.getElementById('popup_box');
 var flatElement = document.getElementById('flat_container');
 /*Declare the XML.  IMPORTANT - your XML must not have any line breaks in it!
 The XMl below has line breaks to improve readability only.*/
 var popupxml = '<?xml version="1.0" encoding="UTF-8"?>
<importdata>
 <configs>
  <othercfg>
   <displayyearinitial>2006</displayyearinitial>
   <displaymonthinitial>9</displaymonthinitial>
   <displayyear>2006</displayyear>
   <displaymonth>9</displaymonth>
   <mindate>2006-06-21</mindate>
   <maxdate>2006-10-16</maxdate>
  </othercfg>
  <initcfg>
   <name>popupcal</name>
   <mode>popup</mode>
   <multiselect>0</multiselect>
   <startday>0</startday>
   <showweeks>1</showweeks>
   <selcurmonthonly>1</selcurmonthonly>
  </initcfg>
 </configs>
 <datesadd>
  <date value="2006-09-04" type="holiday" selected="no" title="Labor Day"></date>
  <date value="2006-09-22" selected="yes" title="Already Selected!"></date>
  <date value="2006-09-18" selected="disabled" title="Try to select me"></date>
 </datesadd>
</importdata>';
 var flatxml = '';
 /*Initialize the calendars*/
 popupcalendar = new EpochPrime(popupElement,popupxml);
 flatcalendar = new EpochPrime(flatElement,flatxml);
};
</script>
</head>

In Your Page's <BODY>

<body>
<p style="font-size:1.5em;font-weight:bold;">Epoch Prime Test:</p>
...
...
...
<!--table is here for layout purposes - 
you only need the code highlighted below for the calendars to work-->
<table style="width: 100%;height:250px;">
 <tr>
  <td style="vertical-align: top;border:0;">
   <p>Flat calendar will appear here:</p>
    <!--The flat calendar container - where the 
        flat calendar will appear on your page-->
   <div id="flat_container"></div>
  </td>
  <td style="vertical-align: top;border:0;">
   <p>Popup Calendar will appear in the box below when the user clicks on it or tabs into it:</p>
   <form action="setup.html">
    <!--The popup calendar container - where your popup calendar 
        will appear when the users clicks on the input box-->
    <label for="popup_box">Enter a Date: </label><input type="text" name="date1" id="popup_box"/><br/>
    <input type="submit" value="Submit Date" title="Submit the date via this form!"/>
   </form>
  </td>
 </tr>
</table><br/>
...
...
...
</body>
</html>

You can copy & paste the above code into a blank HTML document to try it out for yourself.

Working Example:

Here is a working example made using the code from Step 3

Epoch Test:

Flat calendar will appear here:

Popup Calendar will appear in the box below when the user clicks on it or tabs into it: