The Coolest DHTML Calendar

The coolest DHTML calendar, v. 0.9.3 "It's still alife"

Flat calendar

A non-popup version will appear below as soon as the page is loaded. Note that it doesn't show the week number.

The example above uses the setDisabledHandler() member function to setup a handler that would only enable days withing a range of 10 days, forward or backward, from the current date.

Easy I18N: all messages are separate JS files (see calendar-en.js for an example). Check the lang directory in your distribution archive to see what languages are available. You just need to include the right one from the HTML page.

NOTE: I made the English and Romanian versions only. The other lang files were submitted by people. I thank them very much, and you should too! :) Unfortunately, I lost track of these files and the persons who sent them, so if you send me a translation file please include a small comment with your name and email address, as you are the author. Also, a statement that the file is distributed under the GNU LGPL would be welcome :)

You can find more information about this script (and how to use/customize it) on my page.

This is release 0.9.3. Works on MSIE 5.0, 5.5, 6.0, Opera 7, Mozilla, Netscape 6.x, 7.0 and all other Gecko-s.

You can click on "Mo"/"Su" (first day name displayed) to change the first day of week (Sunday/Monday) (since 0.8 this is also mapped on the "-" button in the top-left corner). Use the navigation buttons ("<<", "<", "Today", ">", ">>") to move to the prev/next year/month. Keep the mouse button pressed for a short time over one of these buttons to get a menu for faster selection. You can drag the "status bar" (that's where the tooltips appear) or title bar (that's where the currently selected month/year shows up) to move the whole calendar.

Keyboard navigation

Starting with version 0.9.2, you can also use the keyboard to select dates (only for popup calendars; does not work with Opera 7). The following keys are available:

← , → , ↑ , ↓ -- select date
CTRL + ← , → -- select month
CTRL + ↑ , ↓ -- select year
SPACE -- go to today date
ENTER -- accept the currently selected date
ESC -- cancel selection

Date formatting

d -- the date ( ex: 1 .. 31 )
dd -- the date, zero padded ( ex: 01 .. 31 )
m -- month as a number ( ex: 1 .. 12 )
mm -- month, zero padded ( ex: 01 .. 12 )
y -- 4 digit year ( ex: 1979 )
yy -- 2 digit year, yy - 1900 ( ex: 79 ) (USING THIS IS NOT RECOMMENDED)
w -- the number of the week in the year (1 or 2 digits)
ww -- the number of the week, zero padded (2 digits)
D -- short weekday name ( ex: Sun, Wed, Fri )
DD -- long weekday name ( ex: Sunday, Wednesday, Friday )
M -- short month name ( ex: Mar, Jan, Oct )
MM -- long month name ( ex: March, January, October )

Date parsing

The algorithm will first try to read the date in the specified format.

If it doesn't work, it will try different methods to recognize a valid date -- general behavior is: if some part of the input is the name of a month, i.e. "Mar", then that will be considered the month, the next/previous 1 .. 31 number will be considered the date and the next big number (hopefully there) will be the year; if it's missing we assume the current year. If no such name exists, then the first 1 .. 12 number will be taken as the month, the next 1 .. 31 as the date; year selection is the same as discussed.

Examples: 3/8/1979 as well as 03 08 79 as well as 1979 mar 8, as well as 79+3+8 will all lead to the same date: my birthday (March 8, 1979). To try the algo, just input the date using whatever format you like in one of the fields above and click on the "..." button. The calendar that shows up should contain your date, otherwise you and this algorithm don't get too well together :)

Author: Mihai Bazon © 2002
Feel free to use / redistribute under the GNU LGPL.
Please no not remove or alter the comment at the script start.

If you use this script on a public page it would be nice if you would let me know.