ele-calendar 日历插件使用

安装：
npm install ele-calendar
例子：

<template>

  <div style="width:500px; margin:50px auto">
  <ele-calendar
    :render-content="renderContent"
    :data="datedef"
    :prop="prop"
    :currentmonth="true"
    :disabledDate="disabledDate"
    @pick="clickpick"
    @date-change="datechange"
  >
  <template slot-scope="slotProps">
    {{  slotProps.todo.yearLabel + slotProps.todo.month}}
  </template>

  </ele-calendar>
  </div>

</template>

<script>
import eleCalendar from 'ele-calendar'
import 'ele-calendar/dist/vue-calendar.css' //引入css

export default {
  data(){
    return{
      dialogVisible: true ,
      datedef:[
        {"date":"2020-10-30","content":"占用"},
        {"date":"2020-10-26","content":"占用"},
      ],
      prop:'date' //对应日期字段名
    }
  },
  components: {
    eleCalendar
  },
  methods: {
    clickpick(value,event,row,celltd){
      var d = new Date(value)

      const month = d.getMonth() + 1
      const day = d.getDate()
      let smonth = month
      if(month<10)
        smonth = '0'+month
      let sday = day
      if(sday<10)
        sday = '0'+day

      var date =  d.getFullYear() + '-' + smonth + '-' + sday
      console.log(date)
    },

    disabledDate(val){
      var d = new Date(val)
      const month = d.getMonth() + 1
      const day = d.getDate()
      let smonth = month
      if(month<10)
        smonth = '0'+month
      let sday = day
      if(sday<10)
        sday = '0'+day
      var date =  d.getFullYear() + '-' + smonth + '-' + sday
       return  this.datedef.some((v=> {
         if (v.date === date) {
           return true
         }
       }))

    },
    renderContent(h,parmas) {
      const loop = data =>{
       // console.log(JSON.stringify(data.defvalue.value))
        return (
          data.defvalue.value ? (<div><div>{data.defvalue.text}</div>
        <span  >{data.defvalue.value.content}</span>
        </div>) : <div>{data.defvalue.text}</div>
      )
      }
      return (
        <div style="min-height:60px;">
        {loop(parmas)}
        </div>
    );
    },
    datechange(val){
     /* this.datedef=[
        {"date":"2020-10-30","content":"555"},
        {"date":"2020-10-26","content":"666"},
      ]*/
    }
  }
}
</script>