YNUtdPlatform/pages/workPlan/index/components/calendar.vue

<template>
  <view class="calendar">
    <!-- <view class="header">
      <text @click="changeMonth(-1)">《</text>
      <text>{{ currentYear }}年{{ currentMonth + 1 }}月</text>
      <text @click="changeMonth(1)">》</text>
    </view> -->
    <view class="weekdays">
      <text v-for="day in weekdays" :key="day">{{ day }}</text>
    </view>
    <view class="days">
      <view
        v-for="day in days"
        :key="day.date"
        :class="{ 'current-month': day.currentMonth, 'other-month': !day.currentMonth }"
        @click="selectDate(day)"
      >
        <text style="font-weight: bold">{{ day.day }}</text>
        <view class="risk-container">
          <text>中:9</text>
          <text>低:30</text>
          <text>可接受:4</text>
        </view>
        <!-- <view>999</view> -->
        <!-- <view v-if="day.customContent" class="custom-content">
          {{ day.customContent }}
        </view> -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth(),
      weekdays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      days: [],
      customDates: {
        '2023-06-15': '自定义内容'
      }
    }
  },
  mounted() {
    this.generateCalendar()
  },
  methods: {
    generateCalendar() {
      const firstDay = new Date(this.currentYear, this.currentMonth, 1)
      const lastDay = new Date(this.currentYear, this.currentMonth + 1, 0)
      const daysInMonth = lastDay.getDate()
      const startingDay = firstDay.getDay()

      this.days = []

      for (let i = 0; i < startingDay; i++) {
        const prevMonthLastDay = new Date(this.currentYear, this.currentMonth, 0).getDate()
        this.days.push({
          day: prevMonthLastDay - startingDay + i + 1,
          currentMonth: false,
          date: new Date(this.currentYear, this.currentMonth - 1, prevMonthLastDay - startingDay + i + 1)
        })
      }

      for (let i = 1; i <= daysInMonth; i++) {
        const date = new Date(this.currentYear, this.currentMonth, i)
        const dateString = `${this.currentYear}-${String(this.currentMonth + 1).padStart(2, '0')}-${String(i).padStart(
          2,
          '0'
        )}`
        this.days.push({
          day: i,
          currentMonth: true,
          date: date,
          customContent: this.customDates[dateString]
        })
      }

      const remainingDays = 42 - this.days.length
      for (let i = 1; i <= remainingDays; i++) {
        this.days.push({
          day: i,
          currentMonth: false,
          date: new Date(this.currentYear, this.currentMonth + 1, i)
        })
      }
    },
    changeMonth(delta) {
      this.currentMonth += delta
      if (this.currentMonth > 11) {
        this.currentMonth = 0
        this.currentYear++
      } else if (this.currentMonth < 0) {
        this.currentMonth = 11
        this.currentYear--
      }
      this.generateCalendar()
    },
    selectDate(day) {
      console.log('选择的日期', day.date)
      // 在这里可以添加选择日期后的逻辑
    }
  }
}
</script>

<style scoped lang="scss">
.calendar {
  width: 100%;
  margin-top: 30rpx;
  /* padding: 20rpx; */
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.weekdays {
  display: flex;
  justify-content: space-around;
  margin: 10rpx 0;
}
.days {
  display: flex;
  flex-wrap: wrap;
  // border-bottom: 1px solid #ccc;

  .risk-container {
    width: 100%;
    display: flex;
    margin-bottom: 30rpx;
    flex-direction: column;

    text {
      width: 100%;
      margin-bottom: 3rpx;
      padding-left: 3rpx;
      text-align: left;
      font-size: 22rpx;
    }
  }
  .risk-container text:first-child {
    background-color: #fde9cf;
    border-left: 2px solid #fa8d0a;
  }

  .risk-container text:nth-child(2) {
  }
}
.days view {
  width: 14.28%;
  /* height: 80rpx; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.other-month {
  // color: #ccc;
  color: transparent;

  text {
    border: none !important;
    background-color: transparent !important;
  }
}
.custom-content {
  font-size: 20rpx;
  color: #007aff;
}
</style>