This popup calendar can be linked to a form text field. The user can click on an icon of a desk calendar and use a popup window to select a date.
This calendar was originally designed by Robert Husted and posted as a Netscape JavaScript tutorial article. It supports Netscape and IE senses the user's language settings and automatically displays the calendar in English, French, German, or Spanish. The font and other customizations can be made by editing the first few lines of the .js file.
I've since made the following improvements:
Reduced the .js file size to from 29k to 13k.
Fixed a CSS bug when IE 5 came out.
Added support for reading and writing of advanced date formats. My favorite addition is the "th" format flag that translates to "st", "nd", "rd", or "th" depending on day of month.
There is one part that could use help. Currently in IE it opens, closes, and then re-opens. This is the only answer I could find to the problem of re-opening the window. Without this workaround, if the popup calendar is already open, and the user clicks to open it, it can get disconnected and looses it's ability to communicate with the main window. In the customizable section of the .js file, you can set cal_opentwice to false to turn this off. If someone finds a better way.. please post it here.
Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. Afterdownloading it, you will need a program like Winzip to decompress it.Virus note:All files are scanned once-a-day by Planet Source Code for viruses, but new viruses come
out every day, so no prevention program can catch 100% of them. For your own safety, please:
Re-scan downloaded files using your personal virus checker before using it.
NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.
If you don't have a virus scanner, you can get one at many places on the net
including:McAfee.com
Terms of Agreement:
By using this code, you agree to the following terms...
You may use
this code in your own programs (and may compile it into a program and distribute it in compiled format for languages that allow it) freely and with no charge.
You MAY NOT redistribute this code (for example to a web site) without written permission from the original author. Failure to do so is a violation of copyright laws.
You may link to this code from another website, but ONLY if it is not wrapped in a frame.
You will abide by any additional copyright restrictions which the author may have placed in the code or code's description.
Report Bad Submission
Your Vote
Other User Comments
5/5/2003 12:22:50 PM:
a very good and useful program (If this comment was disrespectful, please report it.)
11/11/2003 3:38:51 PM:
this is a great calendar, but I cannot get it to move from the upper left hand corner to another position on the screen. Any ideas? (If this comment was disrespectful, please report it.)
While the height and width of the calendar window is easy to find at the top of the calendar.js file, the command that opens the window is on line 194 at the bottom of the showCalendar function. The upper left corder of the window currently opens 200 pixels from the left and 300 pixels from the top. These numbers could be replaces with JavaScript variables, but you would have to be comfortable with JavaScript.
As a hint.. check out the event object and the event.clientX / event.clientY properties. They tell you where on the screen the mouse was when the click happened. Also check out the screen object, a couple of its properties will tell you the height and width of the user's monitor which will be needed if you want to center the window.
(If this comment was disrespectful, please report it.)
3/25/2004 5:58:14 AM:
I have found another workaoround for ie and I wish to send you my code Please let me know an email address to send it. Regards Silvia De Sinopoli Software Products Italia (If this comment was disrespectful, please report it.)
4/5/2004 5:21:57 PM:
I am having trouble with the calendar script using Netscape 7.1. The calendar popup window appears with the month view, but if I press one of the buttons to change the month, the month view disappears. I cannot get the month back unless I close the window and click the calendar icon to pop the window back up. I do not have any problem with the calendar using IE 6.0. Has anyone else experienced this problem on Netscape and is there a fix? (If this comment was disrespectful, please report it.)
11/29/2004 5:25:54 AM:
Pop up blockers, namely the Yahoo! pop up blocker, are not letting the calendar come up. Is it possible to convert the code so that the calendar is loaded in the same page but on a different layer? Thanks! (If this comment was disrespectful, please report it.)
Since the time if making this calendar, I have been impressed with some other calendars that have come out that use layers instead of a pop-up window. One that comes to mind is at http://www.mattkruse.com/javascript/calendarpopup/ (take a look at the DIV-style examples) His code is 35k and doesn't have built-in multi-language or the advanced date formatting that mine does, but might help avoid the popup blocker problem. (If this comment was disrespectful, please report it.)
1/20/2005 6:11:26 PM:
I can't reopen the calendar popup once it's already open. The only way I can reopen the calendar is if I close it out. I'm using IE 5.5 and I'm calling the showCalendar() function instead of using the calendar.html frameset document. Could this be the problem? (If this comment was disrespectful, please report it.)
3/8/2005 4:48:18 PM:
I found a way to stop the open close open for IE. add calWin in the var statement at line 54 then replace lines 191-197 with the following: if(calWin == null || calWin.closed) { calWin = window.open('javascript:opener.calDocFrameset','calWin','dependent=yes,'+windowSize+',sc reenX=200,screenY=300,titlebar=yes'); } else { calWin.close(); calWin = window.open('javascript:opener.calDocFrameset','calWin','dependent=yes,'+windowSize+',sc reenX=200,screenY=300,titlebar=yes'); } if (isNav) calWin.focus(); }
(If this comment was disrespectful, please report it.)
4/14/2005 2:25:12 AM:
exactly what i need! (If this comment was disrespectful, please report it.)
Works great in IE, but doesn't work in Firefox...Any idea what needs to be changed to get it to work on Firefox? (If this comment was disrespectful, please report it.)
The latest version is available at http://www.catalystwebapps.com/JavaScriptCalendar.zip It works in Firefox (except the window needs to be a bit wider for the next year button to fit) It also comes with an example ColdFusion custom tag to make it easy to use. (If this comment was disrespectful, please report it.)
this is wonderful. pls weldone (If this comment was disrespectful, please report it.)
Add Your Feedback
Your feedback will be posted below and an email sent to
the author. Please remember that the author was kind enough to
share this with you, so any criticisms must be stated politely, or they
will be deleted. (For feedback not related to this particular code, please
click here instead.)
By 18 Users
Download code
5/5/2003 12:22:50 PM: 
