Popup Calendar 1.0 - DHTML Lab | 7 | WebReference

Popup Calendar 1.0 - DHTML Lab | 7


Pop-up Calendar 1.0
Creating calendars, Steps 2 and 3

2. For every <dlcalendar> tag, include an HTML element having the id specified in the click_element_id attribute.

Without an element for the user to click, the popup calendar will, of course, not pop up.


<dlcalendar click_element_id="img_flightdeparture"></dlcalendar>
<img id="img_flightdeparture" src="dlcalendar_1.gif" height="15" width="20" alt="calendar">

This element is usually an image, but it could be any HTML element. The dlcalendar.zip download includes five images that you can use, or create your own.

calendar filename: dlcalendar_1.gif
width: 20
height: 15
calendar filename: dlcalendar_2.gif
width: 13
height: 13
calendar filename: dlcalendar_3.gif
width: 20
height: 15
calendar filename: dlcalendar_4.gif
width: 20
height: 15
calendar filename: dlcalendar_5.gif
width: 15
height: 14

For a popup calendar spawned from a non-image element, click here.

If you want to display the date in an input element, then the input element must also be defined. For example:

<dlcalendar click_element_id="img_flightdeparture"
            tool_tip="Click to choose flight departure date"></dlcalendar>
<input type="text" id="input_flightdeparture">
<img id="img_flightdeparture" src="dlcalendar_2.gif" height="13" width="13" alt="calendar">

3. Include the external dlcalendar.js script in your page.

The script must be included at the end of your page, preferably just before the closing body tag. Like so:

<script src="dlcalendar.js type="text/javascript" language="javascript">

The popup calendar accepts many attributes making customization easy.

Send a comment or suggestion to Peter Belesis

Created: July 20, 2004
Revised: July 20, 2004

URL: http://webreference.com/dhtml/column67/3.html

Justtechjobs.comFind a programming school near you

Online Campus Both