帮我写一个前端小程序平铺日历代码

下面是一个简单的前端小程序平铺日历代码：

HTML：

<div class="calendar">
  <div class="calendar-header">
    <div class="prev-month">&lt;</div>
    <div class="current-month">July 2021</div>
    <div class="next-month">&gt;</div>
  </div>
  <div class="calendar-body">
    <div class="calendar-weekdays">
      <div class="weekday">Sun</div>
      <div class="weekday">Mon</div>
      <div class="weekday">Tue</div>
      <div class="weekday">Wed</div>
      <div class="weekday">Thu</div>
      <div class="weekday">Fri</div>
      <div class="weekday">Sat</div>
    </div>
    <div class="calendar-days"></div>
  </div>
</div>

CSS：

.calendar {
  border: 1px solid #ccc;
  width: 300px;
  font-family: Arial, sans-serif;
}
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #eee;
  padding: 10px;
}
.calendar-header div {
  cursor: pointer;
}
.current-month {
  font-weight: bold;
}
.calendar-weekdays {
  display: flex;
  justify-content: space-between;
  background-color: #eee;
  padding: 10px;
}
.weekday {
  font-weight: bold;
}
.calendar-days {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}
.day {
  width: 14.28%;
  text-align: center;
  padding: 5px;
}
.current-day {
  background-color: #ccc;
}

JavaScript：

const calendarBody = document.querySelector('.calendar-days');
const prevMonth = document.querySelector('.prev-month');
const nextMonth = document.querySelector('.next-month');
const currentMonth = document.querySelector('.current-month');

let date = new Date();
let year = date.getFullYear();
let month = date.getMonth();

renderCalendar(year, month);

prevMonth.addEventListener('click', () => {
  month--;
  if (month < 0) {
    year--;
    month = 11;
  }
  renderCalendar(year, month);
});

nextMonth.addEventListener('click', () => {
  month++;
  if (month > 11) {
    year++;
    month = 0;
  }
  renderCalendar(year, month);
});

function renderCalendar(year, month) {
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  const firstDayOfMonth = new Date(year, month, 1).getDay();
  const lastDayOfMonth = new Date(year, month, daysInMonth).getDay();

  currentMonth.textContent = `${months[month]} ${year}`;

  let days = '';

  for (let i = 1; i <= daysInMonth + firstDayOfMonth; i++) {
    const day = i - firstDayOfMonth;
    if (i > firstDayOfMonth) {
      if (i <= daysInMonth + firstDayOfMonth) {
        days += `<div class="day">${day}</div>`;
      }
    } else {
      days += `<div class="day"></div>`;
    }
  }

  if (lastDayOfMonth !== 6) {
    const daysToAdd = 6 - lastDayOfMonth;
    for (let i = 0; i < daysToAdd; i++) {
      days += `<div class="day"></div>`;
    }
  }

  calendarBody.innerHTML = days;
}

这段代码实现了一个简单的平铺式日历，可以通过左右箭头按钮来切换月份。每个月份的日期都按照平铺式排列。