js 实现日历

实现基础日历结构

使用HTML和CSS创建一个简单的日历框架，通过JavaScript动态填充日期。HTML部分需要包含日历容器和标题显示区域。

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

初始化日历数据

JavaScript中需要定义当前月份和年份，并创建函数来更新日历显示。使用Date对象获取月份天数及第一天是星期几。

let currentDate = new Date();
let currentMonth = currentDate.getMonth();
let currentYear = currentDate.getFullYear();

function updateCalendar() {
  const monthYearElement = document.getElementById('month-year');
  monthYearElement.textContent = `${currentYear}年 ${currentMonth + 1}月`;

  const firstDay = new Date(currentYear, currentMonth, 1).getDay();
  const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();

  const datesElement = document.getElementById('dates');
  datesElement.innerHTML = '';

  // 填充空白格
  for (let i = 0; i < firstDay; i++) {
    const emptyDay = document.createElement('div');
    emptyDay.classList.add('date');
    datesElement.appendChild(emptyDay);
  }

  // 填充日期
  for (let i = 1; i <= daysInMonth; i++) {
    const dateElement = document.createElement('div');
    dateElement.classList.add('date');
    dateElement.textContent = i;
    datesElement.appendChild(dateElement);
  }
}

添加月份切换功能

为前后按钮添加事件监听器，实现月份切换功能。需要注意年份的跨年处理。

document.getElementById('prev').addEventListener('click', () => {
  currentMonth--;
  if (currentMonth < 0) {
    currentMonth = 11;
    currentYear--;
  }
  updateCalendar();
});

document.getElementById('next').addEventListener('click', () => {
  currentMonth++;
  if (currentMonth > 11) {
    currentMonth = 0;
    currentYear++;
  }
  updateCalendar();
});

添加样式美化日历

CSS样式可以增强日历的可视化效果，包括网格布局、颜色和悬停效果。

#calendar {
  width: 300px;
  font-family: Arial, sans-serif;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-weight: bold;
}

#dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.date {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.date:hover {
  background-color: #eee;
}

实现日期选择功能

添加点击事件监听器，允许用户选择特定日期并高亮显示。

document.getElementById('dates').addEventListener('click', (e) => {
  if (e.target.classList.contains('date') && e.target.textContent) {
    const selectedDates = document.querySelectorAll('.selected');
    selectedDates.forEach(date => date.classList.remove('selected'));
    e.target.classList.add('selected');
  }
});

添加今天标记

在日历中突出显示当前日期，帮助用户快速定位。

function updateCalendar() {
  // ...之前代码...

  // 填充日期
  for (let i = 1; i <= daysInMonth; i++) {
    const dateElement = document.createElement('div');
    dateElement.classList.add('date');
    dateElement.textContent = i;

    // 标记今天
    if (i === currentDate.getDate() && 
        currentMonth === currentDate.getMonth() && 
        currentYear === currentDate.getFullYear()) {
      dateElement.classList.add('today');
    }

    datesElement.appendChild(dateElement);
  }
}

对应CSS添加今天样式：

.today {
  background-color: #4285f4;
  color: white;
  border-radius: 50%;
}

.selected {
  background-color: #34a853;
  color: white;
  border-radius: 50%;
}