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; } }