我正在使用 JavaScript 创建日历，需要能够滚动到下个月并获取该月的开始日期，并能够显示该月的所有日期。我可以在一月份执行此操作，但很困惑如何使其在向前或向后滚动时适用于每个月。我还可以滚动到下个月的名称，但对如何获取下个月的日期感到困惑。
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',
'Septemeber', 'October', 'November', 'December']
var getMonths = document.querySelector('.twelvemonths');
var showMonth = document.querySelector('.show-month')
var showWeekDays = document.querySelector('.weekday');
var dateContainer = document.querySelector('.date-container');
var scrollRight = document.querySelector('.go-right');
var scrollLeft = document.querySelector('.go-left');
let weekDay = new Date();
let d = new Date();
let day = d.getDay();
let month = d.getMonth();
let year = d.getFullYear();
function getDaysInMonth(year, month){
return new Date(year, month, 0).getDate()
}
const getDays = getDaysInMonth(year, month)
function drawDays(){
for(i = 1; i <= getDays; i ++){
let calendarDay = document.createElement('div')
calendarDay.className = 'calendar-day';
calendarDay.innerHTML = i;
dateContainer.appendChild(calendarDay);
}
}
scrollRight.addEventListener('click', () =>{
if(month < 11){
month ++;
} else {
month = 0;
}
showMonth.innerHTML = months[month];
})
scrollLeft.addEventListener('click', () =>{
month--;
if(month < 0){
month = 11;
}
showMonth.innerHTML = months[month]
})
showMonth.innerHTML = months[month];
drawDays()
switch(day){
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
break;
}
尝试使用此代码，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendar</title>
<style>
</style>
</head>
<body>
<div class="calendar">
<button class="go-left">Previous</button>
<div class="show-month"></div>
<button class="go-right">Next</button>
<div class="date-container"></div>
</div>
<script>
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',
'September', 'October', 'November', 'December'];
var getMonths = document.querySelector('.twelvemonths');
var showMonth = document.querySelector('.show-month');
var dateContainer = document.querySelector('.date-container');
var scrollRight = document.querySelector('.go-right');
var scrollLeft = document.querySelector('.go-left');
var currentDate = new Date();
var currentYear = currentDate.getFullYear();
var currentMonth = currentDate.getMonth();
function updateCalendar(year, month) {
dateContainer.innerHTML = '';
showMonth.innerHTML = months[month] + ' ' + year;
var firstDay = new Date(year, month, 1).getDay();
var daysInMonth = new Date(year, month + 1, 0).getDate();
var daysOfWeek = ['Sun', 'Mon', 'Tue','Wed','Thu','Fri','Sat'];
for (var i = 0; i < daysOfWeek.length; i++) {
var dayHeader = document.createElement('div');
dayHeader.className = 'calendar-day-header';
dayHeader.innerHTML = daysOfWeek[i];
dateContainer.appendChild(dayHeader);
}
for (var day = 1; day <= daysInMonth; day++) {
var calendarDay = document.createElement('div');
calendarDay.className = 'calendar-day';
calendarDay.innerHTML = day;
dateContainer.appendChild(calendarDay);
}
for (var i = 0; i < firstDay; i++) {
var emptyDay = document.createElement('div');
emptyDay.className = 'calendar-day empty';
dateContainer.insertBefore(emptyDay, dateContainer.firstChild);
}
}
updateCalendar(currentYear, currentMonth);
scrollRight.addEventListener('click', () => {
if (currentMonth < 11) {
currentMonth++;
} else {
currentMonth = 0;
currentYear++;
}
updateCalendar(currentYear, currentMonth);
});
scrollLeft.addEventListener('click', () => {
if (currentMonth > 0) {
currentMonth--;
} else {
currentMonth = 11;
currentYear--;
}
updateCalendar(currentYear, currentMonth);
});
</script>
</body>
</html>