JavaScriptのカレンダー（6）

• 月指定をしたときの不具合に対応
• カレンダー自体にtypeを持たせて、日付のアクションを追加するときに使えるようにしてみた

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

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

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

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

		if(year){
			this.date.setFullYear(year);
			this.year = year;
		}

		if(month){
			this.date.setDate(1);
			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 = '';
		var table  = document.createElement('table');
		table.className = 'calendarTable';

		var infoTr = document.createElement('tr');
		var tBody  = document.createElement('tbody');
		var infoTd = document.createElement('td');
		var span   = document.createElement('span');
		span.innerHTML = this.year + '/' + this.month;

		infoTd.colSpan = 7;
		infoTd.appendChild(span);
		infoTr.appendChild(infoTd);
		tBody.appendChild(infoTr);
		table.appendChild(tBody);

		var wDayTr    = document.createElement('tr');
		var wDaytBody = document.createElement('tbody');
		for(var j=0; j<this.weekDay.length; j++){
			var wDayTd = document.createElement('td');
			var span   = document.createElement('span');
			
			span.className = 'wDay';
			span.innerHTML = this.weekDay[j];
			
			wDayTd.appendChild(span);
			wDayTr.appendChild(wDayTd);
		}
		wDaytBody.appendChild(wDayTr);
		table.appendChild(wDaytBody);

		for(var i=0; i<this.line; i++){
			var tr     = document.createElement('tr');
			var tBody  = document.createElement('tbody');
			for(var j=0; j<7; j++){
				var td   = document.createElement('td');
				var span = document.createElement('span');

				span.innerHTML = this.calArray[j+(i*7)]['day'];
				span.day = this.calArray[j+(i*7)];
				span.className = 'day';
				if(this.calArray[j+(i*7)]['isWill']){
					span.className = 'isWill';
				}
				if(this.calArray[j+(i*7)]['isToday']){
					span.className = 'today';
				}

				if( span.className != 'isWill' ){
					var calType = this.calType;
					Event.observe(span, 'click', function(event){
						event = event || window.event;
						var element = event.target || event.srcElement;
						element.day.setDay(calType);
						//element.day.infomation();
					});
				}

				td.appendChild(span);
				tr.appendChild(td);
			}
			tBody.appendChild(tr);
			table.appendChild(tBody);
		}
		
		this.calHTML = table;
		return table;
	}
}