HTML生成可编辑的日历

要生成可编辑的日历，您可以使用 HTML、CSS 和 JavaScript。以下是一个简单的示例：

HTML 代码：

<div id="calendar"></div>

CSS 代码：

.calendar-day {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  padding: 10px;
  vertical-align: top;
  text-align: center;
  cursor: pointer;
}

.calendar-day:hover {
  background-color: #f5f5f5;
}

.calendar-day.selected {
  background-color: #007bff;
  color: #fff;
}

JavaScript 代码：

var calendar = document.getElementById("calendar");
var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

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

// 创建日历标题
var calendarTitle = document.createElement("h2");
calendarTitle.innerHTML = months[today.getMonth()] + " " + today.getFullYear();
calendar.appendChild(calendarTitle);

// 创建星期标题栏
var weekDays = document.createElement("div");
weekDays.classList.add("calendar-weekdays");
for (var i = 0; i < days.length; i++) {
  var day = document.createElement("div");
  day.innerHTML = days[i];
  weekDays.appendChild(day);
}
calendar.appendChild(weekDays);

// 创建日期格子
var currentMonth = today.getMonth();
var currentYear = today.getFullYear();
var daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
var firstDay = new Date(currentYear, currentMonth, 1).getDay();
var date = 1;
var day = 0;
var calendarDays = document.createElement("div");
calendarDays.classList.add("calendar-days");
while (date <= daysInMonth) {
  var calendarDay = document.createElement("div");
  calendarDay.classList.add("calendar-day");
  if (day < firstDay) {
    calendarDay.innerHTML = "";
  } else {
    calendarDay.innerHTML = date;
    calendarDay.setAttribute("data-date", currentMonth + 1 + "/" + date + "/" + currentYear);
    if (currentMonth === today.getMonth() && date === today.getDate()) {
      calendarDay.classList.add("today");
    }
    date++;
  }
  calendarDays.appendChild(calendarDay);
  day++;
}
calendar.appendChild(calendarDays);

// 添加点击事件监听器
var calendarDayElements = document.querySelectorAll(".calendar-day");
for (var i = 0; i < calendarDayElements.length; i++) {
  calendarDayElements[i].addEventListener("click", function() {
    // 取消先前选中的日期
    var selectedDayElement = document.querySelector(".calendar-day.selected");
    if (selectedDayElement) {
      selectedDayElement.classList.remove("selected");
    }
    // 选中当前日期
    this.classList.add("selected");
  });
}

这个示例会生成一个具有当前月份的日历，您可以通过单击日期来选择它。您可以使用 CSS 自定义样式并使用 JavaScript 处理选定日期的逻辑。