<分区>
我在我的日历中使用 HTML 和 Javascript 创建了一个日历 我使用 Jquery 突出显示了特定月份的一些日期，但我想突出显示所有月份中的多个日期。在我的日历中，月份和年份是使用下拉列表显示的，日期是使用 HTML 表格显示的，请给出解决方案
这是我的代码
HTML代码
<div class="col-md-3">
<div class="calendar1">
<h3 class="card-header" id="monthAndYear"></h3>
</div>
<head>
<div class="cal">
<form class="form-inline">
<label class="jumpto col-md-4" for="month">Jump To: </label>
<select class="form-control col-md-6" name="month" id="month" onchange="jump()">
<option value=0>Jan</option>
<option value=1>Feb</option>
<option value=2>Mar</option>
<option value=3>Apr</option>
<option value=4>May</option>
<option value=5>Jun</option>
<option value=6>Jul</option>
<option value=7>Aug</option>
<option value=8>Sep</option>
<option value=9>Oct</option>
<option value=10>Nov</option>
<option value=11>Dec</option>
</select>
<div class="col-md-1"></div>
<label for="year"></label><select class="form-control col-md-6" name="year" id="year" onchange="jump()">
<option value=2018>2018</option>
<option value=2019>2019</option>
<option value=2020>2020</option>
<option value=2021>2021</option>
</select></form>
<div id="calendar" >
<table class="table table-bordered table-responsive-md" cellpadding="20" >
<tr bgcolor="white">
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tbody id="calendar-body" style="color:black;" bgcolor="white">
</tbody >
</table>
</div>
<div class="form-inline">
<button class="btn btn-outline-primary col-md-5" id="previous" onclick="previous()">Previous</button>
<div class="col-md-2"></div>
<button class="btn btn-outline-primary col-md-5" id="next" onclick="next()">Next</button>
</div>
<br/>
</head>
</div>
</div>
JavaScript 代码
<script>
let today = new Date();
let currentMonth = today.getMonth();
let currentYear = today.getFullYear();
let selectYear = document.getElementById("year");
let selectMonth = document.getElementById("month");
let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
let monthAndYear = document.getElementById("monthAndYear");
showCalendar(currentMonth, currentYear);
function next() {
currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear;
currentMonth = (currentMonth + 1) % 12;
showCalendar(currentMonth, currentYear);
}
function previous() {
currentYear = (currentMonth === 0) ? currentYear - 1 : currentYear;
currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
showCalendar(currentMonth, currentYear);
}
function jump() {
currentYear = parseInt(selectYear.value);
currentMonth = parseInt(selectMonth.value);
showCalendar(currentMonth, currentYear);
}
function showCalendar(month, year) {
let firstDay = (new Date(year, month)).getDay();
let daysInMonth = 32 - new Date(year, month, 32).getDate();
let tbl = document.getElementById("calendar-body"); // body of the calendar
// clearing all previous cells
tbl.innerHTML = "";
// filing data about month and in the page via DOM.
monthAndYear.innerHTML = months[month] + " " + year;
selectYear.value = year;
selectMonth.value = month;
// creating all cells
let date = 1;
for (let i = 0; i < 6; i++) {
// creates a table row
let row = document.createElement("tr");
//creating individual cells, filing them up with data.
for (let j = 0; j < 7; j++) {
if (i === 0 && j < firstDay) {
let cell = document.createElement("td");
let cellText = document.createTextNode("");
cell.appendChild(cellText);
row.appendChild(cell);
}
else if (date > daysInMonth) {
break;
}
else {
let cell = document.createElement("td");
let cellText = document.createTextNode(date);
if (date === today.getDate() && year === today.getFullYear() && month === today.getMonth()) {
cell.classList.add("bg-info");
} // color today's date
cell.appendChild(cellText);
row.appendChild(cell);
date++;
}
}
tbl.appendChild(row); // appending each row into calendar body.
//debugger;
var mnth=[<?php echo $month2; ?>];
//alert(mnth);
mnth=mnth.toString();
mn=mnth.split(',');
mlength=mn.length;
// alert(mlength);
for( var j=1;j< mlength;j++){
var newmn=mn[j];
// alert(newmn);
$('select#month').find('option').each(function() {
var data1=$(this).val();
//alert(data1);
if (data1==newmn){
//alert(data1);
var ary=[<?php echo $value; ?>];
//alert(ary);
ldate=ary.toString();
ldate=ldate.split(',');
// alert(ldate);
llength=ldate.length;
// alert(llength);
for ( var i = 0; i <llength; i++) {
var newdate= ldate[i];
$('#calendar > table > tbody > tr').each(function() {
$(this).children('td').each(function(){
var data = $(this).html();
if (data==newdate)
{
$(this).css("background-color", "green");
}
})
});
}
}
});
}
}
}
</script>
var dates =[2019-12-21,2019-12-22,2019-12-23,2019-12-25,2019-12-26,2019-12-31,2020-01-01,2020 -01-02,2019-12-28];