Javascript 月历仅显示周

Question

我正在寻找一个日历，它可以显示 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 周的月份。

Answer 1

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

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

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

Javascript 月历仅显示周

Javascript month calendar showing weeks only

javascript

jquery

calendar