JavaScript のカレンダー例

こちらのサイトでJavaScriptのカレンダーの作り方が載っていたので年間カレンダーを作ってみました。

コピペでスミマセン。センセンシャル。

http://cya.sakura.ne.jp/java/calendar.htm

window.onload = function() {
  createMonth = function(thisMonth) {
    var myDate = new Date();
    var arrWeek = new Array("日","月","火","水","木","金","土");
    var monthNum = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
    myYear = myDate.getFullYear();
    if ((myYear%4 == 0 && myYear%100 != 0) || myYear%400 == 0){
      monthNum[1] = 29;
    }
    myMonth = myDate.getMonth();
    today = myDate.getDate();
    myDate.setMonth(thisMonth);
    myDate.setDate(1);
    weekDay = myDate.getDay();
    tblLine = Math.ceil((weekDay + monthNum[thisMonth])/7);
    var tblArr = new Array(7*tblLine);
    for (i = 0; i < 7*tblLine; i++) tblArr[i] = " ";
    for (i = 0; i < monthNum[thisMonth]; i++) tblArr[i + weekDay] = i + 1;
    var title = document.createElement('caption' + thisMonth);
    var divId = document.getElementById('result' + thisMonth);
    title.innerHTML = myYear + "年" + (thisMonth+1) + "月 ";
    var table = document.createElement('table');
    divId.appendChild(title);
    divId.appendChild(table);
    table.id = 'data' + (thisMonth);
   var tbody = document.createElement('tbody');
    tbody.id = 'tbodyID';
    table.appendChild(tbody);
    var tr0 = document.createElement('tr');
    for (var i = 0; i < 7; i++) {
      var td0 = document.createElement('td');
      td0.innerHTML = arrWeek[i];
      tr0.appendChild(td0);
    }
    tbody.appendChild(tr0);
    for (var i = 0; i < tblLine; i++) {
      var tr = document.createElement('tr');
      for (var j = 0; j < 7; j++) {
        var td = document.createElement('td');
        td.innerHTML = tblArr[j + i*7];
        if (myMonth == thisMonth && tblArr[j + i*7] == today) {
          td.style.backgroundColor = 'black';
          td.style.color = 'white';
        }
        tr.appendChild(td);
      }
      tbody.appendChild(tr);
    }
  }
  for (var i = 0; i < 12; i++) {
    createMonth(i);
  }  
}
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <script type="text/javascript" src="./calendar.js"></script>
</head>
<body>
<div class="box">
<div id="result0" style="position:absolute;top:20px;left:50px"></div>
<div id="result1" style="position:absolute;top:20px;left:250px"></div>
<div id="result2" style="position:absolute;top:20px;left:450px;"></div>
<div id="result3" style="position:absolute;top:20px;left:650px;"></div>
<div id="result4" style="position:absolute;top:220px;left:50px"></div>
<div id="result5" style="position:absolute;top:220px;left:250px;"></div>
<div id="result6" style="position:absolute;top:220px;left:450px;"></div>
<div id="result7" style="position:absolute;top:220px;left:650px;"></div>
<div id="result8" style="position:absolute;top:440px;left:50px;"></div>
<div id="result9" style="position:absolute;top:440px;left:250px;"></div>
<div id="result10" style="position:absolute;top:440px;left:450px;"></div>
<div id="result11" style="position:absolute;top:440px;left:650px;"></div>
</div>
</body>
</html>