当前位置：首页 > JavaScript

js日历实现

2026-03-14 07:35:52JavaScript

实现日历的基本思路

日历的核心功能是展示日期，通常包括年、月、日，并支持用户切换月份或年份。实现时需要处理日期计算、渲染和交互逻辑。

基础HTML结构

创建一个简单的HTML容器用于放置日历：

<div id="calendar">
  <div class="header">
    <button id="prev">上一月</button>
    <h2 id="month-year"></h2>
    <button id="next">下一月</button>
  </div>
  <div class="days-header">
    <span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>
  </div>
  <div id="days-container"></div>
</div>

JavaScript逻辑实现

初始化日历并处理日期渲染：

document.addEventListener('DOMContentLoaded', function() {
  const monthYearElement = document.getElementById('month-year');
  const daysContainer = document.getElementById('days-container');
  const prevBtn = document.getElementById('prev');
  const nextBtn = document.getElementById('next');

  let currentDate = new Date();

  function renderCalendar() {
    const year = currentDate.getFullYear();
    const month = currentDate.getMonth();

    monthYearElement.textContent = `${year}年 ${month + 1}月`;

    const firstDay = new Date(year, month, 1);
    const lastDay = new Date(year, month + 1, 0);
    const daysInMonth = lastDay.getDate();
    const startingDay = firstDay.getDay();

    daysContainer.innerHTML = '';

    for (let i = 0; i < startingDay; i++) {
      const emptyDay = document.createElement('div');
      emptyDay.classList.add('day', 'empty');
      daysContainer.appendChild(emptyDay);
    }

    for (let i = 1; i <= daysInMonth; i++) {
      const dayElement = document.createElement('div');
      dayElement.classList.add('day');
      dayElement.textContent = i;

      const today = new Date();
      if (i === today.getDate() && month === today.getMonth() && year === today.getFullYear()) {
        dayElement.classList.add('today');
      }

      daysContainer.appendChild(dayElement);
    }
  }

  prevBtn.addEventListener('click', function() {
    currentDate.setMonth(currentDate.getMonth() - 1);
    renderCalendar();
  });

  nextBtn.addEventListener('click', function() {
    currentDate.setMonth(currentDate.getMonth() + 1);
    renderCalendar();
  });

  renderCalendar();
});

CSS样式建议

为日历添加基本样式：

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

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

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

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

.day {
  padding: 5px;
  text-align: center;
  border-radius: 3px;
}

.day.empty {
  visibility: hidden;
}

.day.today {
  background-color: #4285f4;
  color: white;
}

扩展功能实现

添加日期选择功能：

// 在renderCalendar函数中添加
dayElement.addEventListener('click', function() {
  document.querySelectorAll('.day.selected').forEach(el => {
    el.classList.remove('selected');
  });
  this.classList.add('selected');
  // 可以在这里处理选中的日期逻辑
  console.log(`${year}-${month + 1}-${i}`);
});