めも帖

「めも帖」代わりにダラダラと書いていったり、めもしたりしているだけです。

JavaScriptのカレンダー(5)

曜日を表示していなかった。これで、一通りは実装したかな。
IE6で試してみたら、動きました(安心)。

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()];
	}
};

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

	initialize:function(){
	},
	
	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      : '',

	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 = '';
		var table  = document.createElement('table');

		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' ){
					Event.observe(span, 'click', function(event){
						event = event || window.event;
						var element = event.target || event.srcElement;
						element.day.infomation();
					});
				}

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