Setting up the Epoch JavaScript Calendar 2.0 on your Machine

Epoch 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 into your page:

1. Get the Files

Getting Epoch is easy! You can download the Epoch installation package at the Epoch Download Page. If you plan to use Epoch commercially, you will need to purchase a license within 30 days of downloading the Epoch installation package.

2. Include the Files in Your Page

Once you've downloaded the Epoch 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's JavaScript/CSS files.

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

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

3. Set up Epoch 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 just like any other object (i.e. var myArray = new Array();). For more detailed information on what values you can pass to Epoch on initialization, see the Epoch Class Reference – or see the code below for examples.

In your page's <HEAD>

<html>
<head>
<title>My Epoch Test Page</title>
<!--The Epoch Styles-->
<link rel="stylesheet" type="text/css" href="[path_to_css]/epoch_styles.css"/>
<!--The Epoch JavaScript Code-->
<script type="text/javascript" src="[path_to_javascript]/epoch_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');
 /*Initialize the calendars*/
 popupcalendar = new Epoch('popupcal','popup',popupElement,false);
 flatcalendar = new Epoch('flatcal','flat',flatElement,true);
};
</script>
</head>

In Your Page's <BODY>

<body>
<p style="font-size:1.5em;font-weight:bold;">Epoch Test:</p>
...
...
...
<!--table is here for layout purposes - you only need the code highlighted in blue 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>

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: