WebProject/vue_project/src/components/CalendarTable.vue

<template>
  <div class="calendar-table">
    <table>
      <thead>
        <tr>
          <th>日</th>
          <th>一</th>
          <th>二</th>
          <th>三</th>
          <th>四</th>
          <th>五</th>
          <th>六</th>
        </tr>
      </thead>
      <tbody>
        <!-- 填充的月份数据 -->
        <tr v-for="(week, weekIndex) in formattedCalendar" :key="weekIndex">
          <td v-for="(day, dayIndex) in week" :key="dayIndex" :class="{ 'event': day.event }">
            <span v-if="day.date !== null">{{ day.date }}</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'CalendarTable',
  data() {
    // 起始和结束日期
    const startDate = new Date(2023, 7, 26); // 2023年8月26日，注意月份减1
    const endDate = new Date(2024, 1, 16); // 2024年2月16日，注意结束日期需加一天以包含该日

    // 初始化日期数组并填充起始日期前的空位以对齐星期
    let currentDate = new Date(startDate);
    currentDate.setDate(currentDate.getDate() - currentDate.getDay()); // 回退到当周的周一
    let calendarData = [];

    while (currentDate <= endDate) {
      calendarData.push(new Date(currentDate));
      currentDate.setDate(currentDate.getDate() + 1);
    }

    // 将日期分组到每周
    const weeks = [];
    for (let i = 0; i < calendarData.length; i += 7) {
      weeks.push(calendarData.slice(i, i + 7));
    }

    // 假设的事件数据，这里应根据实际需求添加
    const events = {
      '2023-08-26': '示例事件1', // 假定示例事件
      // ...其他事件
      '2024-02-16': '示例事件2' // 结束日期的事件
    };

    // 格式化日期并标记事件
    const formattedCalendar = weeks.map(week =>
      week.map(day => {
        const dateString = day.toISOString().split('T')[0];
        return {
          date: day.getDate(),
          event: events[dateString]
        };
      })
    );

    return {
      formattedCalendar
    };
  }
};
</script>

<style scoped>
.calendar-table {
  width: 100%;
  border-collapse: collapse;
}

.calendar-table th,
.calendar-table td {
  border: 1px solid #ddd;
  padding: 4px;
  text-align: center;
}

.calendar-table th {
  background-color: #ccc;
  font-weight: bold;
}

.calendar-table td {
  height: 50px;
  width: 50px;
  padding: 13px;
}

.calendar-table tr:nth-child(even) td {
  background-color: #f8f8f8;
}

.calendar-table .event {
  font-weight: bold;
  color: purple;
}

.calendar-table td span {
  display: block;
  text-align: left;
  margin-left: 5px;
}
</style>