Small_goose_Vue3/pages/calendar/index.vue

<template>
  <view class="calendar-page">
    <view class="calendar-header">
      <text class="calendar-title">课程日历</text>
    </view>
    <view class="calendar-content">
      <view class="calendar-row calendar-week">
        <text v-for="w in weeks" :key="w">{{ w }}</text>
      </view>
      <view v-for="(row, i) in calendarRows" :key="i" class="calendar-row">
        <text v-for="d in row" :key="d" :class="{'today': isToday(d)}">{{ d > 0 ? d : '' }}</text>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      weeks: ['日','一','二','三','四','五','六'],
      calendarRows: this.getCalendarRows()
    }
  },
  methods: {
    getCalendarRows() {
      const d = new Date()
      const year = d.getFullYear()
      const month = d.getMonth()
      const firstDay = new Date(year, month, 1).getDay()
      const days = new Date(year, month + 1, 0).getDate()
      const rows = []
      let row = new Array(7).fill(0)
      let day = 1
      for (let i = 0; i < 6; i++) {
        for (let j = 0; j < 7; j++) {
          if (i === 0 && j < firstDay) continue
          if (day > days) break
          row[j] = day++
        }
        rows.push([...row])
        row = new Array(7).fill(0)
        if (day > days) break
      }
      return rows
    },
    isToday(d) {
      const now = new Date()
      return d === now.getDate()
    }
  }
}
</script>
<style scoped>
.calendar-page { padding: 40rpx; }
.calendar-header { text-align: center; margin-bottom: 32rpx; }
.calendar-title { font-size: 36rpx; font-weight: bold; color: #3498db; }
.calendar-content { background: #fff; border-radius: 16rpx; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04); padding: 24rpx; }
.calendar-row { display: flex; justify-content: space-between; margin-bottom: 8rpx; }
.calendar-week text { color: #888; font-size: 28rpx; flex: 1; text-align: center; }
.calendar-row text { flex: 1; text-align: center; font-size: 30rpx; color: #222; padding: 8rpx 0; border-radius: 8rpx; }
.today { background: #3498db; color: #fff; }
</style>