Advanced Popup Calendar

	Print
	Email

Submitted on: 1/3/2003 7:12:02 PM
By: dp_pro
Level: Beginner
User Rating:

By 13 Users
Compatibility:JavaScript

Users have accessed this code 12232 times.

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.<p> 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.<p> 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.

HTML:

Can't Copy and Paste this?
Click here for a copy-and-paste friendly version of this code!


//**************************************
//     
//HTML for :Advanced Popup Calendar
//**************************************
//     
.<BR>
.<BR>

Download code

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:
1)Re-scan downloaded files using your personal virus checker before using it.
2)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...
1) 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.
2) 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.
3) You may link to this code from another website, but ONLY if it is not wrapped in a frame.
4) 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

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?

11/11/2003 6:13:01 PM:dp_pro

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.

Add Your Feedback!

Note:Not only will your feedback be posted, but an email will be sent to the code's author in your name.

NOTICE: The author of this code has been kind enough to share it with you. If you have a criticism, please state it politely or it will be deleted.

For feedback not related to this particular code, please click here.