phpguru.org

Home ~ Downloads ~ FAQs ~ Search ~ Licensing

Blog Categories

[Index]

Me

Employ me
LinkedIn profile

Articles

PHP5

HTML5

PHP4

Javascript

C#

Dynamic Calendar

This is a DHTML calendar/date selector. Can be used to enable selecting dates easier for the user. Works using layers, and should work on IE5+, NS6+, and Mozilla. Fully customisable, details on this below. Uses a user defined callback function to determine what to do with the selected date, passing the date/month/year to this function.

If your browser doesn't support the calendar (eg Opera) you will not see the calendar button below.

Example

Code used for this example


<link rel="stylesheet" media="screen" href="css/dynCalendar.css" />
<script language="javascript" type="text/javascript" src="javascript/browserSniffer.js"></script>
<script language="javascript" type="text/javascript" src="javascript/dynCalendar.js"></script>

<form name="calendar_test">
    <input type="text" name="date_input1">
    <script language="JavaScript" type="text/javascript">
    <!--
        /**
        * Example callback function
        */
        function calendar1Callback(date, month, year)
        {
            document.forms['calendar_test'].date_input1.value = date + '/' + month + '/' + year;
        }

        calendar1 = new dynCalendar('calendar1', 'calendar1Callback');
    //-->
    </script>
</form>

Alternative callback functions

A copy of the example except it displays US style m/d/y


function exampleCallback_US(date, month, year)
{
    document.forms['calendar_test'].date_input1.value = month + '/' + date + '/' + year;
}

A copy of the example except it displays in ISO 8601 format (CCYY-MM-DD)


function exampleCallback_ISO(date, month, year)
{
    if (String(month).length == 1) {
        month = '0' + month;
    }

    if (String(date).length == 1) {
        date = '0' + date;
    }

    document.forms['calendar_test'].date_input1.value = year + '-' + month + '-' + date;
}

API

After creating the object you can use the following methods to affect the behaviour of the calendar.

setOffset(Xoffset, Yoffset)
Sets the X and Y offset to the mouse pointer that the calendar appears at.

setOffsetX(Xoffset)
Sets the X offset to the mouse pointer the calendar appears at.

setOffsetY(Yoffset)
Sets the Y offset to the mouse pointer the calendar appears at.

setImagesPath(path)
Sets the path to the images needed by the calendar.

setMonthCombo(true/false)
Sets whether a dropdown should be used for the month.

setYearCombo(true/false)
Sets whether a dropdown should be used for the year.

setCurrentMonth(month)
Sets the initial month to display, (0-11).

setCurrentYear(year)
Sets the initial year to display, (YYYY).

setYearComboRange(range)
Sets the number of years to display either side of the initial/current year in the dropdown.

And of course some example code...


<link rel="stylesheet" media="screen" href="css/dynCalendar.css" />
<script language="javascript" type="text/javascript" src="javascript/browserSniffer.js"></script>
<script language="javascript" type="text/javascript" src="javascript/dynCalendar.js"></script>

<form name="calendar_test_2">
    <input type="text" name="date_input1">
    <script language="JavaScript" type="text/javascript">
    <!--
        function calendar2Callback(date, month, year)
        {
            document.forms['calendar_test_2'].date_input1.value = date + '/' + month + '/' + year;
        }

        calendar2 = new dynCalendar('calendar2', 'calendar2Callback');
        calendar2.setMonthCombo(false);
        calendar2.setYearCombo(false);
        calendar2.setCurrentMonth(0);
        calendar2.setCurrentYear(2000);
    //-->
    </script>
</form>

Which produces...

Link to me

If you use any of the code on this site (and if you don't I guess) or it makes your life easier, I'd appreciate a link - http://www.phpguru.org. Thanks.

Home ~ Downloads ~ FAQs ~ Search ~ Licensing