JavaScript：カレンダーの作成

JavaScript で作成した簡易カレンダーです。

“<”、“>”をクリックすると、月が変わります。

 



calendar.html

<html>
<head>
<style>
#calendar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit- transform: translate(-50%, -50%);
}
/*
table {
  width: 100%;
  height: 100%;
}
*/
</style>
</head>
<body>
<div id="calendar"></div>
<script src="./calendar.js"></script>
<script>createCalendar("#calendar");</script>
</body>
</html>

 

calendar.js

var $date = new Date();
var $year = $date.getFullYear();
var $month = $date.getMonth();

function createCalendar(id) {
  $id = id;
  var first = new Date($year, $month, 1);
  var last = new Date($year, $month + 1, 0);
  var first_day = first.getDay();
  var last_date = last.getDate();
  var counter = 1;
  var calendar = "<table border='1' bordercolor='#111eee' bgcolor='#555eee' style='font-family:\"MS Gothic\"; color:#000000; border-collapse:collapse;' cellpadding='2'>";
  calendar += "<caption style='font-size:20px'>";
  calendar += "<strong style='color:blue;' onclick='decrease()'>&lt; </strong>"
  calendar += $year + "/" + ("00" + ($month + 1)).slice(-2)
  calendar += "<strong style='color:blue;' onclick='increase()'> &gt;</strong>"
  calendar += "</caption>";
  var week = ["日", "月", "火", "水", "木", "金", "土"];
  for (var j = 0; j < 7; j++) {
    calendar += "<th height='35' width='50'>" + week[j] + "</th>";
  }
  for (var i = 0; i < 6; i++) {
    calendar += "<tr height='35' align='center'>";
    for (var j = 0; j < 7; j++) {
      var bgcolor = ($year === new Date().getFullYear() && $month === new Date().getMonth() && counter === new Date().getDate()) ? "#eee555" : "";
      var date = (i == 0 && j < first_day || counter > last_date) ? "&nbsp;" : counter++;
      calendar += "<td bgcolor=" + bgcolor + ">" + date + "</td>";
    }
    calendar += "</tr>";
    //if (counter > last_date) break;
  }
  calendar += "</table>";
  document.querySelector(id).innerHTML = calendar;
}

function decrease() {
  if ($month-- == 0) {
    $year--;
    $month = 11;
  }
  createCalendar($id);
}

function increase() {
  if ($month++ == 11) {
    $year++;
    $month = 0;
  }
  createCalendar($id);
}

 

参考サイト