如何使用JavaScript实现一个简单的日历组件

在Web开发中，使用JavaScript实现一个简单的日历组件是理解日期处理和DOM操作的很好练习。我们不需要引入任何框架，仅用原生JS就能完成一个可切换月份并高亮今日的日历UI组件。

一、基本结构规划

日历组件通常包含三部分：顶部控制栏（显示年月与切换按钮）、日期表格主体、以及用来挂载的容器。我们先写好HTML骨架，再用JS动态填充日期。

1.1 HTML容器

<div id="calendar">
  <div class="cal-header">
    <button id="prev">上月</button>
    <span id="title"></span>
    <button id="next">下月</button>
  </div>
  <table class="cal-table">
    <thead>
      <tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>
    </thead>
    <tbody id="days"></tbody>
  </table>
</div>

二、JavaScript核心逻辑

我们使用一个currentDate变量保存当前查看的年份和月份，通过Date对象计算当月天数和首日星期，再生成单元格。

2.1 渲染函数

// 当前查看的年月
let currentDate = new Date();

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

  // 设置标题
  document.getElementById('title').textContent = year + '年' + (month + 1) + '月';

  // 当月第一天是星期几
  const firstDay = new Date(year, month, 1).getDay();
  // 当月总天数
  const daysInMonth = new Date(year, month + 1, 0).getDate();

  const tbody = document.getElementById('days');
  tbody.innerHTML = '';

  let cells = [];
  // 补足前面的空白格
  for (let i = 0; i < firstDay; i++) {
    cells.push('<td></td>');
  }
  // 日期格
  for (let d = 1; d <= daysInMonth; d++) {
    const isToday = d === today.getDate() && month === today.getMonth() && year === today.getFullYear();
    const cls = isToday ? ' class="today"' : '';
    cells.push('<td' + cls + '>' + d + '</td>');
  }
  // 拼成行
  let html = '';
  for (let i = 0; i < cells.length; i += 7) {
    html += '<tr>' + cells.slice(i, i + 7).join('') + '</tr>';
  }
  tbody.innerHTML = html;
}

document.getElementById('prev').addEventListener('click', function () {
  currentDate.setMonth(currentDate.getMonth() - 1);
  renderCalendar();
});
document.getElementById('next').addEventListener('click', function () {
  currentDate.setMonth(currentDate.getMonth() + 1);
  renderCalendar();
});

renderCalendar();

2.2 样式要点

给class="today"的单元格加个背景色，就能直观看到今天。表格用border-collapse更紧凑。

.cal-table { border-collapse: collapse; width: 280px; }
.cal-table td, .cal-table th { border: 1px solid #ccc; text-align: center; padding: 6px; }
.cal-table .today { background: #ffe9a8; font-weight: bold; }
.cal-header { margin-bottom: 8px; }

三、总结

上面这段代码已经构成了一个最简单的日历组件。核心就是利用Date对象算偏移，把数字塞进表格，并用事件监听切换月份。你可以在此基础上增加选日期回调、禁用某些天或改成响应式布局，逐步把它变成项目里好用的UI组件。

JavaScriptUI组件calendar修改时间：2026-07-27 05:48:19