Date Entry & Calendar Component

(c) 2006 Edward H. Trager

Menu

Home Next: Date Entry API

Gladiator Components >> Date Entry & Calendar Components >> Date Entry API

Try it!

Here you can try out the Gladiator date entry and calendar components:

• Click on the "T" to enter today's date.
• Click on the calendar icon next to the "T" to display a calendar.
• Click on the "Anniversary" calendar icon to see how an isolated year, a year plus a month, or a complete date in yyyy-mm-dd format can be used to seed the calendar.

Introduction

The Gladiator date entry component has been designed to provide the utmost convenience when entering current or historical dates in web-based applications. The component features a button for entering today's date, as well as an integrated pop-up calendar.

A unique feature of the calendar is that event dates can be loaded on-the-fly from an XML-based RSS-style feed. Event dates can be holidays, school exam and break dates, or even ticketing "sold out" dates. Event dates are shown graphically on the calendar by specifying CSS classes unique to the event type that you want to display.

For instance, in the "Try It!" example above, U.S. and French holidays are distinguished by the national flag of the respective nation. This kind of set up might be useful to a company which does business in both Europe and America.

The convenience of AJAX-based on-demand loading of event data opens up numerous possibilities for creating friendlier, more intelligent components for web-based applications. Features of the date entry and calendar component are presented below as an example of the functional richness you can expect to find in all Gladiator components.

Features

• Easy to Implement. A date entry component can be inserted anywhere in your document by simply calling the class constructor with the third parameter specifying the node where the date entry component should go:

  var whereToInsert = document.getElementById("myForm");
  var dob = new gDateEntry("Date of birth","dob",whereToInsert);

  As shown above, the first parameter passed to the constructor is the label, and the second parameter is the ID which can be used to retrieve the value via document.getElementById().

  The node parameter is optional -- if omitted, the date entry component will be inserted into the main body of an XHTML document.

• Fast. Javascript manipulation of the CSS display and positioning properties makes the calendar "pop up" seamlessly within your XHTML document. When supported by the browser, the opacity property is used to make the calendar fade in or out. The result is both faster and more appealing than a traditional popup window approach and it works without altering popup blocker settings.


Gladiator calendar for February, 1847, with Thomas Alva Edison's birthday highlighted.

• Accurate representation of the Gregorian Calendar (1, 2) from the year 1582 onward. The calendar has been specifically designed to handle both recent and historical dates. The calendar was originally developed for use in a web-based human pedigree data management application that required the ability to record dates in families stretching back many generations.

  Note: Almost all other web calendar and date components fail on dates prior to 1900. Some even fail on dates prior to 1970.

  Note: Only the Catholic countries in Europe adopted the Gregorian calendar immediately. Other countries adopted it much later. For example, both England and the American colonies did not adopt it until the middle of the 18th century. Countries such as Thailand did not adopt the international calendar until the late 19th century. Keep this in mind if your application requires historical dates.



Holidays and events can be retrieved from RSS-style XML feeds. Here the American Fourth of July is highlighted in the default holiday style while the french national day is highlighted using a CSS class featuring a flag background image.

• New! Ability to load holiday and event dates from RSS-style XML feeds. The calendar now supports loading RSS-style XML holiday and event date files using asynchronous javascript and XML ( AJAX) technology. To show both national and school holidays on one calendar, you need only specify unique CSS classes for the events in the XML feed.

  The format of the XML file is very simple and can be easily generated by database and scripting engines:

  <entry>
   <title>Fête de la Victoire 1945</title>
   <date>2005-05-08</date>
   <class>french</class>
  </entry>

  The title and date tags are mandatory, while the optional class tag allows you to specify a special CSS class for displaying events with customized highlighting or colors.

  Note: Most browsers implement default security policies that require that the XML feeds come from the same domain as the web page which is requesting the data.



Five decades of years pop-up to streamline year selection.

• New! Quick decade pop-ups insure that users can quickly pick any year up to 50 years in the past or future without having to scroll through long drop-down lists.
• Localization in 12 languages (Arabic, German, Greek, English, Spanish, French, Italian, Japanese, Portugese, Russian, Thai, and Chinese). A call to setLocale() is all that is required to switch locales/languages.


Localization includes localized digits and right-to-left layouts where appropriate. An Arabic localization is shown here.

• Support for localized digits (such as Arabic and Thai digits) and for right-to-left layouts (as for Arabic) is built in, making it easy to extend the calendar for use in almost any locale. Localization is supported via Gladiator's gLocale class.
• Accurate representation of a proleptic calendar for the years from 4713 BCE until 1582. A proleptic calendar is the projection of a calendar (Gregorian, Julian, or otherwise) into the past prior to it's actual historical use. Very few applications will ever need dates prior to 1582, but the functionality is there if you need it.
• Round-trip conversion between Julian day numbers and Julian/Gregorian dates. The calendar adopts an algorithm presented in Press et. al., Numerical Recipes in C (Cambridge University Press) (3,4) to calculate Julian day numbers. From Julian day numbers, it is trivial to calculate the day of the week on which any month in any year started.
• CSS-based Styling. All graphic styling is accomplished via W3C CSS. What Christopher Schmitt (in this book) terms "HTML terrorism" is avoided entirely. Extensive use of modern CSS in W3C-compliant browsers greatly simplifies the code, leading to faster rendering of graphical components.
• Object-oriented Code. In order get the most out of W3C-compliant browsers, extensive use has been made of modern DOM-based object-oriented Javascript.
• W3C Compliant. The calendar has been validated against the World Wide Web Consortium's CSS and XHTML validators.
• Unicode Compliant. The calendar uses the UTF-8 Unicode character encoding thus providing support for all the world's major scripts and many of the world's minority and historical scripts. Localization in any additional languages requires nothing more than a Unicode-capable editor.


Seasonal Picture Support adds a professional touch to any project.

• Seasonal Picture Support. The calendar can display a different picture for every month of the year in the background of either the header or calendar canvas itself. For the header background, the calendar is distributed with images representing temperate zone seasons (winter, spring, summer, and fall). For the canvas background, the calendar is distributed with a set of images of seasonal native Michigan flora.