css日历制作

基础日历结构

使用HTML创建一个简单的日历结构，包含星期标题和日期格子。以下是一个基础的HTML框架：

<div class="calendar">
  <div class="header">
    <span class="month">January 2023</span>
  </div>
  <div class="weekdays">
    <div>Sun</div>
    <div>Mon</div>
    <div>Tue</div>
    <div>Wed</div>
    <div>Thu</div>
    <div>Fri</div>
    <div>Sat</div>
  </div>
  <div class="days">
    <!-- 日期格子将通过JavaScript动态生成 -->
  </div>
</div>

CSS样式设计

为日历添加基本样式，使其具备视觉吸引力：

.calendar {
  font-family: Arial, sans-serif;
  width: 300px;
  border: 1px solid #ddd;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.header {
  background: #4285f4;
  color: white;
  padding: 10px;
  text-align: center;
  font-weight: bold;
}

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

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

.days div {
  padding: 10px;
  min-height: 30px;
  background: white;
  text-align: center;
  cursor: pointer;
}

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

.days .prev-month,
.days .next-month {
  color: #aaa;
}

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

动态生成日期

使用JavaScript动态填充日期格子，处理月份切换：

document.addEventListener('DOMContentLoaded', function() {
  const monthDisplay = document.querySelector('.month');
  const daysContainer = document.querySelector('.days');
  let currentDate = new Date();

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

    monthDisplay.textContent = 
      new Date(year, month).toLocaleString('default', { month: 'long', year: 'numeric' });

    daysContainer.innerHTML = '';

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

    // 上个月的最后几天
    for (let i = firstDay - 1; i >= 0; i--) {
      const dayElement = document.createElement('div');
      dayElement.textContent = daysInPrevMonth - i;
      dayElement.classList.add('prev-month');
      daysContainer.appendChild(dayElement);
    }

    // 当前月的日期
    const today = new Date();
    for (let i = 1; i <= daysInMonth; i++) {
      const dayElement = document.createElement('div');
      dayElement.textContent = i;

      if (month === today.getMonth() && 
          year === today.getFullYear() && 
          i === today.getDate()) {
        dayElement.classList.add('today');
      }

      daysContainer.appendChild(dayElement);
    }

    // 下个月的前几天
    const totalCells = firstDay + daysInMonth;
    const remainingCells = 42 - totalCells; // 6行x7天

    for (let i = 1; i <= remainingCells; i++) {
      const dayElement = document.createElement('div');
      dayElement.textContent = i;
      dayElement.classList.add('next-month');
      daysContainer.appendChild(dayElement);
    }
  }

  renderCalendar();
});

响应式设计

添加媒体查询使日历适应不同屏幕尺寸：

@media (max-width: 600px) {
  .calendar {
    width: 100%;
  }

  .days div {
    padding: 5px;
    min-height: 20px;
  }
}

高级功能扩展

为日历添加月份导航功能：

// 在HTML中添加导航按钮
<div class="navigation">
  <button class="prev">❮</button>
  <button class="next">❯</button>
</div>

// 在CSS中添加样式
.navigation {
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
  background: #f1f1f1;
}

.navigation button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

// 在JavaScript中添加事件监听
document.querySelector('.prev').addEventListener('click', () => {
  currentDate.setMonth(currentDate.getMonth() - 1);
  renderCalendar();
});

document.querySelector('.next').addEventListener('click', () => {
  currentDate.setMonth(currentDate.getMonth() + 1);
  renderCalendar();
});

日期选择功能

实现点击日期时的交互效果：

daysContainer.addEventListener('click', (e) => {
  if (e.target.tagName === 'DIV' && !e.target.classList.contains('prev-month') && 
      !e.target.classList.contains('next-month')) {
    // 移除之前选中的样式
    document.querySelectorAll('.days div.selected').forEach(el => {
      el.classList.remove('selected');
    });

    // 添加选中样式
    e.target.classList.add('selected');

    // 可以在这里添加处理选中日期的逻辑
    const selectedDate = new Date(
      currentDate.getFullYear(),
      currentDate.getMonth(),
      parseInt(e.target.textContent)
    );
    console.log('Selected date:', selectedDate);
  }
});

// 在CSS中添加选中样式
.days div.selected {
  background: #4285f4;
  color: white;
}