soc_web/src/views/iot/videoDiagnosis/Calendar.vue

<template>
  <div :style="calendarWidth">
    <VCalender
      ref="calendar"
      :columns="layout.columns"
      :rows="layout.rows"
      :is-expanded="layout.isExpanded"
      :attributes="attrs"
      :min-date="startDate ? new Date(startDate) : new Date()"
      :max-date="endDate"    
      v-model="selectedDate"
      @dayclick="onSelect"

    />
  </div>
</template>
<script>
import dayjs from "dayjs";
//日历组件
 import {Calendar as VCalender} from 'v-calendar';
export default {
  name: "Calendar",
   components:{VCalender},
  data() {
    
    return {
      selectedDate:this.defaultSelectedDate,
      layout: {
        columns: 4,
        rows: 2,
        isExpanded: true,
      },
      attrs: [
        {
          highlight: {           
            start: {
              fillMode: "outline",
            },
            base: {
              color: "gray",
              fillMode: "light",
            },
            end: {
              fillMode: "outline",
            },
          },
          dates: { start: this.startDate?new Date(this.startDate):new Date(), end: this.endDate }, 
        },
        {
          highlight: {
            fillMode:'solid',
            color: "green",            
            // style: {
            //   width: "16px",
            //   height: "3px",
            //   borderRadius: "0",
            // },
            contentClass: "italic",
          },
          dates: this.full,
        },
        {
          highlight: {
            fillMode:'solid',
            color: "yellow",
            // style: {
            //   backgroundColor: "orange",
            //   width: "16px",
            //   height: "3px",
            //   borderRadius: "0",
            // },
            contentClass: "italic",
          },
          dates: this.paritialLoss,
        },
        {
          highlight: {
            fillMode:'solid',
            color: "red",
            // style: {
            //   width: "16px",
            //   height: "3px",
            //   borderRadius: "0",
            // },
            contentClass: "italic",
          },
          dates: this.allLoss,
        },
      ],
    };
  },
  props: {
    startDate: {
      isRequired: true,
    },
    endDate: {
      type:[Date,String],
      default: () => {
        return new Date();
      },
    },
    full: {
      isRequired: true,
      type: Array,
    },
    paritialLoss: {
      isRequired: true,
      type: Array,
    },
    allLoss: {
      isRequired: true,
      type: Array,
    },
    defaultSelectedDate:{
      type:Object
    }
  },
  computed: {
    calendarWidth() {
      if (this.layout.columns === 0) {
        return "display:none";
      } else if (this.layout.columns === 1) {
        return "width:33.3%";
      } else if (this.layout.columns === 1) {
        return "width:66.6%";
      } else {
        return "";
      }
    },
  },
  watch: {
    startDate: {
      immediate: true,
      handler: function (v) {
        this.setLayout(v);
      },
    },  
    endDate: {
      immediate: true,
      handler: function (v) {
        this.attrs[0].dates.end=v;
      },
    },  
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // this.setLayout();
      // const calendar = this.$refs.calendar;
      // setTimeout(() => {
      //   calendar.move({ month: 1, year: 1983 });
      // }, 3000);
      //calendar.move({ month: 1, year: 1983 });
      //this.setOps();
    },
    setLayout(startDate) {
      if (startDate != null) {
        let diff = Math.ceil(
          dayjs(new Date()).diff(new Date(startDate), "months", true)
        );
        if (diff >= 4) {
          this.layout.columns = 4;
        } else {
          this.layout.columns = diff;
        }

        this.layout.rows = Math.ceil(diff / 4);
      }
    },
    onSelect(data){
      this.$emit("select",data.date)
    }
  },
};
</script>
<style scoped lang="scss"></style>