カレンダーを表示して現在の日付に次の6か月のカレンダーを表示する

Question

次の6カ月のカレンダーを現在の日付に表示したい 'これらは曜日のラベルです cal_days_labels = [' Sun '、' Mon '、'火 '、'水 '、'木 '、'金 '、'土 ' //これらのために人間が読める月名のラベルは、

cal_months_labels = ['January', 'February', 'March', 'April', 
       'May', 'June', 'July', 'August', 'September', 
       'October', 'November', 'December']; 
// these are the days of the week for each month, in order 
cal_days_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; 

// this is the current date 
cal_current_date = new Date(); 

function Calendar(month, year) { 
    this.month = (isNaN(month) || month == null) ? cal_current_date.getMonth() : month; 
    this.year = (isNaN(year) || year == null) ? cal_current_date.getFullYear() : year; 
    this.html = ''; 
} 


Calendar.prototype.generateHTML = function() { 

    // get first day of month 
    var firstDay = new Date((new Date().getFullYear(), 0, 1)); 
    //var firstDay = new Date(this.year, this.month, 1); 
    var startingDay = firstDay.getDay(); 

    // find number of days in month 
    var monthLength = cal_days_in_month[this.month]; 

    // compensate for leap year 
    if (this.month == 1) { // February only! 
     if ((this.year % 4 == 0 && this.year % 100 != 0) || this.year % 400 == 0) { 
      monthLength = 29; 
     } 
    } 

    // do the header 
    var monthName = cal_months_labels[this.month] 
    var html = '<table class="calendar-table">'; 
    html += '<tr><th colspan="7">'; 
    html += monthName + "&nbsp;" + this.year; 
    html += '</th></tr>'; 
    html += '<tr class="calendar-header">'; 
    for (var i = 0; i <= 6; i++) { 
     html += '<td class="calendar-header-day">'; 
     html += cal_days_labels[i]; 
     html += '</td>'; 
    } 
    html += '</tr><tr>'; 

    // fill in the days 
    var day = 1; 
    // this loop is for is weeks (rows) 
    for (var i = 0; i < 9; i++) { 
     // this loop is for weekdays (cells) 
     for (var j = 0; j <= 6; j++) { 
      html += '<td class="calendar-day">'; 
      if (day <= monthLength && (i > 0 || j >= startingDay)) { 
       html += day; 
       day++; 
      } 
      html += '</td>'; 
     } 
     // stop making rows if we've run out of days 
     if (day > monthLength) { 
      break; 
     } else { 
      html += '</tr><tr>'; 
     } 
    } 
    html += '</tr></table>'; 

    this.html = html; 
} 

Calendar.prototype.getHTML = function() { 
    return this.html; 
}<script> 
var cal = new Calendar(); 
cal.generateHTML(); 
document.write(cal.getHTML()); 

「ここ

が私のコードであるが、その唯一の現在の月のカレンダーを表示する、と私はまた、次の6のカレンダーを表示したいです月はjqueryライブラリを使用せずに

Answer 1

ループを忘れるので、ここに作業コード。 fiddle

// do the header 
var html = "" 
for(var cal=0; cal<6; cal++){ 
var curr = new Date(this.year, (this.month+cal), 1); 
var startingDay = curr.getDay(); 
console.log(startingDay); 
    var monthName = cal_months_labels[this.month+cal]; 
    var monthLength = cal_days_in_month[this.month+cal]; 
    html += '<table class="calendar-table">'; 
    html += '<tr><th colspan="7">'; 
    html += monthName + "&nbsp;" + this.year; 
    html += '</th></tr>'; 
    html += '<tr class="calendar-header">'; 
    for (var i = 0; i <= 6; i++) { 
     html += '<td class="calendar-header-day">'; 
     html += cal_days_labels[i]; 
     html += '</td>'; 
    } 
    html += '</tr><tr>'; 

    // fill in the days 
    var day = 1; 
    // this loop is for is weeks (rows) 
    for (var i = 0; i < 9; i++) { 
     // this loop is for weekdays (cells) 
     for (var j = 0; j <= 6; j++) { 
      html += '<td class="calendar-day">'; 
      if (day <= monthLength && (i > 0 || j >= startingDay)) { 
       html += day; 
       day++; 
      } 
      html += '</td>'; 
     } 
     // stop making rows if we've run out of days 
     if (day > monthLength) { 
      break; 
     } else { 
      html += '</tr><tr>'; 
     } 
    } 
    html += '</tr></table>'; 

}//end of calendar loop