当前位置：首页 > JavaScript

js实现日历日程代码

2026-03-01 17:28:35JavaScript

以下是一个基于JavaScript实现的日历日程功能代码示例，包含基础日历渲染和日程管理功能：

日历渲染实现

class Calendar {
  constructor(year, month) {
    this.year = year || new Date().getFullYear();
    this.month = month || new Date().getMonth();
    this.schedules = {};
  }

  render() {
    const firstDay = new Date(this.year, this.month, 1);
    const lastDay = new Date(this.year, this.month + 1, 0);
    const daysInMonth = lastDay.getDate();
    const startDay = firstDay.getDay();

    let html = `<div class="calendar-header">${this.year}年${this.month + 1}月</div>`;
    html += '<div class="calendar-grid">';

    // 星期标题
    const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
    weekdays.forEach(day => {
      html += `<div class="weekday">${day}</div>`;
    });

    // 填充空白格
    for (let i = 0; i < startDay; i++) {
      html += '<div class="day empty"></div>';
    }

    // 填充日期格
    for (let day = 1; day <= daysInMonth; day++) {
      const dateKey = `${this.year}-${this.month + 1}-${day}`;
      const schedules = this.schedules[dateKey] || [];
      html += `<div class="day" data-date="${dateKey}">${day}
        ${schedules.length > 0 ? `<span class="schedule-badge">${schedules.length}</span>` : ''}
      </div>`;
    }

    html += '</div>';
    return html;
  }
}

日程管理功能

class ScheduleManager {
  constructor(calendar) {
    this.calendar = calendar;
  }

  addSchedule(date, title, description) {
    if (!this.calendar.schedules[date]) {
      this.calendar.schedules[date] = [];
    }
    this.calendar.schedules[date].push({
      title,
      description,
      id: Date.now()
    });
  }

  removeSchedule(date, id) {
    if (this.calendar.schedules[date]) {
      this.calendar.schedules[date] = this.calendar.schedules[date].filter(
        item => item.id !== id
      );
    }
  }

  getSchedules(date) {
    return this.calendar.schedules[date] || [];
  }
}

完整示例使用

// 初始化日历
const calendar = new Calendar(2023, 5); // 2023年6月
const scheduleManager = new ScheduleManager(calendar);

// 添加日程
scheduleManager.addSchedule('2023-6-15', '会议', '项目进度讨论');
scheduleManager.addSchedule('2023-6-20', '生日', '朋友生日聚会');

// 渲染日历
document.getElementById('calendar').innerHTML = calendar.render();

// 点击日期显示日程
document.querySelectorAll('.day').forEach(day => {
  day.addEventListener('click', function() {
    const date = this.getAttribute('data-date');
    const schedules = scheduleManager.getSchedules(date);

    if (schedules.length > 0) {
      let scheduleHtml = schedules.map(s => `
        <div class="schedule-item">
          <h4>${s.title}</h4>
          <p>${s.description}</p>
          <button onclick="removeSchedule('${date}', ${s.id})">删除</button>
        </div>
      `).join('');
      document.getElementById('schedule-detail').innerHTML = scheduleHtml;
    }
  });
});

// 全局删除函数
window.removeSchedule = function(date, id) {
  scheduleManager.removeSchedule(date, id);
  document.getElementById('calendar').innerHTML = calendar.render();
};

配套CSS样式

.calendar-header {
  text-align: center;
  font-size: 1.5em;
  padding: 10px;
  background: #f0f0f0;
}

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

.weekday, .day {
  padding: 10px;
  text-align: center;
  border: 1px solid #ddd;
}

.day {
  cursor: pointer;
  position: relative;
  min-height: 60px;
}

.day:hover {
  background: #f5f5f5;
}

.schedule-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: red;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.schedule-item {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}