当前位置：首页 > JavaScript

js日历案例实现

2026-03-15 21:04:30JavaScript

实现基础日历功能

使用JavaScript创建一个简单的日历，需要获取当前日期并生成对应的月份视图。以下是基础实现代码：

function createCalendar(year, month) {
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  const firstDayOfMonth = new Date(year, month, 1).getDay();

  let calendarHTML = '<table><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr><tr>';

  // 填充空白单元格
  for (let i = 0; i < firstDayOfMonth; i++) {
    calendarHTML += '<td></td>';
  }

  // 填充日期
  for (let day = 1; day <= daysInMonth; day++) {
    calendarHTML += `<td>${day}</td>`;

    if ((day + firstDayOfMonth) % 7 === 0) {
      calendarHTML += '</tr><tr>';
    }
  }

  calendarHTML += '</tr></table>';
  document.getElementById('calendar').innerHTML = calendarHTML;
}

// 使用当前年月初始化日历
const currentDate = new Date();
createCalendar(currentDate.getFullYear(), currentDate.getMonth());

添加导航功能

为日历添加上一月和下一月的导航按钮：

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

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

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

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

updateCalendar();

高亮当前日期

在日历中突出显示当前日期：

function createCalendar(year, month) {
  const today = new Date();
  const isCurrentMonth = year === today.getFullYear() && month === today.getMonth();

  // ...之前的代码...

  for (let day = 1; day <= daysInMonth; day++) {
    const isToday = isCurrentMonth && day === today.getDate();
    calendarHTML += `<td${isToday ? ' class="today"' : ''}>${day}</td>`;
    // ...之后的代码...
  }
}

添加事件处理

为日期单元格添加点击事件：

function createCalendar(year, month) {
  // ...之前的代码...

  for (let day = 1; day <= daysInMonth; day++) {
    calendarHTML += `<td onclick="selectDate(${year}, ${month}, ${day})">${day}</td>`;
    // ...之后的代码...
  }
}

function selectDate(year, month, day) {
  const selectedDate = new Date(year, month, day);
  console.log('选择的日期:', selectedDate.toLocaleDateString());
}

完整HTML结构

日历的完整HTML结构示例：

<div class="calendar-container">
  <div class="calendar-header">
    <button id="prev-month">上个月</button>
    <h2 id="month-year"></h2>
    <button id="next-month">下个月</button>
  </div>
  <div id="calendar"></div>
</div>

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
  }
  th {
    background-color: #f2f2f2;
  }
  .today {
    background-color: #4CAF50;
    color: white;
  }
  .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
</style>

使用第三方库

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

FullCalendar：功能全面的日历组件
Pikaday：轻量级日期选择器
Flatpickr：现代化的日期时间选择器

例如使用FullCalendar的简单实现：

js日历案例实现

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    }
  });
  calendar.render();
});