vue日历且内容自定义

这直接上代码

<template>
  <!-- 月份选择器，支持左右箭头修改月份 -->
  <div class="date-body">
    <div class="month-con">
      <i class="el-icon-arrow-left" @click="reduceMonth()"></i>
      <span class="month"></span>
        {
   
   { time.year }}年{
   
   {
        time.month + 1 > 9 ? time.month + 1 : '0' + (time.month + 1)
        }}月
      </span>
      <i class="el-icon-arrow-right" @click="addMonth()"></i>
    </div>
    <div class="date-content">
      <el-row>
        <el-col :span="24">
          <!-- 第一行表头，周一到周日 -->
          <div class="top-con">
            <div class="top" v-for="item in top" :key="item">周{
   
   { item }}</div>
          </div>
          <!-- 日历号 -->
          <div class="date-con">
            <div
              class="date"
              :class="[item.thisMonth, item.isToday, item.afterToday]"
              v-for="(item, index) in visibleCalendar"
              :key="index"
            >
              <div class="date-detials">
                <div class="number">{
   
   { item.day }}</div>
                <div class="morning">
                  <span></span>张三，李四
                </div>
                <div class="evening">
                  <span></span>王五，赵六
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      top: ["一", "二", "三", "四", "五", "六", "日"],
      time: {
        year: new Date().getFullYear(),
        month: new Date().getMonth()
      }
    };
  },
  created() {},
  methods: {
    reduceMonth() {
      if (this.time.month > 0) {
        this.time.month = this.time.month - 1;
      } else {
        this.time.month = 11;
        this.time.year = this.time.year - 1;
      }
      this.$emit("changeMonth", this.time);
    },
    addMonth() {
      if (this.time.month < 11) {
        this.time.month = this.time.month + 1;
      } else {
        this.time.month = 0;
        this.time.year = this.time.year + 1;
      }
      this.$emit("changeMonth", this.time);
    }
  },
  computed: {
    // 获取当前月份显示日历,共42天
    visibleCalendar: function() {
      // 获取今天的年月日
      const today = new Date();
      today.setHours(0);
      today.setMinutes(0);
      today.setSeconds(0);
      today.setMilliseconds(0);

      const calendarArr = [];
      // 获取当前月份第一天
      const currentFirstDay = new Date(this.time.year, this.time.month, 1);
      // 获取第一天是周几，注意周日的时候getDay()返回的是0，要做特殊处理
      const weekDay =
        currentFirstDay.getDay() === 0 ? 7 : currentFirstDay.getDay();
      // 用当前月份第一天减去周几前面几天，就是看见的日历的第一天
      const startDay = currentFirstDay - (weekDay - 1) * 24 * 3600 * 1000;
      // 我们统一用42天来显示当前显示日历
      for (let i = 0; i < 35; i++) {
        const date = new Date(startDay + i * 24 * 3600 * 1000);
        calendarArr.push({
          date: new Date(startDay + i * 24 * 3600 * 1000),
          year: date.getFullYear(),
          month: date.getMonth(),
          day: date.getDate(),
          // 是否在当月
          thisMonth:
            date.getFullYear() === today.getFullYear() &&
            date.getMonth() === today.getMonth()
              ? "thisMonth"
              : "",
          // 是否是今天
          isToday:
            date.getFullYear() === today.getFullYear() &&
            date.getMonth() === today.getMonth() &&
            date.getDate() === today.getDate()
              ? "isToday"
              : "",
          // 是否在今天之后
          afterToday: date.getTime() >= today.getTime() ? "afterToday" : ""
        });
      }
      return calendarArr;
    }
  }
};
</script>
<style lang="scss" scoped>
.date-content {
  height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
}
.month-con {
  height: 40px;
  line-height: 40px;
  padding: 0px 22px;
  text-align: center;
  background: #f0f1f6;
  font-size: 22px;
  color: #333333;
  .month {
    margin: 0 10px;
  }
  .el-icon-arrow-left {
    float: left;
    margin-top: 8px;
    cursor: pointer;
  }
  .el-icon-arrow-right {
    float: right;
    margin-top: 8px;
    cursor: pointer;
  }
}
//
.top-con {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #c0c4cc;
  .top {
    width: 14.285%;
    // background-color: rgb(242, 242, 242);
    padding: 10px 0;
    margin: 5px;
    text-align: center;
  }
}
.date-con {
  display: flex;
  flex-wrap: wrap;
  margin-right: -6px;
  .date {
    width: 14.285%;
    text-align: center;
    margin-bottom: 6px;
    padding-right: 6px;
    .date-detials {
      font-size: 12px;
      font-weight: 400;
      border: 1px solid #4a79ee1c;
      cursor: pointer;
      .number {
        height: 32px;
        line-height: 32px;
      }
      .morning {
        height: 32px;
        line-height: 32px;
        background-color: rgba(74, 121, 238, 0.11);
        color: #4a79ee;
        span {
          display: inline-block;
          width: 5px;
          height: 5px;
          margin-right: 4px;
          border-radius: 3px;
          background: #4a79ee;
        }
      }
      .evening {
        height: 34px;
        line-height: 34px;
        background-color: rgba(248, 154, 108, 0.11);
        color: #f89a6c;
        span {
          display: inline-block;
          width: 5px;
          height: 5px;
          margin-right: 4px;
          border-radius: 3px;
          background: #f89a6c;
        }
      }
    }
  }
  .thisMonth {
    .morning {
      background-color: rgb(220, 245, 253);
    }
    .evening {
      background-color: rgb(220, 244, 209);
    }
  }
  .isToday {
    font-weight: 700;
    .morning {
      background-color: rgb(169, 225, 243);
    }
    .evening {
      background-color: rgb(193, 233, 175);
    }
  }
}
.tip-con {
  margin-top: 51px;
  .tip {
    margin-top: 21px;
    width: 100%;
  }
}
</style>