如何用CSS制作数据日历组件—网格布局方案

<div class="calendar-grid">
  <!-- 星期几的头部 -->
  <div class="day-of-week">周一</div>
  <div class="day-of-week">周二</div>
  <div class="day-of-week">周三</div>
  <div class="day-of-week">周四</div>
  <div class="day-of-week">周五</div>
  <div class="day-of-week">周六</div>
  <div class="day-of-week">周日</div>

  <!-- 日期单元格，这里是示例，实际会动态生成 -->
  <div class="date-cell empty"></div> <!-- 上个月的空白日 -->
  <div class="date-cell empty"></div>
  <div class="date-cell">1</div>
  <div class="date-cell">2</div>
  <!-- ... 更多日期单元格 -->
  <div class="date-cell">31</div>
  <div class="date-cell empty"></div> <!-- 下个月的空白日 -->
</div>

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* 7列等宽 */
  gap: 5px; /* 日期单元格之间的间距 */
  padding: 10px;
  border: 1px solid #eee;
  max-width: 900px;
  margin: 20px auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.day-of-week {
  text-align: center;
  font-weight: bold;
  padding: 8px 0;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ddd;
}

.date-cell {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  padding: 15px 5px;
  text-align: center;
  display: flex; /* 内部内容居中 */
  justify-content: center;
  align-items: center;
  min-height: 80px; /* 确保每个格子有一定高度 */
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.date-cell:hover {
  background-color: #f9f9f9;
}

.date-cell.empty {
  background-color: #f8f8f8;
  color: #ccc;
  cursor: default;
}

.date-cell.start-wednesday {
  grid-column-start: 3; /* 让这个单元格从第3列开始 */
}

// 假设 currentMonthFirstDay 是一个 Date 对象，表示当前月的第一天
const firstDayOfWeek = currentMonthFirstDay.getDay(); // 0 (周日) - 6 (周六)
const gridColumnStart = firstDayOfWeek === 0 ? 7 : firstDayOfWeek; // 调整为1-7，周日是7

// 然后在生成日期单元格时，给第一个日期单元格添加样式
// 例如：<div class="date-cell" style="grid-column-start: ${gridColumnStart};">1</div>

<!-- 示例HTML片段 -->
<div class="date-cell today">15</div>
<div class="date-cell selected">20</div>
<div class="date-cell holiday">1</div>
<div class="date-cell other-month">28</div>
<div class="date-cell has-event">10</div>

/* 今日的样式 */
.date-cell.today {
  background-color: #e6f7ff; /* 浅蓝色背景 */
  border-color: #91d5ff; /* 蓝色边框 */
  font-weight: bold;
  color: #1890ff;
}

/* 选中日期的样式 */
.date-cell.selected {
  background-color: #1890ff; /* 蓝色背景 */
  color: #fff; /* 白色文字 */
  border-color: #1890ff;
  box-shadow: 0 2px 4px rgba(24, 144, 255, 0.2);
}

/* 节假日的样式 */
.date-cell.holiday {
  color: #f5222d; /* 红色文字 */
  /* 可以添加一个小图标或者底部边框 */
  position: relative;
}
.date-cell.holiday::after {
  content: "假";
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 10px;
  background-color: #f5222d;
  color: #fff;
  border-radius: 2px;
  padding: 0 3px;
}

/* 非当前月份日期的样式 */
.date-cell.other-month {
  color: #b0b0b0; /* 浅灰色文字 */
  background-color: #fafafa;
  cursor: default;
}

/* 有事件的日期 */
.date-cell.has-event {
  position: relative;
}
.date-cell.has-event::before {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background-color: #faad14; /* 小黄点表示有事件 */
  border-radius: 50%;
}