Javascript 月历仅显示周答案

【问题标题】：Javascript month calendar showing weeks onlyJavascript 月历仅显示周
【发布时间】：2015-11-30 17:01:23
【问题描述】：

我正在寻找一个日历，它可以显示 x 个月份，然后显示这些月份的周数以及显示事件，如下所示。

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

这是我迄今为止尝试过的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 周的月份。

【问题讨论】：

标签： javascript jquery calendar

【解决方案1】：

显示四个是因为您正在执行 Current Month PLUS 3，实际上是 4 个月。

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

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

【讨论】：