Dateを使用したカレンダーの作成 〜一週間で区切る〜

前回のカレンダーをちょっと改良。日付がそのまま表示されるだけだと、どうしてもカレンダーっぽくないから、きちんと土曜日で改行されるようにしてみた。動かすのが面倒だったから、今月のみを表示する。

main.js

function disp_cal() {

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

	/*
	  カレンダーの表示
	*/
	// 現在の日付の取得
	var now = new Date();

	// 月の初日・最終日の取得
	var start = new Date(now.getYear(), now.getMonth(), 1);
	var end = new Date(now.getYear(), now.getMonth() + 1, 0);

	// 月の初日の曜日から何回ずらすかを求める
	for(var i=-(start.getDay() - 1); i<=end.getDate(); ) {
		var tr = document.createElement('tr');
		// 7日毎に改行を行う
		for(var j=0; j<6; j++) {
			var td = document.createElement('td');
			// 日付が月の内なら日付を表示
			if(i>=1 && i<=end.getDate()) {
				td.innerHTML = i;
			}
			tr.appendChild(td);
			i++;
		}
		tbody.appendChild(tr);
	}

	table.appendChild(tbody);
	document.getElementById("result").appendChild(table);
}

function load() {
	document.getElementById("result").innerHTML = "";
	disp_cal();
}

実行結果

		1	2	3	4
5	6	7	8	9	10
11	12	13	14	15	16
17	18	19	20	21	22
23	24	25	26	27	28
29	30	31

まとめ

う〜ん。。。途中のfor文が非常にトリッキー。もうちょっとうまいやり方があるんだろうけど、面倒だからこれでいい。