当前位置：首页 > JavaScript

用js实现日历

2026-03-01 13:58:54JavaScript

实现基础日历结构

使用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);
}
.days div {
  padding: 10px;
  border: 1px solid #ddd;
}

动态生成日历逻辑

通过JavaScript计算当前月份的天数及起始星期，并填充日期格子：

用js实现日历

document.addEventListener('DOMContentLoaded', function() {
  let currentDate = new Date();
  renderCalendar(currentDate);

  document.getElementById('prev').addEventListener('click', () => {
    currentDate.setMonth(currentDate.getMonth() - 1);
    renderCalendar(currentDate);
  });

  document.getElementById('next').addEventListener('click', () => {
    currentDate.setMonth(currentDate.getMonth() + 1);
    renderCalendar(currentDate);
  });
});

function renderCalendar(date) {
  const monthYear = document.getElementById('month-year');
  const daysContainer = document.getElementById('days');
  daysContainer.innerHTML = '';

  const year = date.getFullYear();
  const month = date.getMonth();
  monthYear.textContent = `${year}年 ${month + 1}月`;

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

  // 填充空白格子（上月末尾）
  for (let i = 0; i < firstDay; i++) {
    const emptyDiv = document.createElement('div');
    daysContainer.appendChild(emptyDiv);
  }

  // 填充当月日期
  for (let day = 1; day <= daysInMonth; day++) {
    const dayDiv = document.createElement('div');
    dayDiv.textContent = day;
    daysContainer.appendChild(dayDiv);
  }
}

添加交互功能

扩展功能：高亮当前日期、支持点击日期事件：

用js实现日历

function renderCalendar(date) {
  // ...（前述代码）
  const today = new Date();
  const isCurrentMonth = year === today.getFullYear() && month === today.getMonth();

  for (let day = 1; day <= daysInMonth; day++) {
    const dayDiv = document.createElement('div');
    dayDiv.textContent = day;
    if (isCurrentMonth && day === today.getDate()) {
      dayDiv.classList.add('today');
    }
    dayDiv.addEventListener('click', () => alert(`选中日期: ${year}-${month + 1}-${day}`));
    daysContainer.appendChild(dayDiv);
  }
}

.today {
  background-color: #ffeb3b;
  font-weight: bold;
}

支持多语言和自定义样式

通过配置对象实现灵活定制，例如切换星期显示为英文：

const config = {
  weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
  monthNames: ['January', 'February', /* ... */ 'December']
};

// 在renderCalendar中替换文本
document.querySelector('.weekdays').innerHTML = 
  config.weekdays.map(day => `<div>${day}</div>`).join('');

使用第三方库简化开发

若需更复杂功能（如日程管理），可考虑开源库：

FullCalendar：支持拖拽、事件管理等。
Pikaday：轻量级日期选择器。

// FullCalendar示例
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';

function Calendar() {
  return <FullCalendar plugins={[dayGridPlugin]} initialView="dayGridMonth" />;
}