カレンダー

JavaScript

/**
 * カレンダーを生成
 * @param {number} [year] カレンダーとして表示する年（指定しなかった場合は現在の年が設定される）
 * @param {number} [month] カレンダーとして表示する月（指定しなかった場合は現在の月が設定される）
 * @param {number} [day] 日付部分にマークする日（指定しなかった場合は現在の月が設定される）
 * @return {Element} 生成されたカレンダーのtable要素を返す。
 */
var createCalendar = function(year, month, day) {
	var tableElem = document.createElement('table'),
	    theadElem = tableElem.createTHead(),
	    tbodyElem = tableElem.createTBody();

	var dateObj = new Date();

	if (typeof year === 'undefined') year = dateObj.getFullYear();
	if (typeof month === 'undefined') month = dateObj.getMonth() + 1;
	if (typeof day === 'undefined') day = dateObj.getDate();

	var week    = ['日', '月', '火', '水', '木', '金', '土'],
	    lastDay = (new Date(year, month, 0)).getDate(),
	    toDate  = dateObj.getFullYear() + ('0' + (dateObj.getMonth() + 1)).slice(-2) + ('0' + dateObj.getDate()).slice(-2),
	    trElem, cellElem, n, i, len;

	// 年月を追加
	var capElem = tableElem.createCaption();
	capElem.appendChild(document.createTextNode(year + '年' + month + '月'));

	// 曜日セルの追加
	trElem = theadElem.insertRow();
	week.forEach(function(val) {
		cellElem = document.createElement('th');
		cellElem.appendChild(document.createTextNode(val));
		trElem.appendChild(cellElem);
	});

	// 日付セルを追加
	for (n = 1; n <= lastDay; n++) {
		dateObj = new Date(year, month - 1, n);

		// 行を追加
		if (n === 1 || dateObj.getDay() === 0) trElem = tbodyElem.insertRow();

		// 最初のセルを埋める
		if (n === 1 && dateObj.getDay() > 0) {
			for (i = 0; i < 7 - (7 - dateObj.getDay()); i++) {
				cellElem = trElem.insertCell(-1);
				cellElem.appendChild(document.createTextNode('-'));
			}
		}

		cellElem = trElem.insertCell(-1);

		if (toDate === year + ('0' + month).slice(-2) + ('0' + n).slice(-2)) {
			cellElem.className = 'today';
		}

		cellElem.appendChild(document.createTextNode(n));
	}

	// 最後のセルを埋める
	if (dateObj.getDay() < 6) {
		for (i = 0; i < 6 - dateObj.getDay(); i++) {
			cellElem = trElem.insertCell(-1);
			cellElem.appendChild(document.createTextNode('-'));
		}
	}

	// 最後の空白行を追加（日付の行を6行に揃える）
	var rowCount = tableElem.rows.length;
	if (rowCount < 7) {
		for (n = rowCount; n < 7; n++) {
			trElem = tbodyElem.insertRow();
			for (i = 0; i < 7; i++) {
				cellElem = trElem.insertCell(-1);
				cellElem.appendChild(document.createTextNode('-'));
			}
		}
	}

	return tableElem;
};

JavaScript

// 現在の月のカレンダー
var calendarElem = createCalendar();

// 指定の年月のカレンダーを表示する場合
var calendarElem = createCalendar(2011, 5);

document.body.appendChild(calendarElem);