日历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;
}

高级功能扩展

1. 日期选择功能

   

   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');
   }
   });

2. 事件标记 可通过添加数据属性实现特殊日期标记：

   // 在renderCalendar循环中添加
   if (isEventDate(year, month, i)) {
   dateDiv.classList.add('has-event');
   }

3. 国际化支持 使用Intl API实现多语言：

   monthYear.textContent = new Intl.DateTimeFormat('en-US', {
   month: 'long',
   year: 'numeric'
   }).format(currentDate);

以上代码构建了一个可交互的基础日历组件，可根据实际需求进一步扩展功能如周视图切换、范围选择等。对于更复杂的需求，建议考虑使用现成的库如FullCalendar、Flatpickr等。