自定義日曆以顯示下一個六個月的日曆到當前日期

Question

我想顯示下一個六個月的日曆到當前日期 '//這些是星期幾的標籤 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