日历js实现
日历功能在前端开发中较为常见，通常用于日期选择、事件展示等场景。以下是基于JavaScript实现日历的核心方法和代码示例：
基础日历结构
HTML部分需包含日历容器和导航控件：
<div class="calendar">
<div class="header">
<button id="prev">←</button>
<h2 id="month-year"></h2>
<button id="next">→</button>
</div>
<div class="days">
<div class="day">Sun</div>
<div class="day">Mon</div>
<!-- 省略其他星期 -->
</div>
<div id="dates" class="dates"></div>
</div>核心逻辑实现
JavaScript部分主要处理日期渲染和导航：
const monthYear = document.getElementById('month-year');
const datesContainer = document.getElementById('dates');
let currentDate = new Date();
function renderCalendar() {
const year = currentDate.getFullYear();
const month = currentDate.getMonth();
// 获取当月第一天和最后一天
const firstDay = new Date(year, month, 1);
const lastDay = new Date(year, month + 1, 0);
// 更新标题
monthYear.textContent = `${firstDay.toLocaleString('default', { month: 'long' })} ${year}`;
// 清空日期容器
datesContainer.innerHTML = '';
// 生成日期格子
for (let i = 0; i < firstDay.getDay(); i++) {
const emptyDiv = document.createElement('div');
datesContainer.appendChild(emptyDiv);
}
for (let i = 1; i <= lastDay.getDate(); i++) {
const dateDiv = document.createElement('div');
dateDiv.textContent = i;
datesContainer.appendChild(dateDiv);
}
}
// 添加导航事件
document.getElementById('prev').addEventListener('click', () => {
currentDate.setMonth(currentDate.getMonth() - 1);
renderCalendar();
});
document.getElementById('next').addEventListener('click', () => {
currentDate.setMonth(currentDate.getMonth() + 1);
renderCalendar();
});
// 初始化日历
renderCalendar();样式优化
基础CSS样式可增强可视化效果：
.calendar {
width: 300px;
border: 1px solid #ddd;
font-family: Arial;
}
.header {
display: flex;
justify-content: space-between;
padding: 10px;
background: #f5f5f5;
}
.days {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
}
.dates {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-gap: 5px;
padding: 5px;
}高级功能扩展
-
日期选择功能
datesContainer.addEventListener('click', (e) => { if (e.target.textContent && !isNaN(e.target.textContent)) { document.querySelectorAll('.dates div').forEach(el => { el.classList.remove('selected'); }); e.target.classList.add('selected'); } }); -
事件标记 可通过添加数据属性实现特殊日期标记：
// 在renderCalendar循环中添加 if (isEventDate(year, month, i)) { dateDiv.classList.add('has-event'); } -
国际化支持 使用Intl API实现多语言：
monthYear.textContent = new Intl.DateTimeFormat('en-US', { month: 'long', year: 'numeric' }).format(currentDate);
以上代码构建了一个可交互的基础日历组件，可根据实际需求进一步扩展功能如周视图切换、范围选择等。对于更复杂的需求，建议考虑使用现成的库如FullCalendar、Flatpickr等。
