js使用表格生成一个日历，点击按钮上查看上个月，点击按钮下，查看下个月，月份，年份

<div id="calendar">
  <div id="header">
    <button id="prevBtn">上个月</button>
    <span id="monthYear"></span>
    <button id="nextBtn">下个月</button>
  </div>
  <table id="calendarTable">
    <!-- 表格内容将通过JavaScript动态生成 -->
  </table>
</div>

// 获取容器元素和按钮元素的引用
const calendarContainer = document.getElementById('calendar');
const prevButton = document.getElementById('prevBtn');
const nextButton = document.getElementById('nextBtn');
const monthYear = document.getElementById('monthYear');
// 设置按钮的点击事件监听器
prevButton.addEventListener('click', showPrevMonth);
nextButton.addEventListener('click', showNextMonth);
// 定义当前日期变量
let currentDate = new Date();
// 显示当前月份的日历
showCalendar(currentDate);
function getWeekNumber(year, month, day) {
  const date = new Date(year, month, day);
  date.setHours(0, 0, 0);
  date.setDate(date.getDate() + 4 - (date.getDay() || 7));
  const yearStart = new Date(date.getFullYear(), 0, 1);
  const weekNum = Math.ceil((((date - yearStart) / 86400000) + 1) / 7);
  return weekNum;
}
// 显示上一个月的日历
function showPrevMonth() {
  currentDate.setMonth(currentDate.getMonth() - 1);
  showCalendar(currentDate);
}
// 显示下一个月的日历
function showNextMonth() {
  currentDate.setMonth(currentDate.getMonth() + 1);
  showCalendar(currentDate);
}
// 生成日历表格
function showCalendar(date) {
  // 获取年份和月份
  const year = date.getFullYear();
  const month = date.getMonth();
  // 更新月份和年份显示
  monthYear.textContent = `${year}年${month + 1}月`;
  // 清空表格内容
  const calendarTable = document.getElementById('calendarTable');
  calendarTable.innerHTML = '';
  // 创建表头
  const headerRow = calendarTable.insertRow();
  const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
  for (let i = 0; i < 7; i++) {
    const cell = headerRow.insertCell();
    cell.textContent = weekdays[i];
  }
  // 获取当月的第一天和最后一天
  const firstDay = new Date(year, month, 1);
  const lastDay = new Date(year, month + 1, 0);
  // 计算日期范围
  const start = firstDay.getDay();
  const end = lastDay.getDate();
  // 创建日期单元格
  let dateCount = 1;
  let weekCount = 1;
  let hasRenderedRows = false;
  for (let row = 0; row < 6; row++) {
    const calendarRow = calendarTable.insertRow();
    for (let col = 0; col < 7; col++) {
      const cell = calendarRow.insertCell();
      if ((row === 0 && col < start) || dateCount > end) {
        // 上个月或下个月的日期
        cell.classList.add('non-current-month');
      } else {
        // 当月的日期
        cell.textContent = dateCount++;
        const currentWeek = getWeekNumber(year, month, cell.textContent);
        cell.dataset.week = currentWeek;
        if (!hasRenderedRows) {
          hasRenderedRows = true;
        }
      }
    }
  }
  // 如果没有渲染任何日期行，则删除最后一行空白行
  if (!hasRenderedRows) {
   ```javascript
    calendarTable.deleteRow(6);
  }
}

#calendar {
  text-align: center;
}
#header {
  margin-bottom: 10px;
}
#prevBtn,
#nextBtn {
  padding: 5px 10px;
  background-color: #ccc;
  border: none;
  cursor: pointer;
}
#monthYear {
  font-weight: bold;
  margin: 0 10px;
}
#calendarTable {
  border-collapse: collapse;
  margin: 0 auto;
}
#calendarTable td {
  padding: 5px;
  text-align: center;
}
.non-current-month {
  color: #ccc;
}