将数字数组转换为"日历"视图

Question

如何将数字数组转换为日历表视图。

对于日历视图，我希望每行七天，并且不在阵列中的日期保持禁用状态。

var missingDates = [3, 4, 5, 6, 7, 8, 9, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, "May", 2021];
var currMonth = missingDates[missingDates.length - 2];
var currYear = missingDates[missingDates.length - 1];
var dayOfWeek = findDayofWeeks(missingDates, currMonth, currYear);
var today = dayOfWeek[dayOfWeek.length - 1];
for (var i = 0; i < missingDates.length - 2; i++) {
$("#missingCardsWindow").append('<button class="col m-2 border-left border-right btn ' + (missingDates[i] == today ? 'btn-primary' : 'btn-light') + ' " onclick="addNewRecordFromMissingCards(' + missingDates[i] + ')">' + dayOfWeek[i] + ' ' + currMonth + ' ' + missingDates[i] + '</button>')
}
function findDayofWeeks(data, currMonth, currYear) {
var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
var dateString = "";
var arrayDate = [];
for (var i = 0; i < data.length - 2; i++) {
if (data[i] < 10)
dateString = currMonth + "/0" + data[i] + "/" + currYear;
else
dateString = currMonth + "/" + data[i] + "/" + currYear;
arrayDate.push(days[new Date(dateString).getDay()]);
}
var today = new Date();
arrayDate.push(today.getDate());
return arrayDate;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="missingCardsWindow"></div>

Answer 1

以下内容足以让您入门。实际上，要使日历正常工作还有很多工作要做，但这满足了您的要求：日期在第7行，不在数组中的日期被禁用。我把它留给你，让你想想如何在一周中的某一天开始争吵，引入Bootstrap或在任何定义你的课程的地方。

我更改了不少你的代码；我添加了一个变量来获取月份名称；我以为是三个字母的月份缩写。如果没有，则需要更改months数组的内容。currMonth现在保存对0索引月份的引用。我用一个简单的方法加上了一个月的天数。然后，您只需迭代一个月中的几天，为每个天呈现一个按钮，并根据日期是否在数组中添加必要的属性。

我删除了findDaysOfWeeks，因为它产生了不正确和奇怪的结果。相反，我只是检查呈现的日期是否是今天的日期。看起来更容易。

var missingDates = [3, 4, 5, 6, 7, 8, 9, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, "May", 2021];
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var month = missingDates[missingDates.length - 2];
var currMonth = months.indexOf(month);
var currYear = missingDates[missingDates.length - 1];
var daysInMonth = new Date(currYear, currMonth + 1, 0).getDate();
var today = new Date();
today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
for (var i = 1; i < daysInMonth + 1; i++) {
$("#missingCardsWindow").append('<button class="col m-2 border-left border-right btn ' + (new Date(currYear, currMonth, i).valueOf() == today.valueOf() ? 'btn-primary' : 'btn-light') + ' "' + (missingDates.includes(i) ? ' onclick="addNewRecordFromMissingCards(' + i + ')"' : ' disabled') + '>' + new Date(currYear, currMonth, i).toLocaleString(undefined, {
weekday: 'long'
}) + ' ' + month + ' ' + i + '</button>')
}

#missingCardsWindow {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.btn-primary {
background-color: blue;
color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="missingCardsWindow"></div>