当前位置：首页 > CSS

css日历制作

2026-02-12 18:32:45CSS

基础日历结构

使用HTML创建日历的基本框架，通常包含表格式布局。以下是一个简单的日历HTML结构示例：

<div class="calendar">
  <div class="header">
    <button class="prev">←</button>
    <h2 class="month-year">June 2023</h2>
    <button class="next">→</button>
  </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"></div>
</div>

基础样式设计

为日历添加基础CSS样式，包括布局、颜色和字体：

.calendar {
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #4285f4;
  color: white;
}

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

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

动态日期填充

使用JavaScript动态生成日期格子，并处理月份切换：

function renderCalendar(month, year) {
  const daysContainer = document.querySelector('.days');
  daysContainer.innerHTML = '';

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

  // 填充空白格子
  for (let i = 0; i < firstDay; i++) {
    const emptyDay = document.createElement('div');
    emptyDay.classList.add('empty');
    daysContainer.appendChild(emptyDay);
  }

  // 填充日期格子
  for (let day = 1; day <= daysInMonth; day++) {
    const dayElement = document.createElement('div');
    dayElement.textContent = day;
    dayElement.classList.add('day');
    daysContainer.appendChild(dayElement);
  }
}

// 初始化日历
const currentDate = new Date();
renderCalendar(currentDate.getMonth(), currentDate.getFullYear());

交互样式增强

为日期格子添加悬停和选中效果：

.day {
  padding: 10px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.day:hover {
  background-color: #e6e6e6;
}

.day.selected {
  background-color: #4285f4;
  color: white;
}

.empty {
  padding: 10px;
  visibility: hidden;
}

响应式设计

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

@media (max-width: 400px) {
  .calendar {
    width: 100%;
    border-radius: 0;
  }

  .day {
    padding: 8px 5px;
    font-size: 14px;
  }
}

完整实现示例

将所有代码组合在一起，并添加月份切换功能：

document.querySelector('.prev').addEventListener('click', () => {
  currentDate.setMonth(currentDate.getMonth() - 1);
  updateCalendar();
});

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

function updateCalendar() {
  const monthNames = ["January", "February", "March", "April", "May", "June",
                      "July", "August", "September", "October", "November", "December"];
  document.querySelector('.month-year').textContent = 
    `${monthNames[currentDate.getMonth()]} ${currentDate.getFullYear()}`;

  renderCalendar(currentDate.getMonth(), currentDate.getFullYear());
}

这个实现创建了一个功能完整的CSS日历，包含月份导航、日期选择和响应式设计。可以根据需要进一步自定义样式和功能。

css日历制作