js实现滚动日历

滚动日历在网页应用中是一种常见的交互组件，它允许用户通过滚动来查看不同日期的内容。以下是关于滚动日历的基础概念、优势、类型、应用场景以及如何使用JavaScript实现一个简单的滚动日历。

基础概念

滚动日历通常由一系列日期单元格组成，这些单元格可以垂直或水平滚动。用户可以通过触摸设备上的滑动手势或鼠标滚轮来滚动日历，以查看不同日期的内容。

优势

节省空间：滚动日历可以在有限的空间内展示大量日期信息。
用户友好：用户可以通过简单的滚动动作来浏览日期，操作直观便捷。
灵活性：可以自定义显示的日期范围、样式和交互效果。

类型

垂直滚动日历：日期单元格垂直排列，用户上下滚动查看。
水平滚动日历：日期单元格水平排列，用户左右滚动查看。
混合滚动日历：结合垂直和水平滚动，提供更丰富的浏览体验。

应用场景

日期选择器：在表单中提供日期选择功能。
日程管理：展示用户的日程安排，方便用户查看不同日期的任务。
活动日历：展示活动或事件的日期和时间。

JavaScript实现简单的垂直滚动日历

以下是一个使用HTML、CSS和JavaScript实现的简单垂直滚动日历示例：

HTML

<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>

CSS

.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;
}

JavaScript

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);