Я работаю над настраиваемым календарем для веб-сайта. Я использую день даты, чтобы установить правильное положение первого числа в сетке. Это работает все время, кроме месяцев, которые начинаются в воскресенье. Когда месяц начинается в воскресенье, он просто сохраняет предыдущий месяц, за исключением названия, одинаковым (в обоих направлениях, например, с февраля по март или с апреля по март. То же с ноябрем). Почему это может быть? Это мой код Это должно быть довольно самоочевидно
var m = new Date().getMonth();
var month = m;
function startcalendar() {
let months = ["January 2020", "February 2020", "March 2020", "April 2020", "May 2020", "June 2020", "July 2020", "August 2020", "September 2020", "October 2020", "November 2020", "December 2020"];
let monthdates = ["January 1, 2020 00:00:00", "February 1, 2020 00:00:00", "March 1, 2020 00:00:00", "April 1, 2020 00:00:00", "May 1, 2020 00:00:00", "June 1, 2020 00:00:00", "July 1, 2020 00:00:00", "August 1, 2020 00:00:00", "September 1, 2020 00:00:00", "October 1, 2020 00:00:00", "November 1, 2020 00:00:00", "December 1, 2020 00:00:00"];
let lastmonthdates = ["January 31, 2020 00:00:00", "February 29, 2020 00:00:00", "March 31, 2020 00:00:00", "April 30, 2020 00:00:00", "May 31, 2020 00:00:00", "June 30, 2020 00:00:00", "July 31, 2020 00:00:00", "August 31, 2020 00:00:00", "September 30, 2020 00:00:00", "October 31, 2020 00:00:00", "November 30, 2020 00:00:00", "December 31, 2020 00:00:00"];
var firstday = new Date(monthdates[month]);
var lastday = new Date(lastmonthdates[month]);
var day = firstday.getDay();
var lday = lastday.getDate();
var beforeday = day;
day = day + 1;
var ddate = 1;
document.getElementById("month").innerHTML = months[month];
for (day = firstday.getDay(); day < 45; day++) {
for (before = 1; before < beforeday; before++) {
document.getElementById(before).innerHTML = "";
}
if (ddate <= lday) {
document.getElementById(day).innerHTML = ddate;
ddate++;
} else if (ddate > lday) {
document.getElementById(day).innerHTML = "";
} else {
break;
}
}
}
function changemonth(actn) {
if (actn == 0) {
if (month == 0) {
alert("You can't go any further back in time");
} else {
month = month - 1;
startcalendar();
}
} else if (actn == 1) {
month = month + 1
startcalendar();
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="script.js"></script>
<title>Calendar</title>
</head>
<body onload="startcalendar()">
<div class="container-fluid">
<div style="padding:10px;">
<h1><strong id="month" class="float-left"></strong></h1>
<div class="float-right">
<button type="button" class="btn-primary btn" onclick="changemonth(0)">Previous</button>
<button type="button" class="btn-primary btn" onclick="changemonth(1)">Next</button>
</div>
</div>
<br></br>
<div>
<div class="row border">
<div class="col border">Monday</div>
<div class="col border">Tuesday</div>
<div class="col border">Wednesday</div>
<div class="col border">Thursday</div>
<div class="col border">Friday</div>
<div class="col border">Saturday</div>
<div class="col border">Sunday</div>
</div>
<div class="row border" style="min-height: 200px;">
<div class="col border" id="1">1</div>
<div class="col border" id="2">2</div>
<div class="col border" id="3">3</div>
<div class="col border" id="4">4</div>
<div class="col border" id="5">5</div>
<div class="col border" id="6">6</div>
<div class="col border" id="7">7</div>
</div>
<div class="row border" style="min-height: 200px;">
<div class="col border" id="8">8</div>
<div class="col border" id="9">9</div>
<div class="col border" id="10">10</div>
<div class="col border" id="11">11</div>
<div class="col border" id="12">12</div>
<div class="col border" id="13">13</div>
<div class="col border" id="14">14</div>
</div>
<div class="row border" style="min-height: 200px;">
<div class="col border" id="15">15</div>
<div class="col border" id="16">16</div>
<div class="col border" id="17">17</div>
<div class="col border" id="18">18</div>
<div class="col border" id="19">19</div>
<div class="col border" id="20">20</div>
<div class="col border" id="21">21</div>
</div>
<div class="row border" style="min-height: 200px;">
<div class="col border" id="22">22</div>
<div class="col border" id="23">23</div>
<div class="col border" id="24">24</div>
<div class="col border" id="25">25</div>
<div class="col border" id="26">26</div>
<div class="col border" id="27">27</div>
<div class="col border" id="28">28</div>
</div>
<div class="row border" id="row5" style="min-height: 200px;">
<div class="col border" id="29">29</div>
<div class="col border" id="30">30</div>
<div class="col border" id="31">31</div>
<div class="col border" id="32">32</div>
<div class="col border" id="33">33</div>
<div class="col border" id="34">34</div>
<div class="col border" id="35">35</div>
</div>
<div class="row border" id="row6" style="min-height: 200px;">
<div class="col border" id="36">36</div>
<div class="col border" id="37">37</div>
<div class="col border" id="38">38</div>
<div class="col border" id="39">39</div>
<div class="col border" id="40">40</div>
<div class="col border" id="41">41</div>
<div class="col border" id="42">42</div>
</div>
</div>
</div>
</body>
</html>