仅2月份不能完美呈现

Question

我正在尝试构建一个同时显示事件的日历。
日历的动态设计和设计灵感来自 this youtube video

我成功添加了事件，但是仅2月这一天并不完美。我不知道为什么。 我检查了将月份设置为1月，2月和3月的所有变量和方法，但是找不到错误。每隔一个月呈现一次完美。抱歉，我是javascript新手，请原谅我的noob代码。 这是我的工作代码段：

const date = new Date();

const renderCalendar = () => {
  date.setDate(1);

  const listEvents = {
    "January": {
      "16": ["Birthday", "Seema Sinha"],
      "25": ["Anniversary", "Seema Sinha"]
    },
    "February": {
      "22": ["Birthday", "Prateek Sinha"]
    },
    "March": {
      "14": ["Birthday", "Ajay Kumar Sinha"]
    },
    "April": {
      "30": ["Birthday", "Sweta Kumari"]
    },
    "May": {
      "17": ["Birthday", "Pradeep Kumar"]
    },
    "June": {
      "10": ["Birthday", "Abha Sinha"],
      "18": ["Anniversary", "Lalita Sinha"],
      "27": ["Anniversary", "Jyoti Sinha"]
    },
    "August": {
      "10": ["Birthday", "Sachin Sinha"]
    },
    "September": {
      "26": ["Birthday", "Runnu Sinha"],
      "28": ["Birthday", "Prabhat Kumar", "Pratyaksha Sinha"]
    },
    "October": {
      "2": ["Birthday", "Pranay Sinha"]
    },
    "November": {
      "4": ["Birthday", "Prajjwal Sinha"],
      "22": ["Anniversary", "Abha Sinha"],
      "23": ["Birthday", "Lalita Sinha"]
    },
    "December": {
      "10": ["Birthday", "Jyoti Sinha"],
      "1": ["Birthday", "Pranav Sinha"],
      "25": ["Birthday", "Bhavya Sinha"],
      "26": ["Birthday", "Pravin Kumar"]
    }
  };


  const monthDays = document.querySelector(".days");

  const lastDay = new Date(
    date.getFullYear(),
    date.getMonth() + 1,
    0
  ).getDate();

  const prevLastDay = new Date(
    date.getFullYear(),
    date.getMonth(),
    0
  ).getDate();

  const firstDayIndex = date.getDay();

  const lastDayIndex = new Date(
    date.getFullYear(),
    date.getMonth() + 1,
    0
  ).getDay();

  const nextDays = 7 - lastDayIndex - 1;

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

  document.querySelector(".date h1").innerHTML = months[date.getMonth()];

  document.querySelector(".date p").innerHTML = new Date().toDateString();

  let days = "";

  for (let x = firstDayIndex; x > 0; x--) {
    days += `<div class="prev-date">${prevLastDay - x +1}</div>`;
  }

  for (let i = 1; i <= lastDay; i++) {
    if (listEvents.hasOwnProperty(months[date.getMonth()]) && listEvents[months[date.getMonth()]].hasOwnProperty(i)) {
      var thisMonthEvents = listEvents[months[date.getMonth()]];
      if (thisMonthEvents[i][0] === "Birthday" && i === new Date().getDate() &&
        date.getMonth() === new Date().getMonth()) {
        days += `<div class="today"><i class="fas fa-birthday-cake" style="color: #CBAB1A"></i></div>`
      } else if (thisMonthEvents[i][0] === "Anniversary" && i === new Date().getDate() &&
        date.getMonth() === new Date().getMonth()) {
        days += `<div class="today"><i class="fas fa-heart" style="color:red;"></i></div>`
      } else if (thisMonthEvents[i][0] === "Birthday") {
        days += `<div class="normal-dates"><i class="fas fa-birthday-cake" style="color: #CBAB1A"></i></div>`
      } else if (thisMonthEvents[i][0] === "Anniversary") {
        days += `<div class="normal-dates"><i class="fas fa-heart" style="color:red;"></i></div>`
      }
    } else if (
      i === new Date().getDate() &&
      date.getMonth() === new Date().getMonth()
    ) {
      days += `<div class="today">${i}</div>`;
    } else {
      days += `<div class="normal-dates">${i}</div>`;
    }
  }

  for (let j = 1; j <= nextDays; j++) {
    days += `<div class="next-date">${j}</div>`;
    monthDays.innerHTML = days;
  }

  document.querySelectorAll(".normal-dates").forEach(item => {
    item.addEventListener("click", event => {
      var targetDate = new Date();
      targetDate.setDate(event.target.textContent);
      targetDate.setMonth(date.getMonth());
      if (listEvents.hasOwnProperty(months[targetDate.getMonth()])) {
        var eventsThisMonth = listEvents[(months[targetDate.getMonth()])];
        if (eventsThisMonth.hasOwnProperty(targetDate.getDate())) {
          console.log(eventsThisMonth[targetDate.getDate()]);
        }
      }
      console.log(targetDate.toDateString());
    })
  });
};

