js实现日历控件

实现基础日历控件

使用HTML和CSS创建日历的基本结构，JavaScript处理逻辑。以下是一个简单的实现方案：

<div id="calendar">
  <div class="header">
    <button id="prev">←</button>
    <h2 id="month-year"></h2>
    <button id="next">→</button>
  </div>
  <div class="weekdays">
    <div>日</div><div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div>
  </div>
  <div id="days" class="days"></div>
</div>

#calendar {
  width: 300px;
  font-family: Arial;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.weekdays, .days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.weekdays div {
  padding: 10px;
  text-align: center;
  font-weight: bold;
}
.days div {
  padding: 10px;
  text-align: center;
  cursor: pointer;
}
.days div:hover {
  background-color: #eee;
}

日历逻辑实现

JavaScript部分负责生成日历并处理导航：

document.addEventListener('DOMContentLoaded', function() {
  let currentDate = new Date();
  let currentMonth = currentDate.getMonth();
  let currentYear = currentDate.getFullYear();

  const monthYear = document.getElementById('month-year');
  const daysContainer = document.getElementById('days');
  const prevBtn = document.getElementById('prev');
  const nextBtn = document.getElementById('next');

  function renderCalendar() {
    const firstDay = new Date(currentYear, currentMonth, 1);
    const lastDay = new Date(currentYear, currentMonth + 1, 0);
    const daysInMonth = lastDay.getDate();
    const startingDay = firstDay.getDay();

    monthYear.textContent = `${currentYear}年 ${currentMonth + 1}月`;
    daysContainer.innerHTML = '';

    // 填充上个月的最后几天
    const prevMonthLastDay = new Date(currentYear, currentMonth, 0).getDate();
    for(let i = 0; i < startingDay; i++) {
      const dayElement = document.createElement('div');
      dayElement.textContent = prevMonthLastDay - startingDay + i + 1;
      dayElement.classList.add('prev-month');
      daysContainer.appendChild(dayElement);
    }

    // 填充当月日期
    for(let i = 1; i <= daysInMonth; i++) {
      const dayElement = document.createElement('div');
      dayElement.textContent = i;
      if(i === currentDate.getDate() && currentMonth === new Date().getMonth() && currentYear === new Date().getFullYear()) {
        dayElement.classList.add('today');
      }
      daysContainer.appendChild(dayElement);
    }

    // 填充下个月的前几天
    const totalCells = startingDay + daysInMonth;
    const remainingCells = totalCells > 35 ? 42 - totalCells : 35 - totalCells;
    for(let i = 1; i <= remainingCells; i++) {
      const dayElement = document.createElement('div');
      dayElement.textContent = i;
      dayElement.classList.add('next-month');
      daysContainer.appendChild(dayElement);
    }
  }

  prevBtn.addEventListener('click', function() {
    currentMonth--;
    if(currentMonth < 0) {
      currentMonth = 11;
      currentYear--;
    }
    renderCalendar();
  });

  nextBtn.addEventListener('click', function() {
    currentMonth++;
    if(currentMonth > 11) {
      currentMonth = 0;
      currentYear++;
    }
    renderCalendar();
  });

  renderCalendar();
});

添加日期选择功能

扩展基础功能，添加日期选择交互：

// 在renderCalendar函数中添加日期点击事件
daysContainer.addEventListener('click', function(e) {
  if(e.target.tagName === 'DIV' && !e.target.classList.contains('prev-month') && !e.target.classList.contains('next-month')) {
    const selectedDay = parseInt(e.target.textContent);
    // 处理选择的日期
    console.log(`${currentYear}-${currentMonth + 1}-${selectedDay}`);

    // 移除之前的选择样式
    const selectedElements = document.querySelectorAll('.selected');
    selectedElements.forEach(el => el.classList.remove('selected'));

    // 添加新的选择样式
    e.target.classList.add('selected');
  }
});

// 添加CSS样式
.selected {
  background-color: #007bff;
  color: white;
}
.today {
  font-weight: bold;
  border: 1px solid #007bff;
}
.prev-month, .next-month {
  color: #ccc;
}

使用第三方库简化开发

如果需要更复杂的功能，可以考虑使用现成的库：

1. Flatpickr - 轻量级且可定制的日历控件

   
   // 安装: npm install flatpickr
   import flatpickr from "flatpickr";
   import "flatpickr/dist/flatpickr.min.css";

flatpickr("#calendar", { dateFormat: "Y-m-d", defaultDate: "today" });

2. FullCalendar - 功能全面的日历组件
```javascript
// 安装: npm install @fullcalendar/core @fullcalendar/daygrid
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new Calendar(calendarEl, {
    plugins: [dayGridPlugin],
    initialView: 'dayGridMonth'
  });
  calendar.render();
});

这些实现方案提供了从基础到高级的日历控件开发路径，可以根据项目需求选择合适的实现方式。