- 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!
How do I use it?
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.
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.
This is a relatively simple component that uses functions defined in
to perform date/time conversions and opens the calendar window. There are a few properties
to adjust its behavior. See setting properties for more
- This is probably the most important one; it controls whether the field displays the date
Date_format_eurois the default.
- Controls the width and height of the popup window. Defaults to 200/200.
- Specify the name of the page containing the calendar. Defaults to
- 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
- Controls whether the time is shown in the text field and whether a time selector
is shown in the calendar. Defaults to
- 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.
(Saturday or Sunday)
(day in the selected month)
(day not in the selected month)
error style is used to draw an error message if
the components are improperly configured.
Customize the pictures
- You can point to the location of your images by adjusting the
image_pathproperty. This is done in the demo to point to the 'images' subfolder.
- You can also change the image names by setting
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).
- 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.
- Controls whether the year-scrolling buttons are shown or not. Defaults to 'true'.
- 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
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
expand_image_file_name can be redefined. (see WEBCORE_HTML_CALENDAR, also
calendar.js, for an example of such a customization; this class
integrates a calendar into the earthli WebCore.)
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.