Javascript calendar

<html>
<body>

  <style type="text/css">
    span.label {color:black;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 13px Arial}
    span.c1 {cursor:hand;color:black;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 13px Arial}
    span.c2 {cursor:hand;color:red;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 13px Arial}
    span.c3 {cursor:hand;color:#b0b0b0;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 12px Arial}
  </style>

  <script type="text/javascript">
    function maxDays(mm, yyyy){
      var mDay;
      if((mm == 3) || (mm == 5) || (mm == 8) || (mm == 10)){
        mDay = 30;
      }
      else{
        mDay = 31
        if(mm == 1){
          if (yyyy/4 - parseInt(yyyy/4) != 0){
            mDay = 28
          }
          else{
            mDay = 29
          }
        }
      }
      return mDay;
    }
    function changeBg(id){
      if (eval(id).style.backgroundColor != "yellow"){
        eval(id).style.backgroundColor = "yellow"
      }
      else{
        eval(id).style.backgroundColor = "#ffffff"
      }
    }
    function writeCalendar(){
      var now = new Date
      var dd = now.getDate()
      var mm = now.getMonth()
      var dow = now.getDay()
      var yyyy = now.getFullYear()
      var arrM = new Array("January","February","March","April","May","June","July","August","September","October","November","December")
      var arrY = new Array()
      for (ii=0;ii<=4;ii++){
        arrY[ii] = yyyy - 2 + ii
      }
      var arrD = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat")

      var text = ""
      text = "<form name=calForm>"
      text += "<table border=1>"
      text += "<tr><td>"
      text += "<table width=100%><tr>"
      text += "<td align=left>"
      text += "<select name=selMonth onChange='changeCal()'>"
      for (ii=0;ii<=11;ii++){
        if (ii==mm){
          text += "<option value= " + ii + " Selected>" + arrM[ii] + "</option>"
        }
        else{
          text += "<option value= " + ii + ">" + arrM[ii] + "</option>"
        }
      }
      text += "</select>"
      text += "</td>"
      text += "<td align=right>"
      text += "<select name=selYear onChange='changeCal()'>"
      for (ii=0;ii<=4;ii++){
        if (ii==2){
          text += "<option value= " + arrY[ii] + " Selected>" + arrY[ii] + "</option>"
        }
        else{
          text += "<option value= " + arrY[ii] + ">" + arrY[ii] + "</option>"
        }
      }
      text += "</select>"
      text += "</td>"
      text += "</tr></table>"
      text += "</td></tr>"
      text += "<tr><td>"
      text += "<table border=1>"
      text += "<tr>"
      for (ii=0;ii<=6;ii++){
        text += "<td align=center><span class=label>" + arrD[ii] + "</span></td>"
      }
      text += "</tr>"
      aa = 0
      for (kk=0;kk<=5;kk++){
        text += "<tr>"
        for (ii=0;ii<=6;ii++){
          text += "<td align=center><span id=sp" + aa + " onClick='changeBg(this.id)'>1</span></td>"
          aa += 1
        }
        text += "</tr>"
      }
      text += "</table>"
      text += "</td></tr>"
      text += "</table>"
      text += "</form>"
      document.write(text)
      changeCal()
    }
    function changeCal(){
      var now = new Date
      var dd = now.getDate()
      var mm = now.getMonth()
      var dow = now.getDay()
      var yyyy = now.getFullYear()
      var currM = parseInt(document.calForm.selMonth.value)
      var prevM
      if (currM!=0){
        prevM = currM - 1
      }
      else{
        prevM = 11
      }
      var currY = parseInt(document.calForm.selYear.value)
      var mmyyyy = new Date()
      mmyyyy.setFullYear(currY)
      mmyyyy.setMonth(currM)
      mmyyyy.setDate(1)
      var day1 = mmyyyy.getDay()
      if (day1 == 0){
        day1 = 7
      }
      var arrN = new Array(41)
      var aa
      for (ii=0;ii<day1;ii++){
        arrN[ii] = maxDays((prevM),currY) - day1 + ii + 1
      }
      aa = 1
      for (ii=day1;ii<=day1+maxDays(currM,currY)-1;ii++){
        arrN[ii] = aa
        aa += 1
      }
      aa = 1
      for (ii=day1+maxDays(currM,currY);ii<=41;ii++){
        arrN[ii] = aa
        aa += 1
      }
      for (ii=0;ii<=41;ii++){
        eval("sp"+ii).style.backgroundColor = "#FFFFFF"
      }
      var dCount = 0
      for (ii=0;ii<=41;ii++){
        if (((ii<7)&&(arrN[ii]>20))||((ii>27)&&(arrN[ii]<20))){
          eval("sp"+ii).innerHTML = arrN[ii]
          eval("sp"+ii).className = "c3"
        }
        else{
          eval("sp"+ii).innerHTML = arrN[ii]
          if ((dCount==0)||(dCount==6)){
            eval("sp"+ii).className = "c2"
          }
          else{
            eval("sp"+ii).className = "c1"
          }
          if ((arrN[ii]==dd)&&(mm==currM)&&(yyyy==currY)){
            eval("sp"+ii).style.backgroundColor="#90EE90"
          }
        }
        dCount += 1
        if (dCount>6){
          dCount=0
        }
      }
    }
  </script>

  <script type="text/javascript">writeCalendar()</script>


</body>
</html>

References

html javascript

🇨🇳 🇯🇵 📍 ⌚