document.querySelector(".prev").addEventListener("click", () => {
  date.setMonth(date.getMonth() - 1);
  renderCalendar();
});

document.querySelector(".next").addEventListener("click", () => {
  date.setMonth(date.getMonth() + 1);
  renderCalendar();
});

renderCalendar();

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Quicksand", sans-serif;
}

html {
  font-size: 62.5%;
}

.container {
  width: 100%;
  height: 100vh;
  background-color: #12121f;
  color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}

.calendar {
  width: 45rem;
  height: 52rem;
  background-color: #222227;
  box-shadow: 0 0.5rem 3rem rgba(0, 0, 0, 0.4);
}

.month {
  width: 100%;
  height: 12rem;
  background-color: #167e56;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  text-align: center;
  text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.5);
}

.month i {
  font-size: 2.5rem;
  cursor: pointer;
}

.month h1 {
  font-size: 3rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  margin-bottom: 1rem;
}

.month p {
  font-size: 1.6rem;
}

.weekdays {
  width: 100%;
  height: 5rem;
  padding: 0 0.4rem;
  display: flex;
  align-items: center;
}

.weekdays div {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.1rem;
  width: calc(44.2rem / 7);
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.5);
}

.days {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 0.2rem;
}

.days div {
  font-size: 1.4rem;
  margin: 0.3rem;
  width: calc(40.2rem / 7);
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.5);
  transition: background-color 0.2s;
}

.days div:hover:not(.today) {
  background-color: #262626;
  border: 0.2rem solid #777;
  cursor: pointer;
}

.prev-date,
.next-date {
  opacity: 0.5;
}

.today {
  background-color: #167e56;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Calendar</title>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
</head>

<body>
  <div class="container">
    <div class="calendar">
      <div class="month">
        <i class="fas fa-angle-left prev"></i>
        <div class="date">
          <h1></h1>
          <p></p>
        </div>
        <i class="fas fa-angle-right next"></i>
      </div>
      <div class="weekdays">
        <div>Sun</div>
        <div>Mon</div>
        <div>Tue</div>
        <div>Wed</div>
        <div>Thu</div>
        <div>Fri</div>
        <div>Sat</div>
      </div>
      <div class="days"></div>
    </div>
  </div>

  <script src="script.js"></script>
</body>

</html>

Answer 1

日历看起来不错！花了我一些时间，但我想通了。该错误位于：

for (let j = 1; j <= nextDays; j++) {
  days += `<div class="next-date">${j}</div>`;
  monthDays.innerHTML = days; // <---
}

您将monthDays.innerHTML = days放到了for循环中，并且由于nextDays在二月份等于0，因此DOM永远不会更新。要解决它，您只需要将那行代码放在for循环之外：

for (let j = 1; j <= nextDays; j++) {
  days += `<div class="next-date">${j}</div>`;
}
monthDays.innerHTML = days;

希望它能帮助您并且不会破坏您的代码！继续努力！