开发一个日历插件的代码

以下是一个简单的日历插件代码，使用 HTML、CSS 和 JavaScript 实现：

HTML 代码：

<div class="calendar">
  <div class="calendar-header">
    <button class="prev-btn">&lt;</button>
    <div class="calendar-title"></div>
    <button class="next-btn">&gt;</button>
  </div>
  <div class="calendar-body"></div>
</div>

CSS 代码：

.calendar {
  width: 300px;
  border: 1px solid #ccc;
  font-family: Arial, sans-serif;
}

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

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

.calendar-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  cursor: pointer;
}

.calendar-cell:hover {
  background-color: #f2f2f2;
}

.calendar-cell.today {
  background-color: #ccc;
}

JavaScript 代码：

// 获取当前日期
const today = new Date();

// 获取年份、月份、日期
let year = today.getFullYear();
let month = today.getMonth();
let date = today.getDate();

// 获取日历容器
const calendar = document.querySelector('.calendar');

// 获取标题和主体
const title = calendar.querySelector('.calendar-title');
const body = calendar.querySelector('.calendar-body');

// 获取上一个月按钮和下一个月按钮
const prevBtn = calendar.querySelector('.prev-btn');
const nextBtn = calendar.querySelector('.next-btn');

// 绘制日历
function drawCalendar(year, month) {
  // 设置标题
  title.textContent = `${year}年${month + 1}月`;

  // 清空主体内容
  body.innerHTML = '';

  // 获取当月第一天
  const firstDay = new Date(year, month, 1);

  // 获取当月最后一天
  const lastDay = new Date(year, month + 1, 0);

  // 获取上个月最后一天
  const prevLastDay = new Date(year, month, 0);

  // 计算当月第一天是星期几
  const firstDayOfWeek = firstDay.getDay();

  // 计算当月最后一天是星期几
  const lastDayOfWeek = lastDay.getDay();

  // 计算上个月最后一天是几号
  const prevLastDate = prevLastDay.getDate();

  // 计算当月最后一天是几号
  const lastDate = lastDay.getDate();

  // 计算总共要显示多少天
  const totalDays = 42;

  // 计算上个月要显示的天数
  const prevDays = firstDayOfWeek;

  // 计算下个月要显示的天数
  const nextDays = totalDays - prevDays - lastDate;

  // 绘制上个月的日期
  for (let i = prevDays - 1; i >= 0; i--) {
    const cell = document.createElement('div');
    cell.classList.add('calendar-cell');
    cell.textContent = prevLastDate - i;
    body.appendChild(cell);
  }

  // 绘制当月的日期
  for (let i = 1; i <= lastDate; i++) {
    const cell = document.createElement('div');
    cell.classList.add('calendar-cell');
    cell.textContent = i;
    if (year === today.getFullYear() && month === today.getMonth() && i === today.getDate()) {
      cell.classList.add('today');
    }
    body.appendChild(cell);
  }

  // 绘制下个月的日期
  for (let i = 1; i <= nextDays; i++) {
    const cell = document.createElement('div');
    cell.classList.add('calendar-cell');
    cell.textContent = i;
    body.appendChild(cell);
  }
}

// 初始化日历
drawCalendar(year, month);

// 上一个月按钮点击事件
prevBtn.addEventListener('click', () => {
  month--;
  if (month < 0) {
    year--;
    month = 11;
  }
  drawCalendar(year, month);
});

// 下一个月按钮点击事件
nextBtn.addEventListener('click', () => {
  month++;
  if (month > 11) {
    year++;
    month = 0;
  }
  drawCalendar(year, month);
});

这个日历插件可以显示当前月份的日历，并且支持点击上一个月和下一个月的按钮来切换月份。你可以根据自己的需求进行修改和扩展。