The earthli JavaScript Calendar is a component for getting and setting dates in an easy-to-use, user-friendly way. It's

• Purely client-side; uses only JavaScript/CSS/HTML.
• Fully object-oriented; adapt without rewriting.
• Fully CSS-driven; customize without recoding.
• Browser-agnostic; works in IE/Gecko/Opera, tested on Mac/Windows.
• Fully controllable via properties; integrate into your website in minutes!

earthli JavaScript components are designed from the ground up to be easily integrated into any website: no font tags and colors buried in the code; no obfuscation so you can't figure out what it's doing. Just clean, documented, object-oriented code that lets you set up and customize in just a few easy steps.

How do I use it?

Check out the demo to see it in action. 'View source' in your browser and find comments and helpful hints. There are basically two components:

DATE_TIME_FIELD

Create one of these in the form and attach it to a text input field. It has a method called 'show_calendar' which pops up a calendar in a separate window. Select a new date and/or time and it will automatically be entered in the input field.

HTML_CALENDAR

Create one of these in your popup window file and call 'display' to draw an HTML table-based calendar.

How do I integrate it?

The following customizations apply to the DATE_TIME_FIELD component.

Adjust properties

This is a relatively simple component that uses functions defined in time.js to perform date/time conversions and opens the calendar window. There are a few properties to adjust its behavior. See setting properties for more information.

output_format

This is probably the most important one; it controls whether the field displays the date in Date_format_us (mm/dd/YYYY), Date_format_euro (dd.mm.YYYY) or Date_format_iso (YYYY-mm-dd). Date_format_euro is the default.

width/height

Controls the width and height of the popup window. Defaults to 200/200.

page_name

Specify the name of the page containing the calendar. Defaults to date_picker.html.

show_month_selector

The calendar shows a drop-down menu for months, making navigation within a year easier. The calendar looks a bit nicer without it, but isn't as easy to use if you need to scan months. Defaults to True

show_time

Controls whether the time is shown in the text field and whether a time selector is shown in the calendar. Defaults to True.

century_break

All two-digit years after this value are considered part of the 20st century. This is only used when translating from a manually-entered user date. The components will always translate to a 4-digit year. Defaults to 30.

The following customizations apply to the CALENDAR component.

Customize the style sheet

Take a look at the calendar.css style sheet. The 'calendar' styles are used as shown in the diagram below. All of these can be adjusted to match your site's style without touching any code.

The error style is used to draw an error message if the components are improperly configured.

Customize the pictures

You'll need to set some JavaScript properties to change the pictures used for the month and year buttons. You can set these properties globally, so that all instances are affected or set the properties directly on an instance of the calendar. See setting properties for more information.

• You can point to the location of your images by adjusting the image_path property. This is done in the demo to point to the 'images' subfolder.
• You can also change the image names by setting previous_month_image, next_month_image, previous_year_image and next_year_image directly.

Customize functionality

You can adjust a few other things on a calendar (there are other properties which you control from the DATE_TIME_FIELD component, shown below).

first_day_of_week

Controls the first day displayed in the calendar. It defaults to '1', which shows Monday first. Set it to '0' to show a US-style calendar.

show_year_selector

Controls whether the year-scrolling buttons are shown or not. Defaults to 'true'.

close_on_select

Controls whether the calendar popup window is closed when a date is selected. If this is off, the date is updated in the specified field, but the user must close the window manually. Defaults to 'true'.

Redefine the layout

For deeper customization, you can inherit from the CALENDAR or HTML_CALENDAR class and define your own display routine. The CALENDAR contains all of the code which communicates with the DATE_TIME_FIELD component, like change_date and select_date, etc. The register function, which attaches to a DATE_TIME_FIELD, and helper functions for working with dates are also defined here.

HTML_CALENDAR also exposes an API, with the table-based layout being the only really fixed aspect of the renderer. Methods like icon_as_html and expand_image_file_name can be redefined. (see WEBCORE_HTML_CALENDAR, also defined in calendar.js, for an example of such a customization; this class integrates a calendar into the earthli WebCore.)

Setting properties

All of the properties for DATE_TIME_FIELD or HTML_CALENDAR are set to defaults in the constructor. The constructor initializes all properties to global variables with (almost) the same name, so you can set a value for all objects by setting the global or change a property on a single instance.

For example, set Calendar_first_day_of_week before creating any calendars and all instances initialize to that value in their constructors. Set cal.first_day_of_week and you've changed the property for just that object. The same holds true for all of the properties described above.