Epoch Prime LIVE Demonstration

Below are several demonstrations that show the incredible power and speed of the Epoch Prime DHTML JavaScript Calendar.

Increase Your Page's Overall Speed and Save Memory

Epoch Prime is designed for high speed and a low memory footprint on your users' computers. To reduce memory usage even further, Epoch Prime comes with the ability to assign a single calendar to multiple inputs using the setTarget() method. The look is seamless as you move from box to box – each box appears to have its own calendar. Switch back to an input box you already selected and Epoch Prime will remember the original date.

Click the boxes below to see Epoch Prime in action:

Start Date End Date

For more info on integrating Epoch Prime into your page, see our Epoch Prime Popup HowTo.

Better DHTML & AJAX Performance

setTarget() is especially useful when creating text boxes via DHTML or AJAX—there is no need to declare a new instance of Epoch Prime.

AJAX and Epoch Prime

Easily Import Events, Holidays, and custom HTML/titles

Epoch Prime utilizes XML to make calendar initialization and setup a cinch. Custom events, holidays, date titles – you can even add HTML to individual calendar cells!

The calendar below has been pre-filled with dates and a holiday. Click Run the demo to see the XML import in action:

Sample XML

<?xml version="1.0" encoding="UTF-8"?>
<importdata>
 <configs>
  <statecfg>
   <displayyearinitial>2024</displayyearinitial> 
   <displaymonthinitial>7</displaymonthinitial> 
   <displayyear>2024</displayyear> 
   <displaymonth>7</displaymonth> 
   <mindate>2024-06-21</mindate> 
   <maxdate>2024-08-16</maxdate> 
  </statecfg>
 </configs>
 <datesadd> 
  <date type="normal" title="Unavailable date 1" value="2024-07-24" selected="disabled"></date>
  <date type="normal" title="Unavailable date 2" value="2024-07-25" selected="disabled"></date>
  <date type="normal" title="Unavailable date 3" value="2024-07-26" selected="disabled"></date>
  <date type="normal" title="Unavailable date 4" value="2024-07-27" selected="disabled"></date>
  <date type="holiday" value="2024-07-04" selected="no" title="Independence Day"></date>
  <date type="normal" value="2024-07-09"></date>
  <date type="normal" value="2024-07-10"></date>
  <date type="normal" value="2024-07-11"></date>
  <date type="normal" value="2024-07-12"></date>
 </datesadd>
 <datesrem> 
  <date value="2024-07-13"></date>
  <date value="2024-07-14"></date>
  <date value="2024-07-15"></date>
 </datesrem>
</importdata>

Currently there are a few dates preselected in the calendar.
Now some of the dates will be removed and several more will be added. Watch the calendar on the left.
The calendar now displays the dates in the XML in the text box to the right.
Try changing the XML text above to experiment with different configurations!

Calendar

For more info on using XML with Epoch Prime, see our Using XML HowTo.

Sending multiple dates via regular form submission

Sure it's nice for your users to be able to select dates in Epoch Prime, but wouldn't it be nice to see what they picked? Epoch Prime makes it easy to get the calendar's selected dates via standard HTML forms.

Full CSS styling

Epoch Prime is styled entirely using CSS, giving you fantastic flexibility when integrating it into your page. Any visual aspect of the calendar may be changed, from cell colors and sizes to the calendar heading and more! You can modify the styles by editing Epoch Prime's CSS file, or do it on the fly with JavaScript and DHTML.

Easy to read documentation

Epoch Prime is built for easy customization. Highly-optimized code and object-oriented design make it easier to add your own modifications; extensive comments and detailed documentation make you a JavaScript guru.