Epoch Code Examples

Got a more complicated setup you're working on? Check out the MeanFreePath Epoch Forums.

Below is a step-by-step guide for implementing the Epoch Javascript Calendar in your own web pages. For a working demonstration of the code below, check out our live demo!

In the Page Head

The <head> section of the page is where we declare and initialize the Epoch calendar(s). In this example we declare 3 different calendars, each set to operate in a different mode – Standard, Datepicker, and Multi-Select. You can have as many or as few calendars as you like!

You will need

  1. A <script> tag with a src attribute pointing to the main Epoch calendar code. This should be placed above any other <script> tags that may refer to your calendar.
  2. A <link> tag with href pointing to the Epoch CSS styles.
  3. Another <script> tag that declares and initializes Epoch. This can be directly in the page (like the example below), or in a separate file.

The Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>My Example Page</title> <script type="text/javascript" src="/path_to_js/epoch_classes.js"></script> <link rel="stylesheet" type="text/css" href="/path_to_css/epoch_styles.css" /> <script type="text/javascript"> var bas_cal, dp_cal, ms_cal; // declare the calendars as global variables window.onload = function () { /*initialize any calendars on the page - in this case 3.*/ bas_cal = new Epoch('bas_cal','flat',document.getElementById('bas_cal')); dp_cal = new Epoch('dp_cal','popup',document.getElementById('date_field')); ms_cal = new Epoch('ms_cal','flat',document.getElementById('ms_cal'),true); }; </script> </head> <body> ... ... ... </body> </html>

The <!DOCTYPE> declaration is not required, but strongly recommended. Epoch will work in both the HTML and XHTML document types.

In the Page Body

Once you've set up the code in the <head> section of the page you're almost done! Now that you've declared and initialized Epoch, you need to find a home for it.

You Will Need

  1. An empty HTML element (i.e. a <div>, <input>, <td>, <p>, or other element) to hold each calendar.

You MUST give each containing element a unique id, i.e. <div id="calendar_holder">. Below are examples of 3 different ways to use Epoch.

The Code

<!--The container for the standard verion of Epoch--> <div id="bas_cal"></div> <!--Datepicker container. The <input> text element is required, the button element is optional--> <input type="text" id="date_field" /> <input type="button" value="..." onclick="dp_cal.toggle();" /> <!--Container for multiselect version of Epoch--> <div id="ms_cal"></div>

CC-GNU LGPLThis software is licensed under the CC-GNU LGPL.