Ask Me Help Desk

Ask Me Help Desk (https://www.askmehelpdesk.com/forum.php)
-   Javascript (https://www.askmehelpdesk.com/forumdisplay.php?f=452)
-   -   JavaScript two month calendar (https://www.askmehelpdesk.com/showthread.php?t=95981)

  • May 26, 2007, 09:41 AM
    ajaydesai
    JavaScript two month calendar
    I have JavaScript code to display two month calendar days at a time, but I have a problem both month that disaplay at a time have same days (for example May and June has same days, June and July have same days etc.) Instate of correct days. Here is my code from 3 files.
    ************************************************** *************************************
    calendr.js file:

    isIE = (document.all ? True : false);
    isDOM = (document.getElementById ? True : false);

    // Initializing arrays
    var months = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul",
    "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul",
    "Aug", "Sep", "Oct", "Nov", "Dec");
    var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,
    30, 31, 30, 31, 31, 28, 31, 30, 31, 30, 31, 31,
    30, 31, 30, 31);

    var displayMonth = new Date().getMonth();
    var displayYear = new Date().getFullYear();
    var displayDivName;
    var displayElement;

    function getDays(month, year) {
    // Check for leap year when February is selected
    if (1 == month)
    return ((0 == year % 4) && (0 != (year % 100))) ||
    (0 == year % 400) ? 29 : 28;
    else
    return daysInMonth[month];

    }

    function getToday() {
    // Create today's date.
    this.now = new Date();
    this.year = this.now.getFullYear();
    this.month = this.now.getMonth();
    this.day = this.now.getDate();
    }

    // Start calendar with today
    today = new getToday();

    function newCalendar(eltName,attachedElement) {
    if (attachedElement) {
    if (displayDivName && displayDivName != eltName) hideElement(displayDivName);
    displayElement = attachedElement;
    }

    displayDivName = eltName;
    today = new getToday();
    var parseYear = parseInt(displayYear + '');
    var newCal = new Date(parseYear,displayMonth,1);
    var day = -1;
    var startDayOfWeek = newCal.getDay();

    if ((today.year == newCal.getFullYear()) &&
    (today.month == newCal.getMonth()))
    {
    day = today.day;
    }

    var intDaysInMonth =
    getDays(newCal.getMonth(), newCal.getFullYear());


    var daysGrid = makeDaysGrid(startDayOfWeek,day,intDaysInMonth,new Cal,eltName)

    if (isIE) {
    var elt = document.all[eltName];
    elt.innerHTML = daysGrid;
    } else if (isDOM) {
    var elt = document.getElementById(eltName);
    elt.innerHTML = daysGrid;
    } else {
    var elt = document.layers[eltName].document;
    elt.open();
    elt.write(daysGrid);
    elt.close();
    }
    }

    function incMonth(delta,eltName) {
    displayMonth = displayMonth+delta;
    if (displayMonth >= 12) {
    displayMonth = 0;
    incYear(1,eltName);
    } else if (displayMonth <= -1) {
    displayMonth = 11;
    incYear(-1,eltName);
    } else {
    newCalendar(eltName);
    }
    }

    function incYear(delta,eltName) {
    displayYear = parseInt(displayYear + '') + delta;
    newCalendar(eltName);
    }

    function makeDaysGrid(startDay,day,intDaysInMonth,newCal,el tName) {
    var daysGrid;
    var month = newCal.getMonth();
    var year = newCal.getFullYear();
    var isThisYear = (year == new Date().getFullYear());
    var isThisMonth = (day > -1)

    daysGrid = '<table border=1 cellspacing=0 cellpadding=2><tr><td bgcolor=#ffffff nowrap>';
    daysGrid += '<font face="courier new, courier" size=2>';
    daysGrid += '&nbsp;&nbsp;';

    if (isThisMonth) {daysGrid += '&nbsp;&nbsp;';}
    else
    {daysGrid += '<a href="javascript:incMonth(-1,\'' + eltName + '\')"><img src="https://images.hertz.com/misc/arrow_lft.gif" border="0" valign="bottom"></a>';}

    daysGrid += '<b>';
    if (isThisMonth) { daysGrid += '<font color=#ffcc00>' + months[month] + '</font>'; }
    else { daysGrid += months[month]; }
    daysGrid += '</b>';

    daysGrid += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;';
    daysGrid += months[month+1];

    daysGrid += '<a href="javascript:incMonth(1,\'' + eltName + '\')"><img src="https://images.hertz.com/misc/arrow_rgt.gif" border="0" valign="bottom"></a>';
    daysGrid += '&nbsp;&nbsp;&nbsp;';

    daysGrid += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:hideElement(\'' + eltName + '\')">x</a><br>';
    daysGrid += '<b>&nbsp;S&nbsp; M&nbsp; T&nbsp; W&nbsp; T&nbsp; F&nbsp; S&nbsp;</b>&nbsp;&nbsp;&nbsp;<br>';


    var dayOfMonthOfFirstSunday = (7 - startDay + 1);
    for (var intWeek = 0; intWeek < 6; intWeek++) {
    var dayOfMonth;
    for (var intDay = 0; intDay < 7; intDay++) {
    dayOfMonth = (intWeek * 7) + intDay + dayOfMonthOfFirstSunday - 7;

    if (dayOfMonth <= 0) {
    daysGrid += "&nbsp;&nbsp; ";
    } else if (dayOfMonth <= intDaysInMonth) {
    var color = "#3366AA";
    if (day > 0 && day == dayOfMonth) color="#ffcc00";

    daysGrid += '<a href="javascript:setDay(';
    daysGrid += dayOfMonth + ',\'' + eltName + '\')" '
    daysGrid += 'style="color:' + color + '">';
    var dayString = dayOfMonth + "</a> ";
    if (dayString.length == 6) dayString = '0' + dayString;
    daysGrid += dayString;
    }
    }


    if (dayOfMonth < intDaysInMonth) daysGrid += "<br>&nbsp;";
    }



    daysGrid += '<br><br>' + months[month+1] + '<br>';

    daysGrid += '<br><b>&nbsp;S&nbsp; M&nbsp; T&nbsp; W&nbsp; T&nbsp; F&nbsp; S&nbsp;</b><br>&nbsp;';


    var dayOfMonthOfFirstSunday = (7 - startDay + 1);
    for (var intWeek = 0; intWeek < 6; intWeek++) {
    var dayOfMonth;
    for (var intDay = 0; intDay < 7; intDay++) {
    dayOfMonth = (intWeek * 7) + intDay + dayOfMonthOfFirstSunday - 7;

    if (dayOfMonth <= 0) {
    daysGrid += "&nbsp;&nbsp; ";
    } else if (dayOfMonth <= intDaysInMonth) {
    var color = "#3366AA";
    if (day > 0 && day == dayOfMonth) color="#ffcc00";

    daysGrid += '<a href="javascript:setDay(';
    daysGrid += dayOfMonth + ',\'' + eltName + '\')" '
    daysGrid += 'style="color:' + color + '">';
    var dayString = dayOfMonth + "</a> ";
    if (dayString.length == 6) dayString = '0' + dayString;
    daysGrid += dayString;
    }
    }


    if (dayOfMonth < intDaysInMonth) daysGrid += "<br>&nbsp;";
    }



    return daysGrid + "</td></tr></table>";
    }


    function setDay(day,eltName) {
    displayElement.value = (displayMonth + 1) + "/" + day + "/" + displayYear;
    hideElement(eltName);
    }

    ************************************************** **********************************
    leisure_cal.js file:

    isIE = (document.all ? True : false);
    isDOM = (document.getElementById ? True : false);
    function getAbsX(elt) { return (elt.x) ? Elt.x : getAbsPos(elt,"Left"); }
    function getAbsY(elt) { return (elt.y) ? Elt.y : getAbsPos(elt,"Top"); }

    function getAbsPos(elt,which) {
    iPos = 0;
    while (elt != null) {
    iPos += elt["offset" + which];
    elt = elt.offsetParent;
    }
    return iPos;
    }

    function getDivStyle(divname) {
    var style;
    if (isDOM) { style = document.getElementById(divname).style; }
    else { style = isIE ? Document.all[divname].style
    : document.layers[divname]; }
    return style;
    }

    function hideElement(divname) {
    getDivStyle(divname).visibility = 'hidden';
    }

    function moveBy(elt,deltaX,deltaY) {
    elt.left = parseInt(elt.left) + deltaX;
    elt.top = parseInt(elt.top) + deltaY;
    }

    function toggleVisible(divname) {
    divstyle = getDivStyle(divname);
    if (divstyle.visibility == 'visible' || divstyle.visibility == 'show') {
    divstyle.visibility = 'hidden';
    } else {
    fixPosition(divname);
    divstyle.visibility = 'visible';
    }
    }

    function setPosition(elt,positionername,isPlacedUnder) {
    var positioner;
    if (isIE) {
    positioner = document.all[positionername];
    } else {
    if (isDOM) {
    positioner = document.getElementById(positionername);
    } else {
    positioner = document.images[positionername];
    }
    }
    elt.left = getAbsX(positioner);
    elt.top = getAbsY(positioner) + (isPlacedUnder ? Positioner.height : 0);
    }
    ************************************************** *********************************
    calendar.html file:

    <html>
    <head><title>DHTML Calendar</title>
    <script language="JavaScript1.2" src="leisure_cal.js"></script>
    <script language="JavaScript1.2" src="calendar.js"></script>

    <script language="JavaScript1.2">
    <!--

    function fixPosition(divname) {
    divstyle = getDivStyle(divname);
    positionerImgName = divname + 'Pos';
    isPlacedUnder = false;
    if (isPlacedUnder) {
    setPosition(divstyle,positionerImgName,true);
    } else {
    setPosition(divstyle,positionerImgName)
    }
    }

    function toggleDatePicker(eltName,formElt) {
    var x = formElt.indexOf('.');
    var formName = formElt.substring(0,x);
    var formEltName = formElt.substring(x+1);
    newCalendar(eltName,document.forms[formName].elements[formEltName]);
    toggleVisible(eltName);
    }

    function fixPositions()
    {
    fixPosition('daysOfMonth');
    fixPosition('daysOfMonth2');


    }



    // -->
    </script>

    </head>

    <body onresize="fixPositions()">

    <form name="date">

    <center>
    <table border=0>
    <tr>
    <td>Pick-Up Date:&nbsp;</td>
    <td><INPUT name=ret size="10" onmouseup="toggleDatePicker('daysOfMonth','date.re t')" id=daysOfMonthPos name=daysOfMonthPos align=absmiddle><div id="daysOfMonth" style="position:absolute;"></div></td>
    </tr>

    <tr>
    <td>Return Date:&nbsp;</td>
    <td><INPUT name=ret2 size="10" onmouseup="toggleDatePicker('daysOfMonth2','date.r et2')" id=daysOfMonth2Pos name=daysOfMonth2Pos align=absmiddle><div id="daysOfMonth2" style="position:absolute;"></div></td>
    </tr>
    </table>
    </center>

    </form>

    <SCRIPT language=JavaScript1.2>
    function Cancel() {
    hideElement("daysOfMonth");
    }
    </SCRIPT>

    <script language="JavaScript1.2">
    <!--
    hideElement('daysOfMonth');
    hideElement('daysOfMonth2');
    //-->
    </script>

  • All times are GMT -7. The time now is 04:23 AM.