To create one or more DHTML Lab popup calendars for your web page, you need to follow three simple steps:

1. Include a custom <dlcalendar> tag for each calendar needed.

Each tag can contain any of the attributes outlined in the following pages. The attribute values will override the default calendar object property values set in the dlcalendar.js script. Like all HTML tags, the tag name is not case-sensitive

The <dlcalendar> tags must be defined before the <script> tag that loads the external dlcalendar.js script.

Some examples of <dlcalendar> tag syntax:

1. the minimum requirements:

   <dlcalendar click_element_id="img_flightdeparture"></dlcalendar>

   Try it:

2. the most common syntax

   <dlcalendar click_element_id="img_flightdeparture"
               input_element_id="input_flightdeparture"
               tool_tip="Click to choose flight departure date"></dlcalendar>

   Try it:

3. limiting the date choices:

   <dlcalendar click_element_id="img_flightdeparture"
               input_element_id="input_flightdeparture"
               tool_tip="Click to choose flight departure date"
               start_date="2004,7,30"
               end_date="2004,11,5"></dlcalendar>

   Try it:

4. providing language-specific calendars:

   <dlcalendar click_element_id="img_flightdeparture_en"
               input_element_id="input_flightdeparture"
               tool_tip="English Calendar"
               firstday="Tu"></dlcalendar>

   <dlcalendar click_element_id="img_flightdeparture_es"
               input_element_id="input_flightdeparture"
               tool_tip="Calendario Espaņol"
               months="ene,feb,mar,abr,may,jun,jul,ago,sep,oct,nov,dic"
               days="do,lu,ma,mi,ju,vi,sa"
               firstday="lu"></dlcalendar>

   Try it:

5. the whole hog:

   <dlcalendar id="popup_calendar_1"
               click_element_id="img_flightdeparture"
               input_element_id="input_flightdeparture"
               tool_tip="Click to choose flight departure date"
               start_date="2003,7,30"
               end_date="2005-11-5"
               months="01,02,03,04,05,06,07,08,09,10,11,12"
               days="S,M,T,W,T,F,S"
               firstday="M"
               date_format="mm~dd~yy"
               root_date="2004-04-1"			
               navbar_style="background-color: yellow; color:black;"
               daybar_style="background-color: black; font-family: Courier; color:white;"
               selecteddate_style="background-color: yellow; font-family: serif; font-style:italics; color:black; border-width:0px;"
               weekenddate_style="background-color: blue; font-family: serif; color:red; border-width:0px;"
               regulardate_style="background-color: red; font-family: serif; color:blue; border-width:0px;"
               othermonthdate_style="background-color: lightgrey; border-width:0px;"
               use_webdings="false"
               nav_images="dlcalendar_prevyear_black.gif,dlcalendar_prevmonth_black.gif,dlcalendar_nextmonth_black.gif,dlcalendar_nextyear_black.gif"
               hide_selects="true"
               hide_onselection="false"
               callfunction_onselection="myCustomFunction"></dlcalendar>

   Try it:

Steps 2 and 3 are on the next page.