js单行横向滑动的日历

<div class="calendar-container">
  <div class="calendar" id="calendar">
    <!-- 日历项将通过JavaScript动态生成 -->
  </div>
</div>

.calendar-container {
  overflow-x: auto;
  white-space: nowrap;
}

.calendar {
  display: inline-block;
  transition: transform 0.3s ease-in-out;
}

const calendarContainer = document.querySelector('.calendar-container');
const calendar = document.getElementById('calendar');

function generateCalendar(days) {
  let html = '';
  for (let i = 1; i <= days; i++) {
    html += `<div class="calendar-day">${i}</div>`;
  }
  calendar.innerHTML = html;
}

function slideToDay(day) {
  const dayWidth = 50; // 假设每个日期项宽度为50px
  const offset = (day - 1) * dayWidth;
  calendar.style.transform = `translateX(-${offset}px)`;
}

// 初始化日历并滑动到指定日期
generateCalendar(30); // 假设一个月有30天
slideToDay(15); // 滑动到第15天