The DHTML Calendar is a lightweight DHTML widget that can be used as a date selector. Currently it supports date ranges from 1582 AD to 5000 AD based on a Gregorian calendar. (Even though the Gregorian calendar didn’t exist that far back.)
DHTML Calendar contains some code from a calender script by Mihai Bazon. It contains many more features but is much larger in size.
Features
- support Gregorian dates from 1582 AD to 5000 AD
- small size, less than 15k
- simple interface
- holding down mouse over the year arrows causes it to jump in 10 year increments after ~.6 secs
- supports a wide variety of browsers (Opera 7+, IE6, FF 1.x, Netscape 8, Mozilla 1.7)
Misc
- only one calendar can be displayed at a time
- demo page
- download: calendar0.3.zip
To Do
- keyboard support
- Internationalization
Revision History
Release 0.3
- ran js through a validator and fixed a couple of minor bugs
- added z-index to css files
Release 0.2
- fixed day of the week calculation
- limited min year to 1582 (creation of gregorian calendar)
Release 0.1
- alpha release
Calendar API
There are only two methods you should need for interfacing with the calendar.
Calendar.show(anchor, month, year, callback, tag)
The Calendar.show method creates and displays the calendar. Once displayed the calendar will close when a date is selected or the close button in the upper right corner is clicked. The method takes up to 5 arguments. They are described below.
anchor – There value past in is a javascript object reference. This determines where the calendar will be displayed. It is displayed at the bottom of the anchor on the left.
month – This is the month (January = 0) that the calendar will initially display. If an invalid value is provided, it will use the current month.
year – This is the year that the calendar will initially display. If an invalid value is provided, it will use the current year.
callback – This is the javascript function that will be called when a date has been successfully selected. It takes three arguments: month (January = 0), day, year. It DOES NOT get called when the window is closed with the close button.
tag – This is the prefix assigned to all classes and ids of the elements created to display the calendar. It is also the name used to identify the calendar in the cache.
Calendar.closeAll()
The calendar.closeAll method takes no arguments and provides away to close the displayed calendar outside the calendar itself. When the calendars are closed with this method, the callback function is not called.
February 9th, 2006 at 12:06 pm
[...] I’ve fixed the bug and posted the new release on the Dhtml Calendar page. [...]
January 9th, 2008 at 11:19 am
Hello,
Not sure if you’re still supporting the DHTML calendar, but I thought I would report that the day of week calculation isn’t working in 2008. Check out January, for example.
January 15th, 2008 at 8:09 am
I’m not using it anywhere since there are other options out there. I’ve been considering migrating it to jquery. However, I’ll take a look at this and see what is going on.
February 27th, 2008 at 1:01 am
I fixed it, replace your _Calendar.getWeekdayValue function with this code:
_Calendar.getWeekdayValue = function(month, day, year)
{
var d = new Date();
d.setFullYear(year, month, day);
return (d.getDay());
};
February 27th, 2008 at 7:21 pm
I guess my fix only works for dates after Epoch, but in my situation that’s fine.
February 29th, 2008 at 1:42 pm
I’m sorry I haven’t had a chance to look at this yet. I promise I will. Things at work have really be swamping me. I’ll see if I can take a look at it this weekend.
Bill
November 4th, 2008 at 6:09 pm
Don’t know if this is still maintained, but I made the following changes to calendar.js and as far as I can tell the problem mentioned above about the day of the week not working (Jan 2008) seems to have been fixed.
Open calendar.js
———————————————
1. Look for the line that reads:
_Calendar._monthValues = [0,3,3,6,1,4,6,2,5,0,3,5];
The first change I made was to add a second line of monthValues:
_Calendar._monthValues = [0,3,3,6,1,4,6,2,5,0,3,5];
_Calendar._monthValuesLeap = [6,2,3,6,1,4,6,2,5,0,3,5];
The second line of monthValues is for leap years. The values for Jan (6) and Feb (2) are different.
———————————————
2. Look for the _Calendar.getWeekdayValue = function(month, day, year)
The second change I made was to change this function
from:
_Calendar.getWeekdayValue = function(month, day, year)
{
var total = Math.floor(year / 4) + year;
total -= Math.floor(year / 100);
total += Math.floor(year / 400);
total += day;
total += _Calendar._monthValues[month];
total -= 1;
return (total % 7);
};
to this:
_Calendar.getWeekdayValue = function(month, day, year)
{
var total = Math.floor(year / 4) + year;
total -= Math.floor(year / 100);
total += Math.floor(year / 400);
total += day;
if (_Calendar.isLeapYear(year))
{
total += _Calendar._monthValuesLeap[month];;
}
else
{
total += _Calendar._monthValues[month];
}
total -= 1;
return (total % 7);
};
———————————————
That’s the only two changes I made and it seems to have fixed the problem.
November 5th, 2008 at 2:52 pm
Oops…
Just noticed, I put an extra ; at the end of the line that reads:
total += _Calendar._monthValuesLeap[month];;
should only be one ; at the end:
total += _Calendar._monthValuesLeap[month];
Hopes these changes help.