1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

source code of calender in javascript

Discussion in 'JavaScript and AJAX' started by skp819, Jan 29, 2009.

  1. skp819

    skp819 New Member

    Joined:
    Dec 8, 2008
    Messages:
    89
    Likes Received:
    3
    Trophy Points:
    0
    Code:
    <html>
    <head>
    <SCRIPT LANGUAGE="JavaScript">
    <!-- This script and many more are available free online at -->
    
    <!-- Begin
    var dDate = new Date();
    var dCurMonth = dDate.getMonth();
    var dCurDayOfMonth = dDate.getDate();
    var dCurYear = dDate.getFullYear();
    var objPrevElement = new Object();
    
    function fToggleColor(myElement) {
    var toggleColor = "#ff0000";
    if (myElement.id == "calDateText") {
    if (myElement.color == toggleColor) {
    myElement.color = "";
    } else {
    myElement.color = toggleColor;
       }
    } else if (myElement.id == "calCell") {
    for (var i in myElement.children) {
    if (myElement.children[i].id == "calDateText") {
    if (myElement.children[i].color == toggleColor) {
    myElement.children[i].color = "";
    } else {
    myElement.children[i].color = toggleColor;
                }
             }
          }
       }
    }
    function fSetSelectedDay(myElement){
    if (myElement.id == "calCell") {
    if (!isNaN(parseInt(myElement.children["calDateText"].innerText))) {
    myElement.bgColor = "#c0c0c0";
    objPrevElement.bgColor = "";
    document.all.calSelectedDate.value = parseInt(myElement.children["calDateText"].innerText);
    objPrevElement = myElement;
          }
       }
    }
    function fGetDaysInMonth(iMonth, iYear) {
    var dPrevDate = new Date(iYear, iMonth, 0);
    return dPrevDate.getDate();
    }
    function fBuildCal(iYear, iMonth, iDayStyle) {
    var aMonth = new Array();
    aMonth[0] = new Array(7);
    aMonth[1] = new Array(7);
    aMonth[2] = new Array(7);
    aMonth[3] = new Array(7);
    aMonth[4] = new Array(7);
    aMonth[5] = new Array(7);
    aMonth[6] = new Array(7);
    var dCalDate = new Date(iYear, iMonth-1, 1);
    var iDayOfFirst = dCalDate.getDay();
    var iDaysInMonth = fGetDaysInMonth(iMonth, iYear);
    var iVarDate = 1;
    var i, d, w;
    if (iDayStyle == 2) {
    aMonth[0][0] = "Sunday";
    aMonth[0][1] = "Monday";
    aMonth[0][2] = "Tuesday";
    aMonth[0][3] = "Wednesday";
    aMonth[0][4] = "Thursday";
    aMonth[0][5] = "Friday";
    aMonth[0][6] = "Saturday";
    } else if (iDayStyle == 1) {
    aMonth[0][0] = "Sun";
    aMonth[0][1] = "Mon";
    aMonth[0][2] = "Tue";
    aMonth[0][3] = "Wed";
    aMonth[0][4] = "Thu";
    aMonth[0][5] = "Fri";
    aMonth[0][6] = "Sat";
    } else {
    aMonth[0][0] = "Su";
    aMonth[0][1] = "Mo";
    aMonth[0][2] = "Tu";
    aMonth[0][3] = "We";
    aMonth[0][4] = "Th";
    aMonth[0][5] = "Fr";
    aMonth[0][6] = "Sa";
    }
    for (d = iDayOfFirst; d < 7; d++) {
    aMonth[1][d] = iVarDate;
    iVarDate++;
    }
    for (w = 2; w < 7; w++) {
    for (d = 0; d < 7; d++) {
    if (iVarDate <= iDaysInMonth) {
    aMonth[w][d] = iVarDate;
    iVarDate++;
          }
       }
    }
    return aMonth;
    }
    function fDrawCal(iYear, iMonth, iCellWidth, iCellHeight, sDateTextSize, sDateTextWeight, iDayStyle) {
    var myMonth;
    myMonth = fBuildCal(iYear, iMonth, iDayStyle);
    document.write("<table border='1'>")
    document.write("<tr>");
    document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][0] + "</td>");
    document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][1] + "</td>");
    document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][2] + "</td>");
    document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][3] + "</td>");
    document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][4] + "</td>");
    document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][5] + "</td>");
    document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][6] + "</td>");
    document.write("</tr>");
    for (w = 1; w < 7; w++) {
    document.write("<tr>")
    for (d = 0; d < 7; d++) {
    document.write("<td align='left' valign='top' width='" + iCellWidth + "' height='" + iCellHeight + "' id=calCell style='CURSOR:Hand' onMouseOver='fToggleColor(this)' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)>");
    if (!isNaN(myMonth[w][d])) {
    document.write("<font id=calDateText onMouseOver='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)>" + myMonth[w][d] + "</font>");
    } else {
    document.write("<font id=calDateText onMouseOver='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)> </font>");
    }
    document.write("</td>")
    }
    document.write("</tr>");
    }
    document.write("</table>")
    }
    function fUpdateCal(iYear, iMonth) {
    myMonth = fBuildCal(iYear, iMonth);
    objPrevElement.bgColor = "";
    document.all.calSelectedDate.value = "";
    for (w = 1; w < 7; w++) {
    for (d = 0; d < 7; d++) {
    if (!isNaN(myMonth[w][d])) {
    calDateText[((7*w)+d)-7].innerText = myMonth[w][d];
    } else {
    calDateText[((7*w)+d)-7].innerText = " ";
             }
          }
       }
    }
    // End -->
    </script>
    </head>
    <body>
    <script language="JavaScript" for=window event=onload>
    <!-- Begin
    var dCurDate = new Date();
    frmCalendarSample.tbSelMonth.options[dCurDate.getMonth()].selected = true;
    for (i = 0; i < frmCalendarSample.tbSelYear.length; i++)
    if (frmCalendarSample.tbSelYear.options[i].value == dCurDate.getFullYear())
    frmCalendarSample.tbSelYear.options[i].selected = true;
    //  End -->
    </script>
    
    <form name="frmCalendarSample" method="post" action="">
    <input type="hidden" name="calSelectedDate" value="">
    
    <table border="1">
    <tr>
    <td>
    <select name="tbSelMonth" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
    </select>
    
    <select name="tbSelYear" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>
    <option value="1998">1998</option>
    <option value="1999">1999</option>
    <option value="2000">2000</option>
    <option value="2001">2001</option>
    <option value="2002">2002</option>
    <option value="2003">2003</option>
    <option value="2004">2004</option>
    </select>
    </td>
    </tr>
    <tr>
    <td>
    <script language="JavaScript">
    var dCurDate = new Date();
    fDrawCal(dCurDate.getFullYear(), dCurDate.getMonth()+1, 30, 30, "12px", "bold", 1);
    </script>
    </td>
    </tr>
    </table>
    </form>
    </body>
    </html>
    
     
    shabbir likes this.

Share This Page