css制作日历

使用CSS Grid布局制作日历

日历的布局适合使用CSS Grid实现，可以轻松定义行和列的结构。以下是一个基础的日历HTML结构和CSS样式：

<div class="calendar">
  <div class="header">周日</div>
  <div class="header">周一</div>
  <!-- 其他星期标题 -->
  <div class="day">1</div>
  <div class="day">2</div>
  <!-- 其他日期格子 -->
</div>

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  max-width: 500px;
}

.header {
  background: #f0f0f0;
  text-align: center;
  padding: 10px;
}

.day {
  border: 1px solid #ddd;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

添加月份标题和样式美化

为日历添加月份标题和更好的视觉效果：

.month-title {
  grid-column: span 7;
  text-align: center;
  font-size: 1.5em;
  padding: 10px;
}

.day:hover {
  background-color: #e6f7ff;
  cursor: pointer;
}

.other-month {
  color: #aaa;
  background-color: #f9f9f9;
}

实现响应式日历

使用媒体查询让日历在不同屏幕尺寸下表现良好：

@media (max-width: 600px) {
  .calendar {
    grid-template-columns: repeat(7, 30px);
    font-size: 0.8em;
  }

  .day {
    height: 30px;
  }
}

添加JavaScript动态生成日期

结合JavaScript动态生成日历日期会更实用：

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

  // 生成日期格子
  let html = '';

  // 添加空白格子
  for (let i = 0; i < firstDay; i++) {
    html += `<div class="day other-month"></div>`;
  }

  // 添加当月日期
  for (let i = 1; i <= daysInMonth; i++) {
    html += `<div class="day">${i}</div>`;
  }

  document.querySelector('.calendar').innerHTML += html;
}

完整日历组件示例

结合HTML、CSS和JavaScript的完整日历组件：

<div class="calendar-container">
  <div class="month-title">2023年10月</div>
  <div class="weekdays">
    <div>日</div>
    <div>一</div>
    <div>二</div>
    <div>三</div>
    <div>四</div>
    <div>五</div>
    <div>六</div>
  </div>
  <div class="days"></div>
</div>

.calendar-container {
  font-family: Arial, sans-serif;
  max-width: 600px;
  margin: 0 auto;
}

.month-title {
  text-align: center;
  font-size: 1.5em;
  padding: 15px;
  background: #4285f4;
  color: white;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #f1f1f1;
  text-align: center;
  padding: 10px 0;
}

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  padding: 5px;
}

.days div {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  border: 1px solid #eee;
}

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

.days div:hover {
  background: #e3f2fd;
}

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

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

  let daysHTML = '';

  // 空白格子
  for (let i = 0; i < firstDay; i++) {
    daysHTML += `<div></div>`;
  }

  // 日期格子
  for (let i = 1; i <= daysInMonth; i++) {
    const isToday = i === date.getDate() && month === new Date().getMonth();
    daysHTML += `<div class="${isToday ? 'today' : ''}">${i}</div>`;
  }

  document.querySelector('.days').innerHTML = daysHTML;
  document.querySelector('.month-title').textContent = 
    `${year}年${month + 1}月`;
}

renderCalendar();