js实现滚动日历

<div class="calendar-container">
  <div class="calendar-header">
    <button id="prev-month">上个月</button>
    <span id="month-year"></span>
    <button id="next-month">下个月</button>
  </div>
  <div class="calendar-body" id="calendar-body">
    <!-- 日历日期单元格将动态生成 -->
  </div>
</div>

.calendar-container {
  width: 300px;
  border: 1px solid #ccc;
  overflow: hidden;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f4f4f4;
}

.calendar-body {
  height: 400px;
  overflow-y: scroll;
  padding: 10px;
}

.calendar-day {
  height: 50px;
  border-bottom: 1px solid #eee;
}

.calendar-day:last-child {
  border-bottom: none;
}

const calendarBody = document.getElementById('calendar-body');
const monthYear = document.getElementById('month-year');
const prevMonthBtn = document.getElementById('prev-month');
const nextMonthBtn = document.getElementById('next-month');

let currentDate = new Date();

function renderCalendar(date) {
  calendarBody.innerHTML = '';
  monthYear.textContent = date.toLocaleString('default', { month: 'long', year: 'numeric' });
  const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
  const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
  const daysInMonth = lastDay.getDate();
  const startDay = firstDay.getDay();

  let day = 1;
  for (let i = 0; i < 6; i++) { // 最多6周
    const week = document.createElement('div');
    week.className = 'calendar-week';
    for (let j = 0; j < 7; j++) {
      if (i === 0 && j < startDay) {
        const emptyCell = document.createElement('div');
        emptyCell.className = 'calendar-day empty';
        week.appendChild(emptyCell);
      } else if (day > daysInMonth) {
        break;
      } else {
        const dayCell = document.createElement('div');
        dayCell.className = 'calendar-day';
        dayCell.textContent = day;
        week.appendChild(dayCell);
        day++;
      }
    }
    calendarBody.appendChild(week);
  }
}

prevMonthBtn.addEventListener('click', () => {
  currentDate.setMonth(currentDate.getMonth() - 1);
  renderCalendar(currentDate);
});

nextMonthBtn.addEventListener('click', () => {
  currentDate.setMonth(currentDate.getMonth() + 1);
  renderCalendar(currentDate);
});

renderCalendar(currentDate);