http://www.mattkruse.com/javascript/calendarpopup/
Description:
This script uses DHTML or Popup windows to display a calendar for the user to select a date. It was designed to look and behave like Microsoft Outlook.
It can be implemented in only a few lines of code, yet also provides customization options to make it work correctly in any country's display format, etc.
It also requires AnchorPosition.js and PopupWindow.js, and uses date.js for date formatting.
   
This script implements a popup calendar to allow users to select a date. It is designed to look and function in a way similar to Microsoft Outlook, since most users are familiar with that.
The script can function in two ways - by using DHTML or by using a popup window. Because current browsers display all form fields on top of any layers or DHTML objects, the popup is sometimes the preferred method to use. It depends on your target audience and browsers being used.
To implement the calendar popup, follow these isntructions:
1. Include the source file in your page, as well as the AnchorPosition.js and PopupWindow.js files
For example,
<SCRIPT LANGUAGE="JavaScript" SRC="AnchorPosition.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="PopupWindow.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="CalendarPopup.js"></SCRIPT>
2. Include style sheet code in your page
In the <HEAD> of your document, add this text if you are using the DIV (in-page) style of calendar:
<SCRIPT LANGUAGE="JavaScript">document.write(cal.getStyles());</SCRIPT>
This will write the needed style sheets into the page contents for the calendar to show correctly.
3. Add Javascript to create the CalendarPopup object and set its parameters. An example:
<SCRIPT LANGUAGE="JavaScript">
// Create CalendarPopup object
var cal = new CalendarPopup("testdiv1");
cal.setReturnFunction("showDate");
</SCRIPT>
4. Add a reference point for where the calendar should appear
Where the calendar pops up depends on the location of an anchor tag in the document. The upper-right corner of the calendar popup will be at the location of the tag whose name you specify.
For example, if you want the popup to appear right under a text input box, you might have code like this:
<INPUT NAME="date1" SIZE=20><A NAME="calposition1" ID="calposition1"> </A>
The <A> tag is where the upper-right corner of the calendar will be. You must have NAME and ID attributes to the tag. This will be passed in the function call. Also, remember to include the closing </A> tag and don't leave the tag empty!.
5. Add a link to activate the calendar
Now create a link to actually open the calendar popup. You can do this any way you wish - using an image, a form button, a link, etc. The example here will be with a normal <A> link.
<A HREF="#" onClick="cal.showCalendar('anchor1'); return false;" NAME="anchor1" ID="anchor1">Calendar Popup</A>
The "showCalendar" method is called on the CalendarPopup object. It takes one argument - the name of an ANCHOR tag to use as a reference point when positioning itself.
6. Include a DIV tag for the calendar contents
If you are using the DIV style of the CalendarPopup, then you need to include a DIV tag that the calendar will use to hold its contents. Example:
<DIV ID="testdiv1" STYLE="position:absolute;visibility:hidden;">
7. Write the return function
When the user clicks on a date in the calendar popup, a function is called and passed the year, month, and date that was clicked. You need to write this function.
Typically, the function will take the clicked date and add it to a form field. This is your responsibility - the CalendarPopup does not do this! (Since everyone will want to do it in a slightly different way).
Here is an example function:
// Function to get input back from calendar popup
function showDate(y,m,d) {
document.forms[0].cal1.value = y + "-" + m + "-" + d;
}
As you can see, this function accepts the results and formats them into a text input field. Your function can do anything you wish with the input.
previous page
|