vue-multi-calendar v2.1.4

vue-multi-calendar

1. Summary

​ vue-multi-calendar vue多功能日历\ https://www.npmjs.com/package/vue-multi-calendar\

2. Code Struct

<template>
  <div>
    <div style="width: 500px; margin: 0 auto;">
      <div class="row">
        <button @click="$refs.Calendar.changeMonth(-1)">上个月</button>
        <button @click="$refs.Calendar.changeMonth(1)">下个月</button>
        选中的日期: {{ date }}  {{ changedYM }}
      </div>
      <vueMultiCalendar 
        ref="Calendar" 
        :selectedDate.sync="date" 
        :YYYYMM.sync="YYYYMM"
        :changedYM.sync="changedYM"
        :selectedMode="selectedMode" 
        :weekNames="weekNames"
        :displayMode.sync="displayMode" 
        :events="events" 
        :showCalendarHeader="true"
        @dayClick="dayClick" />

        <div class="row"><button @click="change">点击我改变 ["2021-01-09", "2021-01-10"]</button> {{ YYYYMM }}</div>
    </div>
  </div>
</template>

<script>
import vueMultiCalendar from 'vue-multi-calendar'
export default {
  name: "index",
  components: { vueMultiCalendar },
  data() {
    return {
      YYYYMM: '',
      weekNames: ["一", "二", "三", "四", "五", "六", "日"],
      date: ["2021-01-09", "2021-01-10"],
      displayMode: "month", //week周维度显示  month月维度显示
      events: ['2021-01-05', '2021-01-12', '2021-01-15'], //有事件的日期list，日期底部dot表示
      selectedMode: "range", // single: 单选 range: 范围选
    };
  },
  methods: {
    dayClick(day) {
      console.log(day)
    },
    change() {
      this.date = ["2021-02-05", "2021-02-12"]
      this.events.push('2021-02-10')
    }
  },
}
</script>
<style lang="less" scoped>
.row { padding: 10px 0; overflow:hidden;}
button { 
  background:#fff; 
  padding: 4px 20px; 
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-right: 10px;
}
</style>