Epoch Calendar Live Demo

loading…

Below are several fully-functional demos of Epoch, each demonstrating a powerful feature of the calendar. Looking for a way to integrate Epoch into your web page? Check out our examples page!

Standard Mode

In its most basic form the calendar acts as an attractive alternative to a text date field. It can be used in AJAX/DHTML applications as a date selector.

Code:

var calendar = new Epoch('cal','flat',document.getElementById('container'),false);

Result:

DatePicker

It's easy to set the calendar to act as a datepicker on your HTML forms. Simply set the mode configuration variable to 'popup', specify which text box you want to attach it to, and you're ready! You can even set where the calendar will pop up in relation to the attached text box.

Code:

var popupcalendar = new Epoch('cal','popup',document.getElementById('inputid'),false);

Result:

Click in the text field to pick a date, or click the button

Multi-Select

You can set the calendar to allow multiple dates to be selected simultaneously. You can easily select & de-select entire rows^* or columns by clicking the week and day headings! Date selections are stored in memory, so they will not be lost if the user changes months or years, until the user clicks the 'clear' button or the page is submitted or refreshed.

*showWeeks configuration variable should be set to 'true'

Code:

var multiselect_calendar = new Epoch('cal','flat',document.getElementById('container'),true);

Result:

This software is licensed under the CC-GNU LGPL.