Question

我试图让用日历来加载用户选择的年份的正确开始日期的月份日期。现在，表单加载了每个月的正确月份和天数，但它从星期日[0]开始，例如，在4月，第1天是在第1周的星期五。

我已经被困在这几天了，我无法弄清楚我应该放置一个循环，让它在正确的一天开始，并且前几个月的空白。

var daysOfTheWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

function showCalendar (mth, yr)
{
    var firstDayOfMonth = mth + "/1/" + yr;
    var d = new Date ( firstDayOfMonth);
    var numberOfDaysInMonth = daysInMonth (d);
    var firstDayOfWeek = d.getDay();

    var str = "<ul>";
    str += "<li>Number of days in the month: " + numberOfDaysInMonth + "</li>";
    str += "<li>First day of the week: " + firstDayOfWeek + " (" + daysOfTheWeek[firstDayOfWeek] + ")</li>";
    str += "</ul>";

calstr = "";
var maxCalDays = 35;
for(var i =0; i<numOfDaysInMonth; i++) {
        // if there are 7 cells create string - row
        if (i % 7 == 0 && i > 0) {
            calstr += "<div class='row'>";
        }
        // increments through each cell - making up each row
        calstr += "<div class='calCell'>" + (i + 1) + "</div>";
        if (i % 7 == 0 && i > 0) {
            calstr += "</div>";
        } 
}
$("#results").append(calstr);

以下是它的运行情况。

JSFiddle

Answer 1

I edited your jsFiddle：

您必须跳过第一天之前的日子：

 for(var j = 0; j < firstDayOfWeek; j++){
    calstr += "<div class='calCell empty'></div>";
 }

e.g。像这样设置css类：

.calCell.empty {
    border: none;
}

然后将这几天添加到您的模运算中，以获得正确的7天换行符：

var maxCalDays = 35;
for(var i = 0; i < numOfDaysInMonth; i++) {
    // if there are 7 cells create string - row
    if((i + firstDayOfWeek) % 7 ==0 && i>0) {
        calstr += "<div class='row'>";
    }
    ...
}

此外，您必须禁用选择此空白单元格，并将选择器.calCell替换为.calCell:not(.empty)。 E.g：

$(".calCell:not(.empty)").click(function() {
    changeColor($(this));
});

我猜你只想用$("#results").html("")

显示旧版

加载动态日历以在当月的正确日期开始

1 个答案: