com.overset.dev» Blog Archive » DHTML Date Picker, Javascript Calendar v0.3

7.10.07

DHTML Date Picker, Javascript Calendar v0.3

I’ve seen my share of Dynamic HTML Date Pickers, Javascript Calendar controls, and the like. Each of which have a more horrifically ugly interface and are bloated with features. I found a need to create a simple calender piece so that a user could add a product to their cart when clicking on a specific date.

The example below shows two instantiated calendar’s each automatically showing the current month as well as blocking out the days before the current day in the previous month and blocking out days after the current day in the next month.

Update 10/31/2007 - v0.4

Fixed 2nd month displayed incorrectly - pointed out by K. Ng
Fixed another flaw with the trailing month days displayed in every month. V 0.3 and earlier you could see this problem on May 2008.

Update 9/24/2007 - v0.3

now click+release on a single day to add day
click hold and drag to select multiple days
can limit the user to the maximum number of concurrent days, i.e. 10 in this example
messaging at the bottom of the calendar to help instruct the user

Update 9/21/2007 - v0.2

display two months horizontally
left to right chronological navigation steps still one month in each direction
ability to build a “list” of selected days
first stab at showing the date range the user is about to select
date range can span multiple months
note: this code will need be cleaned and allow up to 12 months side-by-side

The javascript Calendar “class” I came up with offer these features:

a simple design that’s not ugly
ability to display the current date by default
can be drawn dynamically into any content container: DIV, SPAN, TD, or any element with an W3C-specification-defying innerHTML attribute
ability to “disable” or block-out specific dates within a range
easy access to scrolling through the months forward or reverse from current date

This was minimally tested on IE 6+, FF, and Safari 2.X.

The source for instantiating the test cases of the Calendar Javascript “class”:

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>

    <head>
        <script language="JavaScript" type="text/javascript" src="calendar.js"></script>
        <script>
            var __calendars = new Array();

            __calendars.push(

                new Calendar(

                    0,

                    '_calendar0',

                    new Date( (new Date()).getMonth() + '/' + (new Date()).getDate() + '/' + (new Date()).getFullYear() ),

                    new Date( ((new Date()).getMonth() + 2) + '/' + (new Date()).getDate() + '/' + (new Date()).getFullYear() )

                )

            );

            __calendars.push(

                new Calendar(

                    1,

                    '_calendar1',

                    new Date( (new Date()).getMonth() + '/' + (new Date()).getDate() + '/' + (new Date()).getFullYear() ),

                    new Date( ((new Date()).getMonth() + 2) + '/' + (new Date()).getDate() + '/' + (new Date()).getFullYear() )

                )

            );

            function initCal() {
                // draw the current month's calendar

                document.getElementById('calContainer1').innerHTML = __calendars[0].drawCal(0);

                document.getElementById('calContainer2').innerHTML = __calendars[1].drawCal(0);
            }
        </script>

    </head>
    <body style="background:#ff9900;" onLoad="initCal();" topmargin=0 bottommargin=0 leftmargin=0 rightmargin=0 marginheight=0 marginwidth=0>

        <span id="calContainer1">Loading...</span><span id="calContainer2">Loading...</span>

    </body>
</h

Download this code: dhtml-balloon/cal.html

The source for the Calendar Javascript “class”:

