JavaScriptのカレンダー（3）

setMonth()の不思議な動き

なぜか、setDate()とかしておかないと、setMonthが正常に動かない...。

Javascript setMonthの変な仕様: 使えないプログラマー

JavaScriptで月の最終日

2月以外は固定なので2月だけ処理を入れて、Dateオブジェクトを拡張。

課題

HTMLの生成
- 日をクリックしたらイベント発生
- Dayオブジェクトをつくり、用意する
拡張性はとりあえず、あとで

ソース

Date.prototype.last_day_of_month = function() {
	var lastday = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
	var d       = new Date( this.getYear(), this.getMonth(), this.getDate() );
	var year    = d.getFullYear();
	var month   = d.getMonth();

	if(month == 1 && ((year%4)==0 && (year%100)!=0) || ((year%4)==0 && (year%400)==0) ) {
		return 29;
	}else{
		return lastday[d.getMonth()];
	}
};

//
var Day      = Class.create();
Day.prototype = {
	date: '',
	year: '',
	month: '',
	day : '',
	wDay: '',
	week: '',
	isWill: '',

	initialize:function(){
	},
	
	infomation:function(){
		alert(this.year + '/' + this.day + '(' + this.wDay + ')' );
	}
}

// 
var Calendar = Class.create();
Calendar.prototype = {
	today        : new Date(),
	date         : new Date(),
	year         : '',
	month        : '',
	weekDay      : new Array('日','月','火','水','木','金','土'),
	wDay         : '',
	firstWeekDay : '',
	line         : '',
	calArray     : new Array(),
	calHTML      : '',

	initialize:function(year,month){
		if(year){
			this.date.setFullYear(year);
			this.year = year;
		}

		if(month){
			this.date.setMonth(month-1);
			this.month = month;
		}

		this._setUp();
	},

	_setUp:function(){
		this.year  = this.date.getFullYear();
		this.month = this.date.getMonth() + 1;

		this.date.setDate(1);
		this.firstWeekDay = this.date.getDay();
		this.line         = Math.ceil((this.firstWeekDay + this.date.last_day_of_month())/7);
		this._setUpArray();
	},

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

	prev:function(){
		this.date.setDate(1);
		this.date.setMonth(this.date.getMonth() - 1);
		this.year  = this.date.getFullYear();
		this.month = this.date.getMonth()  + 1;
		this._setUp();
	},

	next:function(){
		this.date.setDate(1);
		this.date.setMonth(this.date.getMonth() + 1);
		this.year  = this.date.getFullYear();
		this.month = this.date.getMonth() + 1;

		this._setUp();
	},

	display:function(){
		this.calHTML += '<table border="1">';
		this.calHTML += '<tr><td colspan="7">';
		this.calHTML += this.year + '/' + this.month;
		this.calHTML += '</td></tr>';
		for(var i=0; i<this.line; i++){
			this.calHTML += '<tr>';
			for(var j=0; j<7; j++){
				this.calHTML += '<td>';
				if(this.calArray[j+(i*7)]['isWill']){
					this.calHTML += '<span style="color:#cccccc;">';
				}
				if(this.calArray[j+(i*7)]['isToday']){
					this.calHTML += '<strong>';
				}
				if(this.calArray[j+(i*7)]['day']){
					this.calHTML += this.calArray[j+(i*7)]['day'];
				}
				if(this.calArray[j+(i*7)]['isToday']){
					this.calHTML += '</strong>';
				}
				if(this.calArray[j+(i*7)]['isWill']){
					this.calHTML += '</span>';
				}
				this.calHTML += '</td>';
			}
			this.calHTML += '</tr>';
		}
		this.calHTML += '</table>';
		return this.calHTML;
	}
}