JavaScriptでカレンダー

javascript

ググればいくらでもサンプルは転がってるんだけど、なんとなく作ってみた。
ただ、document.writeでゴリゴリやってるのを結構見掛けるんで、折角なんでDOMで。
つっても、イヌでもわかるJavaScript講座の月間カレンダーに挑戦ってのをDOMに焼き直しただけ…(汗

ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>JavaScript Calendar</title>
<style type="text/css">
table#myCalendar {
	border-collapse: collapse;
	font: normal 0.6em Verdana;
}
table#myCalendar caption {
	text-align: center;
}
table#myCalendar td {
	width: 2.8em;
	line-height: 1.6em;
	text-align: center;
	border: solid 1px #a9a9a9;
}
table#myCalendar td.tod {
	color: #fff;
	background-color: #5279E7;
}
</style>
<script type="text/javascript">

function $e(argTagName) { return document.createElement(argTagName); }
function $t(argStr) { return document.createTextNode(argStr); }

function makeCalendar() {

	var wdText_E = [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ];
	var wdText_J = [ '日', '月', '火', '水', '木', '金', '土' ];
	var monthEnd = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];

	var now = new Date();
	var thisYear  = now.getFullYear();
	var thisMonth = now.getMonth();
	var today     = now.getDate();
	now.setDate(1)
	var firstWD   = now.getDay();
	
	var cls = /*@cc_on!@*/false ? 'className': 'class';

	monthEnd[1] = (((thisYear % 4 == 0) && (thisYear % 100 != 0)) || (thisYear % 400 == 0)) ? 29: 28;

	var calRows = Math.ceil((monthEnd[thisMonth] + firstWD) / 7);
	var cells   = new Array(calRows * 7);
	for (var i = 0; i < monthEnd[thisMonth]; i++) {
		cells[i + firstWD] = i + 1;
	}

	var elmTR; var elmTD; var txt;
	
	var elmTable = $e('TABLE'); var elmCap = $e('CAPTION');
	var elmTbody = $e('TBODY');
	
	txt = $t('' + thisYear + '.' + (thisMonth + 1));
	elmCap.appendChild(txt);
	elmTable.appendChild(elmCap);
	
	elmTR = $e('TR');
	for (var i = 0; i < 7; i++) {
		elmTD = $e('TD'); txt = $t(wdText_E[i]);
		elmTD.appendChild(txt); elmTR.appendChild(elmTD);
	}
	elmTbody.appendChild(elmTR);

	for (var i = 0; i < cells.length; i++) {
		if (i % 7 == 0) elmTR = $e('TR');
		elmTD = $e('TD');
		if (cells[i]) {
			txt = $t(cells[i]); elmTD.appendChild(txt);
		}
		if (cells[i] == today) elmTD.setAttribute(cls, 'tod');
		elmTR.appendChild(elmTD);
		if (i % 7 == 6) elmTbody.appendChild(elmTR);
	}
	elmTable.appendChild(elmTbody);
	elmTable.setAttribute('id', 'myCalendar');
	document.getElementById('calbox').appendChild(elmTable);

}
</script>
</head>
<body onload="makeCalendar();">
<div id="calbox">
</div>
</body>
</html>

思った事

色んな人のソースを見るってのはやっぱりいいですね。
あーこういう風にやる方がスッキリしてていいな、こういうやり方もあるんだな
ってそれだけで勉強になる。
予め、先に週数分×7の配列作ってその中に日付を格納する…って方法、
自分では思いつかなかったし。

動かすと

こんな感じになります。