Posted at

non-jQuery でカレンダー生成スクリプトを書いてみた

More than 1 year has passed since last update.

Teratailの質問に 「Javascript ==再度【カレンダー】の作成に」を見つけて、コード書いてみたんですが、質問文を読むと回答する気が無くなったので、ここに。

<!DOCTYPE HTML>

<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

<div id="calendar"></div>

<script type="text/javascript">
function calendar(element, y, m) {

var weeks = ['', '', '', '', '', '', ''];

var start_dt = new Date(y, m - 1, 1);
start_dt.setDate(start_dt.getDate() - start_dt.getDay());
var end_dt = new Date(y, m, 0);
end_dt.setDate(end_dt.getDate() + (7 - end_dt.getDay()));

var table = document.createElement('table');
element.appendChild(table);

var caption = document.createElement('caption');
caption.innerHTML = y + '/' + m;
table.appendChild(caption);

var thead = document.createElement('thead');
table.appendChild(thead);

var tr = document.createElement('tr');
thead.appendChild(tr);
for (var i in weeks) {
var th = document.createElement('th');
th.innerHTML = weeks[i];
tr.appendChild(th);
}

var tbody = document.createElement('tbody');
table.appendChild(tbody);

while (start_dt < end_dt) {
if (start_dt.getDay() === 0) {
var tr = document.createElement('tr');
tbody.appendChild(tr);
}
var td = document.createElement('td');
td.innerHTML = start_dt.getDate();
tr.appendChild(td);

start_dt.setDate(start_dt.getDate() + 1);
}
}

calendar(document.getElementById('calendar'), 2017, 1);
</script>
</body>
</html>