使用 HTML 和 CSS 设计日历

在 Web 开发领域中，常常需要对日历进行设计和布局。日历不仅在个人网站和博客中使用，也是企业级应用和日历应用的重要组成部分。本文将介绍如何使用 HTML 和 CSS 设计日历，为 Web 开发者提供帮助。

基本思路

一个日历通常包含年份、月份和日期。因此，日历的基本设计需要包含 HTML 结构和 CSS 样式。具体来说，我们需要：

1. HTML 结构：第一层是整个日历的容器，其中包含年份和月份的展示区域；第二层是日期的表格容器，包含表格头（星期几）和日期格子。
2. CSS 样式：大部分样式都是对表格、容器的样式进行设计，例如对日期格子的布局、边框、大小等。

接下来我们将逐步展示设计一个日历所需的 HTML 和 CSS 代码，供给 Web 开发者参考和使用。

HTML 结构

下面是完整的日历 HTML 结构代码，请放心使用。

<div class="calendar">
  <div class="calendar-header">
    <a href="#" class="calendar-prev-month">&lt;</a>
    <h3 class="calendar-title"></h3>
    <a href="#" class="calendar-next-month">&gt;</a>
  </div>
  <table class="calendar-body">
    <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></tbody>
  </table>
</div>

其中，calendar 为整个日历的容器，calendar-header 和 calendar-body 分别为展示区域和日期表格的容器。

CSS 样式

下面是完整的日历 CSS 样式代码，请放心使用。

.calendar {
  display: block;
  margin-bottom: 20px;
}
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.calendar-title {
  font-weight: bold;
  text-align: center;
  margin: 0;
}
.calendar-prev-month,
.calendar-next-month {
  font-size: 20px;
  color: #999;
  text-decoration: none;
}
.calendar-body {
  border-spacing: 0;
  border-collapse: collapse;
}
.calendar-body th,
.calendar-body td {
  text-align: center;
  padding: 10px;
  border: 1px solid #ddd;
  font-size: 14px;
}
.calendar-body th {
  font-weight: bold;
  background-color: #f6f6f6;
}
.calendar-body td {
  background-color: #fff;
  cursor: pointer;
}
.calendar-body td:hover {
  background-color: #f6f6f6;
}
.calendar-body td.is-today {
  background-color: #e5f5f9;
}
.calendar-body td.is-selected {
  background-color: #7fb3d5;
  color: #fff;
}

其中，calendar、calendar-header、calendar-title 是整个样式的基础；calendar-body 、calendar-body th、calendar-body td 是日期样式的重点。样式设计细节请仔细浏览代码。

JS 代码

下面是 JS 代码，请参考使用。

const calendarHeader = document.querySelector('.calendar-header') ;
const calendarTitle = calendarHeader.querySelector('.calendar-title');
const prevMonth = calendarHeader.querySelector('.calendar-prev-month');
const nextMonth = calendarHeader.querySelector('.calendar-next-month');
const calendarBody = document.querySelector('.calendar-body');

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

function renderCalendar() {
  const firstDayOfMonth = new Date(currentYear, currentMonth, 1);
  const daysInMonth = new Date(currentYear, currentMonth+1, 0).getDate();
  const startingDayOfMonth = firstDayOfMonth.getDay();

  calendarTitle.textContent = `${currentYear} - ${currentMonth+1}`;

  let html = '';
  let dayCount = 1;

  for(let i = 0; i < 6; i++) {
    let row = '<tr>';
    for(let j = 0; j < 7; j++) {
      if(i === 0 && j < startingDayOfMonth) {
        row += '<td></td>';
      } else if(dayCount > daysInMonth) {
        break;
      } else {
        const isToday = (dayCount === today.getDate() && currentMonth === today.getMonth() && currentYear === today.getFullYear());
        const isSelected = false;
        row += `<td class="calendar-day ${isToday ? 'is-today' : ''} ${isSelected ? 'is-selected' : ''}">${dayCount}</td>`;
        dayCount++;
      }
    }
    row += '</tr>';
    html += row;
    if(dayCount > daysInMonth) {
      break;
    }
  }

  calendarBody.innerHTML = html;
}

prevMonth.addEventListener('click', () => {
  currentMonth--;
  if(currentMonth < 0) {
    currentMonth = 11;
    currentYear--;
  }
  renderCalendar();
});

nextMonth.addEventListener('click', () => {
  currentMonth++;
  if(currentMonth > 11) {
    currentMonth = 0;
    currentYear++;
  }
  renderCalendar();
});

renderCalendar();

结语

使用 HTML 和 CSS 设计日历需要关注 HTML 结构、CSS 样式和 JS 代码三部分，其中样式设计需要重点关注，并且需要考虑不同的需求和场景。以上代码供参考，需要根据实际情况进行调整和改进。祝大家开发成功！