開発環境 メモ帳
実行環境 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