var __monthslong = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var __monthsshort = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
function Calendar (arrayID, uniqueName, dateFrom, dateTo) {

    this.currDate = new Date();

    this.uniqueName = uniqueName;

    this.arrayID = arrayID;

    this.products = new Array();

    this.selectedDays = new Array();

    this.prodDesc = '';

    this.dateFrom = dateFrom;

    this.dateTo = dateTo;

    this.startTally = new Array();

    this.maxDays = 10;

}
Calendar.prototype.drawCal = function (nudgeMonth, alreadyLoaded) {
    this.currDate.setMonth((this.currDate.getMonth() + nudgeMonth));

    var tmpNextMo = new Date();

    tmpNextMo.setDate(1);

    tmpNextMo.setFullYear(this.currDate.getFullYear());

    tmpNextMo.setMonth(parseInt(this.currDate.getMonth()) + 1);
/* flawed next month display above calendar - 

 * if next month has less days than first month, 

 * it'll skip the correct month */

//  var tmpNextMo = new Date(this.currDate.getFullYear(), (this.currDate.getMonth() + 1), this.currDate.getDate());
    var _currDate = new Date();

    _currDate.setFullYear(this.currDate.getFullYear());

    _currDate.setMonth(this.currDate.getMonth());

    var calStr = 

        '<table cellpadding=0 cellspacing=0 border=0>' +

            '<tr>' +

                '<td style="background:url(ul.gif) no-repeat; height:6px;"><img width="1" height="6" border=0 src="_blank.gif"></td>' +

                '<td style="background:url(ur.gif) right top no-repeat; height:6px; width:6px;"><img width="6" height="6" border=0 src="_blank.gif"></td>' +

            '</tr>' +

            '<tr>' +

                '<td style="background:url(ml.gif) left top repeat-y; text-align:center; font-family:Tahoma; font-size:8pt; color:#808080; overflow:auto; padding-left:6px;" id="__calMessage">' +

                    '<table cellpadding=0 cellspacing=0 border=0>' +

                        '<tr>' +

                            '<td width="100%" colspan=2 align=middle style="padding-bottom:5px;">' +

                                '<table cellpadding=0 cellspacing=0 border=0 width="100%">' +

                                    '<tr>' +

                                        '<td align=left style="font-size:8pt; color:#000000; text-align:left; cursor:pointer;" ' +

                                            'onClick="__calendars[' + this.arrayID + '].drawCal((-1), true);">' +

                                            '<img border=0 src="_left.gif">' +

                                        '</td>' +

                                        '<td width="50%" align=left style="padding:0px 16px 0px 0px; font-size:8pt; color:#000000; text-align:center; cursor:default;">' +

                                            '<nobr>' + __monthslong[this.currDate.getMonth()] + ' ' + this.currDate.getFullYear() + '</nobr>' + 

                                        '</td>' +

                                        '<td width="50%" align=right style="padding:0px 0px 0px 16px; font-size:8pt; color:#000000; text-align:center; cursor:default;">' +

                                            '<nobr>' + __monthslong[tmpNextMo.getMonth()] + ' ' + tmpNextMo.getFullYear() + '</nobr>' +

                                        '</td>' +

                                        '<td align=right style="font-size:8pt; color:#000000; text-align:right; cursor:pointer;" ' +

                                            'onClick="__calendars[' + this.arrayID + '].drawCal(1, true);">' +

                                            '<img border=0 src="_right.gif">' +

                                        '</td>' +

                                    '</tr>' +

                                '</table>' +

                            '</td>' +

                        '</tr>' +

                        '<tr>' +

                            '<td valign=top>' +

                                '<table cellpadding=0 cellspacing=0 border=0>' +

                                    '<tr>' +

                                        '<td align=middle style="background:#EEEEEE url(lightgray-gradient-ee.gif) bottom repeat-x; padding:1px; font-family:Tahoma; font-size:7pt; color:#000000; border-right:1px solid #CCCCCC; border-left:1px solid #EEEEEE; border-top:1px solid #EEEEEE; text-align:center; cursor:default;">S</td>' +

                                        '<td align=middle style="background:#EEEEEE url(lightgray-gradient-ee.gif) bottom repeat-x; padding:1px; font-family:Tahoma; font-size:7pt; color:#000000; border-right:1px solid #CCCCCC; border-left:1px solid #EEEEEE; border-top:1px solid #EEEEEE; text-align:center; cursor:default;">M</td>' +

                                        '<td align=middle style="background:#EEEEEE url(lightgray-gradient-ee.gif) bottom repeat-x; padding:1px; font-family:Tahoma; font-size:7pt; color:#000000; border-right:1px solid #CCCCCC; border-left:1px solid #EEEEEE; border-top:1px solid #EEEEEE; text-align:center; cursor:default;">T</td>' +

                                        '<td align=middle style="background:#EEEEEE url(lightgray-gradient-ee.gif) bottom repeat-x; padding:1px; font-family:Tahoma; font-size:7pt; color:#000000; border-right:1px solid #CCCCCC; border-left:1px solid #EEEEEE; border-top:1px solid #EEEEEE; text-align:center; cursor:default;">W</td>' +

                                        '<td align=middle style="background:#EEEEEE url(lightgray-gradient-ee.gif) bottom repeat-x; padding:1px; font-family:Tahoma; font-size:7pt; color:#000000; border-right:1px solid #CCCCCC; border-left:1px solid #EEEEEE; border-top:1px solid #EEEEEE; text-align:center; cursor:default;">T</td>' +

                                        '<td align=middle style="background:#EEEEEE url(lightgray-gradient-ee.gif) bottom repeat-x; padding:1px; font-family:Tahoma; font-size:7pt; color:#000000; border-right:1px solid #CCCCCC; border-left:1px solid #EEEEEE; border-top:1px solid #EEEEEE; text-align:center; cursor:default;">F</td>' +

                                        '<td align=middle style="background:#EEEEEE url(lightgray-gradient-ee.gif) bottom repeat-x; padding:1px; font-family:Tahoma; font-size:7pt; color:#000000; border-right:1px solid #CCCCCC; border-left:1px solid #EEEEEE; border-top:1px solid #EEEEEE; text-align:center; cursor:default;">S</td>' +

                                    '</tr>' +

                                    '<tr>';
    // set to the first day

    this.currDate.setDate(1);
    var pMonth = new Date();

    pMonth.setFullYear(this.currDate.getFullYear());

    pMonth.setMonth(this.currDate.getMonth());

    pMonth.setDate((this.currDate.getDate() - 1));

    // get current month days count

    var dCount = new Date();

    dCount.setDate(1);

    dCount.setFullYear(this.currDate.getFullYear());

    dCount.setMonth((this.currDate.getMonth() + 1));

    dCount.setDate(dCount.getDate() - 1);

/* FLAWED

    var dCount = new Date();

    dCount.setFullYear(this.currDate.getFullYear());

    dCount.setMonth((this.currDate.getMonth() + 1));

    dCount.setDate((this.currDate.getDate() - 1));

*/

    var dayCounter = 0;
    // perform the previous months last days

    for (var pMo=1; pMo <= this.currDate.getDay(); pMo++) {

        calStr +=

                            '<td align=middle style="padding:2px; font-family:Tahoma; font-size:8pt; color:#AAAAAA; border-bottom:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-left:1px solid #EEEEEE; text-align:center; cursor:default;">' + 

                                (pMonth.getDate() - this.currDate.getDay() + pMo) + 

                            '</td>';

        dayCounter++;

    }
    // now display all days in current month

    for (var cMD=0; cMD < dCount.getDate(); cMD++) {

            var validFrom = true;

            // find if this is a valid day or not

            if (typeof(this.dateFrom) != 'undefined') {

                if (this.dateFrom.getTime() > (new Date((this.currDate.getMonth() + 1) + '/' + (this.currDate.getDate() + cMD) + '/' + this.currDate.getFullYear())).getTime()) {

                    validFrom = false;

                }

            }

            var validTo = true;

            // find if this is a valid day or not

            if (typeof(this.dateTo) != 'undefined') {

                if (this.dateTo.getTime() < (new Date((this.currDate.getMonth() + 1) + '/' + (this.currDate.getDate() + cMD) + '/' + this.currDate.getFullYear())).getTime()) {

                    validTo = false;

                }

            }

            var dayInList = false;

            for (var dInd=0; dInd < this.selectedDays.length; dInd++) {

                if (this.selectedDays[dInd][0] == this.currDate.getFullYear() && 

                    this.selectedDays[dInd][1] == this.currDate.getMonth() && 

                    this.selectedDays[dInd][2] == (this.currDate.getDate() + cMD)) {

                    dayInList = true;

                }

            }

            if (validFrom == false || validTo == false) {

                calStr +=

                            '<td align=middle style="padding:2px; font-family:Tahoma; background:#EFEFEF; font-size:8pt; color:#808080; border-bottom:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-left:1px solid #EEEEEE; text-align:center; cursor:default;';

            } else {

                calStr +=

                            '<td id="__cal' + this.arrayID + '__' + this.currDate.getFullYear() + '-' + this.currDate.getMonth() + '-' + (this.currDate.getDate() + cMD) + '" ' +

                                'align=middle style="padding:2px; font-family:Tahoma; font-size:8pt; border-bottom:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-left:1px solid #EEEEEE; text-align:center; cursor:pointer;';

                if (dayInList) {

                    calStr += ' background:#006699; color:#FFFFFF;';

                } else {

                    calStr += ' background:#FFFFFF; color:#808080;';

                }

            }
            if (validFrom == false || validTo == false) {

                calStr += ' text-decoration:line-through;';

            }
            if (validFrom == true && validTo == true) {

                calStr += '" ' +

                                'onMouseOver="__calendars[' + this.arrayID + '].toggleDayHilight([' + this.currDate.getFullYear() + ',' + this.currDate.getMonth() + ',' + (this.currDate.getDate() + cMD) + '], this, true);" ';

            }
            if (validFrom == true && validTo == true) {

//                              'onClick="__calendars[' + this.arrayID + '].toggleDay([' + this.currDate.getFullYear() + ',' + this.currDate.getMonth() + ',' + (this.currDate.getDate() + cMD) + '], this, \'up\');">' + 

                calStr += '" ' +

                                'onMouseOut="__calendars[' + this.arrayID + '].toggleDayHilight([' + this.currDate.getFullYear() + ',' + this.currDate.getMonth() + ',' + (this.currDate.getDate() + cMD) + '], this, false);" ' +

                                'onMouseDown="__calendars[' + this.arrayID + '].toggleDay([' + this.currDate.getFullYear() + ',' + this.currDate.getMonth() + ',' + (this.currDate.getDate() + cMD) + '], this, \'down\');" ' + 

                                'onMouseUp="__calendars[' + this.arrayID + '].toggleDay([' + this.currDate.getFullYear() + ',' + this.currDate.getMonth() + ',' + (this.currDate.getDate() + cMD) + '], this, \'up\');">' + 

                                (this.currDate.getDate() + cMD) + 

                            '</td>';

            } else {

                calStr += '">' + (this.currDate.getDate() + cMD) + '</td>';

            }

        dayCounter++;

        if ((dayCounter % 7) == 0) {

            calStr +=

                        '</tr>';

            if (cMD != dCount.getDate()) {

                        '<tr>';

            }

        }

    }
    // display the tail end of the month

    for (var eMo=1; eMo <= (6 - dCount.getDay()); eMo++) {

        calStr +=

                            '<td align=middle style="padding:2px; font-family:Tahoma; font-size:8pt; color:#AAAAAA; border-bottom:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-left:1px solid #FFFFFF; text-align:center; cursor:default;">' + 

                                eMo + 

                            '</td>';

        dayCounter++;

    }

    calStr +=

                                '</table>' +

                            '</td>' +

                            '<td valign=top style="padding-left:5px;">' +

                                '<table cellpadding=0 cellspacing=0 border=0>' +

                                    '<tr>' +

                                        '<td align=middle style="background:#EEEEEE url(lightgray-gradient-ee.gif) bottom repeat-x; padding:1px; font-family:Tahoma; font-size:7pt; color:#000000; border-right:1px solid #CCCCCC; border-left:1px solid #EEEEEE; border-top:1px solid #EEEEEE; text-align:center; cursor:default;">S</td>' +

                                        '<td align=middle style="background:#EEEEEE url(lightgray-gradient-ee.gif) bottom repeat-x; padding:1px; font-family:Tahoma; font-size:7pt; color:#000000; border-right:1px solid #CCCCCC; border-left:1px solid #EEEEEE; border-top:1px solid #EEEEEE; text-align:center; cursor:default;">M</td>' +

                                        '<td align=middle style="background:#EEEEEE url(lightgray-gradient-ee.gif) bottom repeat-x; padding:1px; font-family:Tahoma; font-size:7pt; color:#000000; border-right:1px solid #CCCCCC; border-left:1px solid #EEEEEE; border-top:1px solid #EEEEEE; text-align:center; cursor:default;">T</td>' +

                                        '<td align=middle style="background:#EEEEEE url(lightgray-gradient-ee.gif) bottom repeat-x; padding:1px; font-family:Tahoma; font-size:7pt; color:#000000; border-right:1px solid #CCCCCC; border-left:1px solid #EEEEEE; border-top:1px solid #EEEEEE; text-align:center; cursor:default;">W</td>' +

                                        '<td align=middle style="background:#EEEEEE url(lightgray-gradient-ee.gif) bottom repeat-x; padding:1px; font-family:Tahoma; font-size:7pt; color:#000000; border-right:1px solid #CCCCCC; border-left:1px solid #EEEEEE; border-top:1px solid #EEEEEE; text-align:center; cursor:default;">T</td>' +

                                        '<td align=middle style="background:#EEEEEE url(lightgray-gradient-ee.gif) bottom repeat-x; padding:1px; font-family:Tahoma; font-size:7pt; color:#000000; border-right:1px solid #CCCCCC; border-left:1px solid #EEEEEE; border-top:1px solid #EEEEEE; text-align:center; cursor:default;">F</td>' +

                                        '<td align=middle style="background:#EEEEEE url(lightgray-gradient-ee.gif) bottom repeat-x; padding:1px; font-family:Tahoma; font-size:7pt; color:#000000; border-right:1px solid #CCCCCC; border-left:1px solid #EEEEEE; border-top:1px solid #EEEEEE; text-align:center; cursor:default;">S</td>' +

                                    '</tr>' +

                                    '<tr>';
    // set to the first day

    this.currDate.setMonth((this.currDate.getMonth() + 1));

    this.currDate.setDate(1);
    var pMonth = new Date();

    pMonth.setFullYear(this.currDate.getFullYear());

    pMonth.setMonth(this.currDate.getMonth());

    pMonth.setDate((this.currDate.getDate() - 1));

    // get current month days count

    var dCount = new Date();

    dCount.setDate(1);

    dCount.setFullYear(this.currDate.getFullYear());

    dCount.setMonth((this.currDate.getMonth() + 1));

    dCount.setDate(dCount.getDate() - 1);

/* FLAWED

    var dCount = new Date();

    dCount.setFullYear(this.currDate.getFullYear());

    dCount.setMonth((this.currDate.getMonth() + 1));

    dCount.setDate((this.currDate.getDate() - 1));

*/

    var dayCounter = 0;
    // perform the previous months last days

    for (var pMo=1; pMo <= this.currDate.getDay(); pMo++) {

        calStr +=

                            '<td align=middle style="padding:2px; font-family:Tahoma; font-size:8pt; color:#AAAAAA; border-bottom:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-left:1px solid #EEEEEE; text-align:center; cursor:default;">' + 

                                (pMonth.getDate() - this.currDate.getDay() + pMo) + 

                            '</td>';

        dayCounter++;

    }
    // now display all days in current month

    for (var cMD=0; cMD < dCount.getDate(); cMD++) {

            var validFrom = true;

            // find if this is a valid day or not

            if (typeof(this.dateFrom) != 'undefined') {

                if (this.dateFrom.getTime() > (new Date((this.currDate.getMonth() + 1) + '/' + (this.currDate.getDate() + cMD) + '/' + this.currDate.getFullYear())).getTime()) {

                    validFrom = false;

                }

            }

            var validTo = true;

            // find if this is a valid day or not

            if (typeof(this.dateTo) != 'undefined') {

                if (this.dateTo.getTime() < (new Date((this.currDate.getMonth() + 1) + '/' + (this.currDate.getDate() + cMD) + '/' + this.currDate.getFullYear())).getTime()) {

                    validTo = false;

                }

            }

            var dayInList = false;

            for (var dInd=0; dInd < this.selectedDays.length; dInd++) {

                if (this.selectedDays[dInd][0] == this.currDate.getFullYear() && 

                    this.selectedDays[dInd][1] == this.currDate.getMonth() && 

                    this.selectedDays[dInd][2] == (this.currDate.getDate() + cMD)) {

                    dayInList = true;

                }

            }

            if (validFrom == false || validTo == false) {

                calStr +=

                            '<td align=middle style="padding:2px; font-family:Tahoma; background:#EFEFEF; font-size:8pt; color:#808080; border-bottom:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-left:1px solid #EEEEEE; text-align:center; cursor:default;';

            } else {

                calStr +=

                            '<td id="__cal' + this.arrayID + '__' + this.currDate.getFullYear() + '-' + this.currDate.getMonth() + '-' + (this.currDate.getDate() + cMD) + '" ' +

                                'align=middle style="padding:2px; font-family:Tahoma; font-size:8pt; border-bottom:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-left:1px solid #EEEEEE; text-align:center; cursor:pointer;';

                if (dayInList) {

                    calStr += ' background:#006699; color:#FFFFFF;';

                } else {

                    calStr += ' background:#FFFFFF; color:#808080;';

                }

            }
            if (validFrom == false || validTo == false) {

                calStr += ' text-decoration:line-through;';

            }
            if (validFrom == true && validTo == true) {

                calStr += '" ' +

                                'onMouseOver="__calendars[' + this.arrayID + '].toggleDayHilight([' + this.currDate.getFullYear() + ',' + this.currDate.getMonth() + ',' + (this.currDate.getDate() + cMD) + '], this, true);" ';

            }
            if (validFrom == true && validTo == true) {

//                              'onClick="__calendars[' + this.arrayID + '].toggleDay([' + this.currDate.getFullYear() + ',' + this.currDate.getMonth() + ',' + (this.currDate.getDate() + cMD) + '], this, \'up\');">' + 

                calStr += '" ' +

                                'onMouseOut="__calendars[' + this.arrayID + '].toggleDayHilight([' + this.currDate.getFullYear() + ',' + this.currDate.getMonth() + ',' + (this.currDate.getDate() + cMD) + '], this, false);" ' +

                                'onMouseDown="__calendars[' + this.arrayID + '].toggleDay([' + this.currDate.getFullYear() + ',' + this.currDate.getMonth() + ',' + (this.currDate.getDate() + cMD) + '], this, \'down\');" ' + 

                                'onMouseUp="__calendars[' + this.arrayID + '].toggleDay([' + this.currDate.getFullYear() + ',' + this.currDate.getMonth() + ',' + (this.currDate.getDate() + cMD) + '], this, \'up\');">' + 

                                (this.currDate.getDate() + cMD) + 

                            '</td>';

            } else {

                calStr += '">' + (this.currDate.getDate() + cMD) + '</td>';

            }

        dayCounter++;

        if ((dayCounter % 7) == 0) {

            calStr +=

                        '</tr>';

            if (cMD != dCount.getDate()) {

                        '<tr>';

            }

        }

    }
    // display the tail end of the month

    for (var eMo=1; eMo <= (6 - dCount.getDay()); eMo++) {

        calStr +=

                            '<td align=middle style="padding:2px; font-family:Tahoma; font-size:8pt; color:#AAAAAA; border-bottom:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-left:1px solid #FFFFFF; text-align:center; cursor:default;">' + 

                                eMo + 

                            '</td>';

        dayCounter++;

    }

    calStr +=

                                '</table>' +

                            '</td>' +

                        '</tr>' +

                        '<tr>' +

                            '<td colspan=2 id="__cal' + this.arrayID + '__message" align="left" style="font-family:Tahoma; font-size:7pt; padding:2px;">' +

                                'Select a date from the calendar above' +

                            '</td>' +

                        '</tr>' +

                    '</table>' +

                '</td>' +

                '<td style="background:url(mr.gif) right top repeat-y; height:6px;"><img width="1" height="6" border=0 src="_blank.gif"></td>' +

            '</tr>' +

            '<tr>' +

                '<td style="background:url(bl.gif) no-repeat; height:6px;"><img width="1" height="6" border=0 src="_blank.gif"></td>' +

                '<td style="background:url(br.gif) right top no-repeat; height:6px; width:6px;"><img width="6" height="6" border=0 src="_blank.gif"></td>' +

            '</tr>' +

        '</table>';

    this.currDate.setMonth((this.currDate.getMonth() - 1));
    if (typeof(alreadyLoaded) != 'undefined' && alreadyLoaded == true) {

        document.getElementById(this.uniqueName).innerHTML = calStr;

    } else {

        return '<div id="' + this.uniqueName + '">' + calStr + '</div>';

    }

}
Calendar.prototype.toggleDay = function (day, divBlock, buttonEvent) {
    var dayInList = (-1);
    for (var dInd=0; dInd < this.selectedDays.length; dInd++) {

        if (this.selectedDays[dInd][0] == day[0] && 

            this.selectedDays[dInd][1] == day[1] && 

            this.selectedDays[dInd][2] == day[2]) {

            dayInList = dInd;

        }

    }
    if (dayInList == (-1) && this.startTally.length == 0 && buttonEvent == 'down') {

        divBlock.style.background='#006699';

        divBlock.style.color='#FFFFFF';

        this.selectedDays.push(day);

        this.startTally = day;

        this.toggleDayHilight(day, divBlock, true);

        this.selectedDays.sort(function(a, b) { return (new Date(a[0], a[1], a[2])).getTime() - (new Date(b[0], b[1], b[2])).getTime() })

    } else if (this.startTally.length > 0 && buttonEvent == 'up') {
        var countDays = 1;

        var tallyDest = new Date(day[0], (parseInt(day[1]) + 0), day[2]);

        var tallyNew = new Date(this.startTally[0], (parseInt(this.startTally[1]) + 0), this.startTally[2]);

        var tallyPivot = new Date(this.startTally[0], (parseInt(this.startTally[1]) + 0), this.startTally[2]);
        while (tallyNew.getFullYear() != tallyDest.getFullYear() ||

            tallyNew.getMonth() != tallyDest.getMonth() ||

            tallyNew.getDate() != tallyDest.getDate()) {
            countDays++;
            if (tallyNew.getTime() < tallyDest.getTime()) {

                tallyNew.setDate(tallyNew.getDate() + 1);

            } else {

                tallyNew.setDate(tallyNew.getDate() - 1);

            }
            var newDayInList = false;

            for (var dInd=0; dInd < this.selectedDays.length; dInd++) {

                if (this.selectedDays[dInd][0] == tallyNew.getFullYear() && 

                    this.selectedDays[dInd][1] == tallyNew.getMonth() && 

                    this.selectedDays[dInd][2] == tallyNew.getDate()) {

                    newDayInList = true;

                }

            }
            var newDivBlock = document.getElementById('__cal' + this.arrayID + '__' + tallyNew.getFullYear() + '-' + tallyNew.getMonth() + '-' + tallyNew.getDate());
            if (!newDayInList && countDays <= this.maxDays && newDivBlock