JavaScriptのカレンダー（1）

カレンダー。とりあえず、書いてみた。last_day_of_monthは、id:clonedさんのを。

• JavaScriptで月の最終日を取得する - cloned.log

Date.prototype.last_day_of_month = function() {
	var d = new Date( this.getYear(), this.getMonth(), this.getDate());
	d.setMonth(d.getMonth() + 1);
	d.setDate(1);
	d.setTime(d.getTime() - 1);
	return d.getDate();
};

//
var today = new Date();
var date  = new Date();

var weekDay = new Array('日','月','火','水','木','金','土');    //
var year  = date.getYear() + 1900;
var month = date.getMonth() + 1;
var day   = date.getDay();
date.setDate(1);
var firstDay = date.getDay();
var Line  = Math.ceil((firstDay+date.last_day_of_month())/7);    // 1ヶ月の週
var cal   = new Array();    // カレンダーの配列
var calHTML = '';    // カレンダーのHTML

for( var i=0; i<Line*7; i++ ){
	var day = {
		'day':''
	};
	if(i>=firstDay && (i-firstDay) < date.last_day_of_month()){
		day['year']  = year;
		day['month'] = month;
		day['day']  = (i+1)-firstDay;    // 日付
		date.setDate(day['day']);
		day['week'] = Math.floor(i/7);    // 第何週
		day['wDay'] = weekDay[date.getDay()];    // 曜日
		if(date.getTime() == today.getTime()){
			day['isToday'] = true;
		}
		if(date.getTime() > today.getTime()){
			day['isWill'] = true;
		}
		cal[i] = day;
	}else{
		cal[i] = day;
	}
}


//alert(date);

/*
for(var i=0; i<cal.length; i++){
	$('cal').innerHTML += cal[i]['year'] + '/';
	$('cal').innerHTML += cal[i]['month'] + '/';
	$('cal').innerHTML += cal[i]['day'] + '/';
	$('cal').innerHTML += cal[i]['week'] + '/';
	$('cal').innerHTML += cal[i]['wDay'] + '/';
	if(cal[i]['isWill']){
		$('cal').innerHTML += '未来';
	}
	$('cal').innerHTML += '<br>';
}
*/

// HTML
calHTML += '<table border="1">';
for(var i=0; i<Line; i++){
	calHTML += '<tr>';
	for(var j=0; j<7; j++){
		calHTML += '<td>';
		if(cal[j+(i*7)]['isWill']){
			calHTML += '<span style="color:#cccccc;">';
		}
		if(cal[j+(i*7)]['isToday']){
			calHTML += '<strong>';
		}
		calHTML += cal[j+(i*7)]['day'];
		if(cal[j+(i*7)]['isToday']){
			calHTML += '</strong>';
		}
		if(cal[j+(i*7)]['isWill']){
			calHTML += '</span>';
		}
		calHTML += '</td>';
	}
	calHTML += '</tr>';
}
calHTML += '</table>';

$('cal').innerHTML = calHTML;