開発環境 |
メモ帳 |
実行環境 |
Internet Explorer 11 |
calendar.html
<!doctype html>
<head>
<title>calendar</title>
</head>
<body>
<table>
<tr><td>西暦</td><td><input id="year" value="2014"/></td></tr>
<tr><td>月</td><td><input id="month" value="9"/></td></tr>
</table>
<button onclick="disp()">disp</button>
<svg id="svg"></svg>
<script>
var svg = document.getElementById("svg");
function disp()
{
const week = ["日", "月", "火", "水", "木", "金", "土"];
var year = parseInt(document.getElementById("year").value);
var month = parseInt(document.getElementById("month").value);
var date = new Date(year, month - 1, 1);
while (svg.firstChild) {
svg.removeChild(svg.firstChild);
}
for (var i = 0; i < week.length; i++) {
appendText(i * 50, 50, week[i]);
}
var row = 0;
for (var d = 1; ; d++) {
date.setDate(d);
if (date.getMonth() != month - 1) break;
var day = date.getDay();
appendText(day * 50, 100 + row * 50, d);
if (day == 6) row++;
}
}
function append(tag, attr)
{
var e = document.createElementNS("http://www.w3.org/2000/svg", tag);
for (var n in attr) {
e.setAttribute(n, attr[n]);
}
svg.appendChild(e);
return e;
}
function appendText(x, y, text)
{
var e = append("text", {x:x, y:y});
e.textContent = text;
}
</script>
</body>
最終更新:2014年09月10日 12:05