vue的日歷組件vue-calendar-component

Install

npm i vue-calendar-component --save   或

cnpm i vue-calendar-component --save  //國內鏡像

 

然后寫相關vue

<template>
  <div class="mainBox">
    <Calendar
      :textTop="['S','M','T','W','T','F','S']"
      v-on:choseDay="clickDay"
      :sundayStart='true'>
    </Calendar>
  </div>
</template>
<script>
import Calendar from 'vue-calendar-component'
export default {
  name: 'calendar',
  data () {
    return {
    }
  },
  components: {
    Calendar
  },
  methods: {
    clickDay (today) {
      // today格式為2020/8/7 改為 20200807
      let date = today.split('/')
      if (date[1].length < 2) {
        date[1] = '0' + date[1]
      }
      if (date[2].length < 2) {
        date[2] = '0' + date[2]
      }
      date = date.join('')
    }
  }
}
</script>
<style lang="scss">
.mainBox {
  width:100%;
  width:100%;
  .wh_content_all {
    background-color: #08214d;
    .wh_top_changge li {
      color: #1fb331;
    }
    .wh_content_item {
      .wh_item_date {
        color:#1ae558;
      }
      .wh_other_dayhide{
        color:#bfbfbf;
      }
      .wh_chose_day {
        background: #d1ff19;
        color: #0d0b0b;
      }
       .wh_isToday{
        background: #33ad53;
        color: #0d0b0b;
      }
    }
  }
}
</style>

實現效果圖為:

 

 

參考相關文檔,vue-calendar-component還有很多操作,我只用到了最簡單的