js做一个简单的日历

JavaScript 可以用来创建一个简单的日历。下面是一个基本的示例，展示了如何使用 JavaScript 来生成一个月的日历视图。

基础概念

DOM 操作：JavaScript 通过 Document Object Model (DOM) 与 HTML 文档交互。
日期和时间对象：JavaScript 的 Date 对象用于处理日期和时间。

优势

动态内容：可以根据当前日期或指定日期动态生成日历。
交互性：可以通过 JavaScript 添加事件监听器，实现用户交互功能，如点击切换月份。

类型

静态日历：显示固定月份的日历。
动态日历：可以根据用户选择或系统日期动态改变显示的月份。

应用场景

网站日程管理：用户可以在网站上查看和管理自己的日程。
事件日历：用于显示即将到来的事件或节日。

示例代码

以下是一个简单的静态日历示例，它会根据当前日期生成一个月的日历视图。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Calendar</title>
<style>
  table { width: 100%; border-collapse: collapse; }
  th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }
  th { background-color: #f2f2f2; }
</style>
</head>
<body>

<h2 id="calendarMonthYear"></h2>
<table id="calendar">
  <thead>
    <tr>
      <th>Sun</th>
      <th>Mon</th>
      <th>Tue</th>
      <th>Wed</th>
      <th>Thu</th>
      <th>Fri</th>
      <th>Sat</th>
    </tr>
  </thead>
  <tbody id="calendarBody"></tbody>
</table>

<script>
function generateCalendar(year, month) {
  const calendarBody = document.getElementById('calendarBody');
  calendarBody.innerHTML = ''; // Clear previous calendar

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

  let date = 1;
  for (let i = 0; i < 6; i++) {
    const row = document.createElement('tr');

    for (let j = 0; j < 7; j++) {
      if (i === 0 && j < firstDay || date > daysInMonth) {
        const cell = document.createElement('td');
        row.appendChild(cell);
      } else {
        const cell = document.createElement('td');
        cell.textContent = date;
        date++;
        row.appendChild(cell);
      }
    }

    calendarBody.appendChild(row);

    if (date > daysInMonth) {
      break;
    }
  }
}

const today = new Date();
const year = today.getFullYear();
const month = today.getMonth();
document.getElementById('calendarMonthYear').textContent = new Date(year, month).toLocaleString('default', { month: 'long', year: 'numeric' });
generateCalendar(year, month);
</script>

</body>
</html>