Cross-browser JavaScript PopUp Calendar

Ok, I'm going overboard now, I'll post for like a day and a half, say everything that I've ever thought of, then I won't post for another year! hehehe Just kidding.

Ok, here's my second Cross-browser JavaScript widget that I just love building, my PopUp Calendar. It was originally inspired by the Visual Basic 6 Calendar Object, then modified because people at my previous employment wanted it to function differently.

So here goes again q:)



You can download the source code and the example HTML file from here, but once again, please leave my name on the code. It's just a simple sign of respect that's all.

Code Explanation

After including the popUpCalendar.css and popUpCalendar.js files into your HTML file, we need two additional objects to complete the exercise, a Receiving Object and a Parent Object.

The Receiving Object typically is a form item that can be set using JavaScript, though I have allowed for <DIV> and <SPAN> tags to receive the value using innerHTML or innerText.

The Receiving Object

<INPUT TYPE="text" ID="receivingObject" NAME="receivingObject" />

This can be placed anywhere in your code that you want to receive Dates for. You can have as many of these as you like, just remember that typically you have a Receiving Object and a Parent Object combo, rather than multiple Receiving Objects and a single Parent.

The Parent Object

<INPUT TYPE="button" ID="parentObject" NAME="parentObject" VALUE="..." ONCLICK="puc_showCal('parentObject', 'receivingObject', 'dateFormat', 'receivingObjectType_String');" />

The INPUT tag is pretty self explanatory, it simply displays a button with an ellipsis (three periods in a row) on it which activates the puc_showCal() function when clicked.

The puc_showCal() function is pretty straight forward. It requires that you send through the name of the objects, not the objects themselves. I've a simple function that returns an object using the names as references.

The parentObject is an anchor object. It simply uses the X and Y coordinates of this object as the TOP and LEFT values for the layer. Please note: you can hack the script if you wish there to be a distance between the TOP and LEFT points of the parentObject and the layer. In the function puc_showCal() lines 298 and 299 have variables x and y respectively, you can make your mods there if you wish.

The receivingObject is the HTML object that's going to be modified after the user has selected the Date they wish to use. There are actually four Object Types that can be used here:

• VALUE - Typically a form element that has the property VALUE (ie. INPUT TYPE="text" or TEXTAREA objects)


• INNERTEXT or INNERHTML - These apply to anything that has the properties innerText or innerHTML (ie. DIV's and SPAN's)


• VARIABLE - If you declare a variable at the HEAD or above the call to puc_showCal(), you can have the value placed inside that variable for additional processing

This widget comes with a CSS file that can allow you to change it's appearance pretty easily and make it your own with just a few code changes!