Javascript月日历只显示几周

我在寻找一个日历，可以显示x个月的数量，然后显示这些月份的星期数以及显示事件，如下所示。Javascript月日历只显示几周

蓝色虚线是今天的日期，有可能是有一个开始和结束日期的多个事件。

这就是我到目前为止所尝试的http://jsfiddle.net/vc1f3f4x/1/ - 问题是它显示4个月而不是3个，我甚至还没有得到事件。

var monthNames = ["January", "February", "March", "April", "May", "June", 
        "July", "August", "September", "October", "November", "December" 
       ]; 

var data = new Object(); 

data.Months = {}; 
data.Weeks = new Array(); 

var start = new Date(); 
var end = new Date(); 
start.setDate(1); 

end.setMonth(start.getMonth() + 3); 

var weekNumber = getWeekNumber(start); 
var currentYear = start.getYear(); 

for (var dt = start; start <= end; dt.setDate(dt.getDate() + 7)) { 
    if (dt.getYear() > currentYear) { 
     currentYear = dt.getYear(); 
     weekNumber = 1; 
    } 

    weekNumber++; 

    var id = dt.getMonth() + "_" + dt.getYear(); 

    data.Months[id] = monthNames[dt.getMonth()]; 
    data.Weeks.push(weekNumber); 
} 

// Run through each month and add it to dom 
for (var month in data.Months) { 
    $(".Content").append("<div class='Month'>" + data.Months[month] + "</div>"); 
} 

// Then run through each week and add it to dom 
for (var i = 0; i < data.Weeks.length; i++) { 
    $(".Content").append("<div class='Week'>" + data.Weeks[i] + "</div>"); 
} 

function getWeekNumber(d) { 
    // Copy date so don't modify original 
    d = new Date(+d); 
    d.setHours(0, 0, 0); 
    // Set to nearest Thursday: current date + 4 - current day number 
    // Make Sunday's day number 7 
    d.setDate(d.getDate() + 4 - (d.getDay() || 7)); 
    // Get first day of year 
    var yearStart = new Date(d.getFullYear(), 0, 1); 
    // Calculate full weeks to nearest Thursday 
    var weekNo = Math.ceil((((d - yearStart)/86400000) + 1)/7); 
    // Return array of year and week number 
    return weekNo; 
}

是否有能为我做到这一点还是需要从头开始创建一个组件？

编辑：我刚刚意识到我的代码不处理几个月，其中有5个星期。

来源

2015-09-04 Dumpen

它显示四个，因为你正在做本月加3，实际上是4个月。

您正在将开始日期设置为当前月的第一个日期，然后向其中添加3以设置结束日期的月份。

我建议使用moment.js做日期操作，我发现它对日期做任何事都非常有用。

来源

2015-09-04 13:59:06

Javascript月日历只显示几周

回答

相关问题