JavaScriptのカレンダー(1)
カレンダー。とりあえず、書いてみた。last_day_of_monthは、id:clonedさんのを。
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;