calendar.js

var now = new Date();
var currMonth = now.getMonth();
var currYear = now.getFullYear();
var date = now.getDate();


var weekDay = new Array(7);
weekDay[0] = "Sun";
weekDay[1] = "Mon";
weekDay[2] = "Tue";
weekDay[3] = "Wed";
weekDay[4] = "Thur";
weekDay[5] = "Fri";
weekDay[6] = "Sat";


var monthName = new Array(12);

monthName[0] = "January";
monthName[1] = "February";
monthName[2] = "March";
monthName[3] = "April";
monthName[4] = "May";
monthName[5] = "June";
monthName[6] = "July";
monthName[7] = "August";
monthName[8] = "September";
monthName[9] = "October";
monthName[10] = "November";
monthName[11] = "December";



var daysInMonth = new Array(12);

daysInMonth[0] = 31 ;
daysInMonth[1] = (leapYear(currYear)) ? 29 : 28 ;
daysInMonth[2] = 31;
daysInMonth[3] = 30;
daysInMonth[4] = 31;
daysInMonth[5] = 30;
daysInMonth[6] = 31;
daysInMonth[7] = 31;
daysInMonth[8] = 30;
daysInMonth[9] = 31;
daysInMonth[10] = 30;
daysInMonth[11] = 31;


function leapYear(currYear) {
      if (currYear % 4 == 0)
            return true;

      return false;
}


function drawCal() {

      var currDate = new Date(currYear,currMonth,1);
      var firstDay = currDate.getDay() + 1;
      var sevenDayRows = Math.ceil((firstDay + daysInMonth[currMonth])/7);

      var str="";
      str+='<TABLE class="mytable">';
      str+='<TR>';
      for(var dayNum=0;dayNum<7;dayNum++)
      str+='<TH>'+weekDay[dayNum]+'</TH>';
      str+='</TR>';


      var digit = 1;
      var currCell = 1;

      for(var rownum=0;rownum<sevenDayRows;++rownum) {
             str+='<TR>';



            for(var col=1;col<=7;col++) {

            if(digit>daysInMonth[currMonth])
                  break;

                  if(currCell<firstDay) {

                  str+='<TD></TD>';
            currCell++;
            }else {

                  if(digit == date) {
                  str+='<TD id="today">'+digit+'</TD>';

            }else

                  str+='<TD>'+digit+'</TD>';
            digit++;
            }

      }

      str+='</TR>';
      }


      str+='</TABLE>';
      $("#content").html(str);


// this sets up the form elements in the #title

      $("#monthselector").attr("selected",false);
      $("#monthselector option[value="+currMonth+"]").attr("selected",true);
      $("#yearselector option[value="+currYear+"]").attr("selected",true);

     // var selectedItem = $("#monthselector").val(); //for getting value

      $("#monthselector").change(function() {
            showCal();

      });

      $("#yearselector").change(function() {
            showCal();

      });

      $("#todayselector").click(function() {
            drawTitle();
            drawCal();
      });


             $("#prevselector").bind("click", function() {
                   diffCal();
             }
                                    )


      $("#nextselector").bind("click", function() {
            incCal();
      });

}




// This creates the title buttons and select boxes


function drawTitle() {
     var titlestr = "";
      titlestr+='<SELECT NAME="month" id="monthselector" onchange="">';
      titlestr+='<OPTION value="0">January</OPTION>';
      titlestr+='<OPTION value="1">February</OPTION>';
      titlestr+='<OPTION value="2">March</OPTION>';
      titlestr+='<OPTION value="3">April</OPTION>';
      titlestr+='<OPTION value="4">May</OPTION>';
      titlestr+='<OPTION value="5">June</OPTION>';
      titlestr+='<OPTION value="6">July</OPTION>';
      titlestr+='<OPTION value="7">August</OPTION>';
      titlestr+='<OPTION value="8">September</OPTION>';
      titlestr+='<OPTION value="9">October</OPTION>';
      titlestr+='<OPTION value="10">November</OPTION>';
      titlestr+='<OPTION value="11">December</OPTION>';

      titlestr+='<SELECT NAME="year" id=yearselector>';
      titlestr+='<OPTION>2005</OPTION>';
      titlestr+='<OPTION>2006</OPTION>';
      titlestr+='<OPTION>2007</OPTION>';
      titlestr+='<OPTION>2008</OPTION>';
      titlestr+='<OPTION>2009</OPTION>';
      titlestr+='<OPTION>2010</OPTION>';
      titlestr+='<OPTION>2011</OPTION>';
      titlestr+='<OPTION>2012</OPTION>';
      titlestr+='</SELECT>';

      titlestr+='<INPUT TYPE=BUTTON NAME="previousmonth" id=prevselector VALUE="  <  " >';
      titlestr+='<INPUT TYPE=BUTTON NAME="today" id=todayselector VALUE="Today">';
      titlestr+='<INPUT TYPE=BUTTON NAME="nextmonth" id=nextselector VALUE="  >  " >';

      $("#title").html(titlestr);
}


