The Ashley Group, Ltd.
Click on the Show Calendar link
to display the DHTML version of
the Javascript Calendar Control.

Show Calendar
USING THE DHTML CALENDAR CONTROL
The The Ashley Group, Ltd.'s DHTML Calendar Control is a pop-up calendar designed to work in all 4.0+ browsers. Implementing the DHTML Calendar Control is relatively easy. It assumes that all of the source files (CAL_DHTML.HTM, CAL_DHTML.CSS, CAL_DHTML.JS,and CAL_DHTML_DEMO.HTM) are in the same directory.

To implement DHTML Calendar Control, you will need an HTML page containing, at a minimum, the following two elements:
  • A text box and link or button that will be used to initiate the calendar's display and capture the user's date selection; and
  • Javascript code that will initiate the calendar's display.
Text Box and Link

The text box and link above are implemented with the following HTML code:

	<input type="text" name="txtDate" size="10">
	<a href="javascript:showCalendar('txtDate')">
		<b><font face="Verdana,Arial,sans-serif" size="1" color="#003366">
			Show Calendar</font></b></a>
Note that the argument to the showCalendar("ElementName") function is the name of the text box. In other words, you can name your text box anything you want as long as that name is passed as the argument to the showCalendar() function.

showCalendar() Function

The showCalendar() function is displayed below along with its dependencies. (This code is the same as the code used by this page to display the calendar in the link above.) This function sets up the required global variables and opens the DHTML Calendar Control in a pop-up window. 
// Declare and initialize global variables.
var nWin = ""			// references the pop-up window.
var UserDate = ""		// references the value in the text box
var ReturnEl = ""		// references the name of the text box

// Display the DHTML Calendar Control calendar
function showCalendar(elName)
	{
	// Height and width are directly tied to the row height and
	// column width in the HTML below.
	Height = 174
	Width = 245	// Top and left define the calendar's position on the screen.
	Top = 100
	Left = 100
	
	el = document.forms["FormName"].elements[elName]
	UserDate = el.value		// Save the current value of the text box.
	ReturnEl = elName		// Save the name of the text box.
	
	// If no pop-up window is open, then open the calendar. If a pop-up window
	// is open, close it and then open the calendar. (We only want one pop-up
	// open at a time to conserve the user's resources.)
	if (nWin == "")
		{
		nWin = window.open("cal_dhtml.htm", "Calendar", "height=" + Height + ",width=" + Width 
			+ ",top=" + Top + ",left=" + Left + ",status=no,toolbar=no,menubar=no,"
			+ "location=no,resizable=no,scrollbars=no")
		nWin.opener = window
		}
	else
		{
		CloseNWin()
		showCalendar(elName)
		}	
	}

// Close the current pop-up window. Note that the BODY's ONUNLOAD event
// calls this routine so that any pop-up windows called from this page
// are closed if the user leaves the page.
function CloseNWin()
	{
	if (nWin != "")
		{
		nWin.close()
		nWin = ""
		}
	}
If you View Source on this page, you will see all of these implementations in action.

Calendar Control User Notes

The Calendar Control is a pop-up calendar that allows users to navigate to and select the date they want. To navigate, the following controls are available:
  • << - Jump to previous year
  • < - Jump to previous month
  • ^ - Return to original date
  • > - Jump to next month
  • >> - Jump to next year
When a user clicks on a date, the date is inserted into the associated text box and the calendar control is closed.

Usage Agreement

The Ashley Group, Ltd. grants the user a nonexclusive, nontransferable, revocable license to use the DHTML Calendar Control object code and/or documentation packaged in the CAL_DHTML.ZIP download file pursuant to the following restrictions:
  1. The user accurately completes and submits the Registration Form on The Ashley Group, Ltd.'s Web site prior to downloading the selected file.

  2. All references and links to The Ashley Group, Ltd. in the downloaded files may not be altered or removed. Any display of the downloaded files to third parties must contain the copyright notification for and link to The Ashley Group, Ltd.

  3. All code and/or documentation remains the property of The Ashley Group, Ltd. and may not be distributed to third parties for sale or otherwise without the express written permission of The Ashley Group, Ltd.

  4. All software and/or documentation in the downloaded files is provided "as is" without warranty of any kind, either expressed or implied.

  5. The Ashley Group, Ltd. reserves the right to revoke these usage rights in whole or in part at any time with or without reason upon written notification to the user.