基于HTML、CSS与JavaScript开发的交互式日历组件，通过HTML构建日期网格结构，CSS实现响应式布局与视觉美化，JavaScript处理动态交互逻辑，支持月份/年份切换、日期选中、事件标记及节假日高亮，可适配不同终端显示，适用于网页日程管理、活动安排等场景，具备良好的用户体验与扩展性。
使用HTML、CSS和JavaScript构建功能完整的日历组件
日历作为网页中常见的交互组件,广泛应用于日程管理、事件预约、日期选择等场景，本文将详细介绍如何使用原生HTML、CSS和JavaScript从零开始构建一个功能完整的日历组件，包含日期显示、月份切换、日期选择等核心功能，并探讨样式美化和交互优化的实用技巧。
HTML结构搭建：语义化构建日历骨架
HTML是网页的骨架,日历组件的结构需要清晰且语义化，便于后续样式编写和JavaScript交互，我们将日历拆分为三个核心部分：头部（年月显示）、和日期网格。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">原生日历组件</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="calendar-container">
<header class="calendar-header">
<button class="prev-month" id="prevMonth">‹</button>
<h2 class="current-month" id="currentMonth">2024年1月</h2>
<button class="next-month" id="nextMonth">›</button>
</header>
<section class="calendar-weekdays">
<span class="weekday">日</span>
<span class="weekday">一</span>
<span class="weekday">二</span>
<span class="weekday">三</span>
<span class="weekday">四</span>
<span class="weekday">五</span>
<span class="weekday">六</span>
</section>
<div class="calendar-days" id="calendarDays">
<!-- 日期将通过JavaScript动态生成 -->
</div>
</main>
<script src="script.js"></script>
</body>
</html>
结构说明：
calendar-container：日历的根容器，包含所有子元素，为整个日历提供统一的样式和布局基础。calendar-header：头部区域，包含"上一月"、"下一月"导航按钮和当前年月标题，提供月份切换功能。calendar-weekdays区域，固定显示"日"到"六"，为用户提供日期参考。calendar-days：日期网格容器，用于动态渲染每个月的日期，是日历的主体部分。
CSS样式设计：从布局到交互的美化
CSS负责日历的视觉呈现,我们需要通过布局、颜色、动画等让日历美观且易用，这里采用Flexbox和Grid结合的布局方式，并添加交互状态效果，提升用户体验。
/* style.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.calendar-container {
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
overflow: hidden;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.prev-month, .next-month {
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
transition: transform 0.2s;
padding: 5px;
border-radius: 50%;
}
.prev-month:hover, .next-month:hover {
transform: scale(1.2);
background-color: rgba(255, 255, 255, 0.2);
}
.current-month {
font-size: 18px;
font-weight: 600;
}
.calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
padding: 15px 0;
background-color: #f8f9fa;
border-bottom: 1px solid #e9ecef;
}
.weekday {
font-size: 14px;
font-weight: 500;
color: #6c757d;
}
.calendar-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
padding: 10px;
}
.day {
aspect-ratio: 1;
display: flex;
justify-content: center;
align-items: center;
margin: 2px;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
position: relative;
}
.day:hover {
background-color: #e9ecef;
transform: translateY(-2px);
}
.day.other-month {
color: #ccc;
}
.day.today {
background-color: #667eea;
color: white;
font-weight: bold;
}
.day.selected {
background-color: #764ba2;
color: white;
}
JavaScript功能实现：日历交互逻辑
JavaScript是日历组件的核心,负责动态生成日期、处理用户交互和状态管理，以下是实现日历功能的关键代码：
// script.js
document.addEventListener('DOMContentLoaded', function() {
const calendarDays = document.getElementById('calendarDays');
const currentMonthElement = document.getElementById('currentMonth');
const prevMonthButton = document.getElementById('prevMonth');
const nextMonthButton = document.getElementById('nextMonth');
let currentDate = new Date();
let selectedDate = null;
// 月份名称
const monthNames = [
'1月', '2月', '3月', '4月', '5月', '6月',
'7月', '8月', '9月', '10月', '11月', '12月'
];