function showCal() {

      //here we store the selected elements
      var selectedMonth = $("#monthselector").val();
      var selectedYear = $("#yearselector").val();

      var currDate = new Date(selectedYear,selectedMonth,1);
      var firstDay = currDate.getDay() + 1;
      var sevenDayRows = Math.ceil((firstDay + daysInMonth[selectedMonth])/7);

      var str ="";
      str+='<TABLE class="mytable">';
      str+='<TR>';
      for(var dayNum=0;dayNum<7;dayNum++)
            str+='<TH>'+weekDay[dayNum]+'</TH>';
      str+='</TR>';


      var digit = 1;
      var currCell = 1;

      for(var rownum=0;rownum<sevenDayRows;rownum++) {
            str+='<TR>';



            for(var col=1;col<=7;col++) {

                  if(digit>daysInMonth[selectedMonth])
                        break;

                  if(currCell<firstDay) {

                        str+='<TD></TD>';
                        currCell++;


                  }else{

                        str+='<TD>'+digit+'</TD>';
                  digit++;
            }
            }

      }

      str+='</TR>';


str+='</TABLE>';

$("#content").html(str);
}





function diffCal() {


      var selectedMonth = $("#monthselector").val();

      if(selectedMonth==0)
      {
            var selectedYear= $("#yearselector").val()-1;
            var selectedMonth= 11;
      }
      else {
            var selectedYear = $("#yearselector").val();
            var selectedMonth = $("#monthselector").val()-1;
      }

      var currDate = new Date(selectedYear,selectedMonth,1);
      var firstDay = currDate.getDay() + 1;
      var sevenDayRows = Math.ceil((firstDay + daysInMonth[selectedMonth])/7);

      var str ="";
      str+='<TABLE class="mytable">';
      str+='<TR>';
      for(var dayNum=0;dayNum<7;dayNum++)
            str+='<TH>'+weekDay[dayNum]+'</TH>';
      str+='</TR>';


      var digit = 1;
      var currCell = 1;

      for(var rownum=0;rownum<sevenDayRows;rownum++) {
            str+='<TR>';



            for(var col=1;col<=7;col++) {

                  if(digit>daysInMonth[selectedMonth])
                        break;

                  if(currCell<firstDay) {

                        str+='<TD></TD>';
                        currCell++;


                  }else{

                        str+='<TD>'+digit+'</TD>';
                  digit++;
            }
            }

      }

      str+='</TR>';


str+='</TABLE>';

$("#content").html(str);
      var changedMonth = selectedMonth;
      var changedYear = selectedYear;

      $("#monthselector").attr("selected",false);
      $("#monthselector option[value="+changedMonth+"]").attr("selected",true);
      $("#yearselector option[value="+changedYear+"]").attr("selected",true);

}

function incCal() {


      var selectedMonth = $("#monthselector").val();

      if(selectedMonth==11)
      {
            var selectedYear= parseInt($("#yearselector").val())+1;
            var selectedMonth= 0;
      }
      else {
            var selectedMonth = parseInt($("#monthselector").val())+1;

            var selectedYear = $("#yearselector").val();

      }

      var currDate = new Date(selectedYear,selectedMonth,1);
      var firstDay = currDate.getDay() + 1;
      var sevenDayRows = Math.ceil((firstDay + daysInMonth[selectedMonth])/7);

      var str ="";
      str+='<TABLE class="mytable">';
      str+='<TR>';
      for(var dayNum=0;dayNum<7;dayNum++)
            str+='<TH>'+weekDay[dayNum]+'</TH>';
      str+='</TR>';


      var digit = 1;
      var currCell = 1;

      for(var rownum=0;rownum<sevenDayRows;rownum++) {
            str+='<TR>';



            for(var col=1;col<=7;col++) {

                  if(digit>daysInMonth[selectedMonth])
                        break;

                  if(currCell<firstDay) {

                        str+='<TD></TD>';
                        currCell++;


                  }else{

                        str+='<TD>'+digit+'</TD>';
                  digit++;
            }
            }

      }

      str+='</TR>';


str+='</TABLE>';

$("#content").html(str);
      var changedMonth = selectedMonth;
      var changedYear = selectedYear;

      $("#monthselector").attr("selected",false);
      $("#monthselector option[value="+changedMonth+"]").attr("selected",true);
      $("#yearselector option[value="+changedYear+"]").attr("selected",true);

}