制作日历js css

基础HTML结构

日历需要一个容器元素，通常使用<div>，并为其分配ID以便JavaScript操作。

<div id="calendar"></div>

CSS样式设计

日历的视觉样式可以通过CSS自定义，以下是一个简约风格的示例：

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

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

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

.day-header {
  text-align: center;
  font-weight: bold;
  padding: 5px;
}

.day-cell {
  text-align: center;
  padding: 10px;
  cursor: pointer;
  border-radius: 3px;
}

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

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

JavaScript动态生成

使用JavaScript动态生成日历内容，包括月份、日期和导航功能。

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  let currentDate = new Date();

  function renderCalendar(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();

    const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

    let html = `
      <div class="calendar-header">
        <button id="prev-month">←</button>
        <h3>${monthNames[month]} ${year}</h3>
        <button id="next-month">→</button>
      </div>
      <div class="calendar-body">
    `;

    // 添加星期标题
    dayNames.forEach(day => {
      html += `<div class="day-header">${day}</div>`;
    });

    // 填充空白（上个月的日期）
    for (let i = 0; i < firstDay; i++) {
      html += `<div class="day-cell"></div>`;
    }

    // 填充当前月的日期
    const today = new Date();
    for (let i = 1; i <= daysInMonth; i++) {
      const isToday = i === today.getDate() && month === today.getMonth() && year === today.getFullYear();
      html += `<div class="day-cell ${isToday ? 'today' : ''}">${i}</div>`;
    }

    html += `</div>`;
    calendarEl.innerHTML = html;

    // 添加事件监听器
    document.getElementById('prev-month').addEventListener('click', () => {
      currentDate.setMonth(currentDate.getMonth() - 1);
      renderCalendar(currentDate);
    });

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

  renderCalendar(currentDate);
});

功能扩展

1. 日期点击事件：为day-cell添加点击事件，触发自定义逻辑（如显示详情）。

   

   document.querySelectorAll('.day-cell').forEach(cell => {
     cell.addEventListener('click', () => {
       if (cell.textContent) alert(`Selected date: ${currentDate.getMonth() + 1}/${cell.textContent}/${currentDate.getFullYear()}`);
     });
   });

2. 国际化支持：替换monthNames和dayNames为其他语言的数组。

3. 主题切换：通过CSS变量实现动态主题。

   :root {
     --primary-color: #4285f4;
   }
   .calendar-header {
     background: var(--primary-color);
   }

注意事项

• 确保CSS和JavaScript文件正确链接到HTML。
• 移动端适配可通过媒体查询调整宽度和字体大小。
• 如需更复杂功能（如事件标记），需结合后端数据或本地存储。