Popup Calendar 1.0 - DHTML Lab | 6 | WebReference

Popup Calendar 1.0 - DHTML Lab | 6


Logo

Pop-up Calendar 1.0
Creating calendars, Step 1


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: calendar

  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: calendar

  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: calendar

  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: calendarcalendar

  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: calendar

Steps 2 and 3 are on the next page.



Send a comment or suggestion to Peter Belesis

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

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

Justtechjobs.comFind a programming school near you






Online Campus Both