基于 vue 2.0 开发的轻量，高性能日历组件

1. 安装scss

npm i -D sass-loader@8.0.2
npm i node-sass@4.14.1

2. 安装日历组件

npm i vue-calendar-component --save
1

3. 安装提示组件

npm install --save vue-component-toast
1

4. 注册组件

main.js

import toast from 'vue-component-toast'
import 'vue-component-toast/dist/css/vc-toast.min.css'

// Vue.use(toast, [<global-option>])
Vue.use(toast)
3
4
5

5. 页面

<template>
  <div class="content">
    <Calendar
        ref="Calendar"
        :markDateMore="arr"
        :markDate="arr2"
        v-on:isToday="clickToday"
        agoDayHide="1530115221"
        v-on:choseDay="clickDay"
        v-on:changeMonth="changeDate"
    ></Calendar>
    <br>
    <div class="choseMonth-style" style="background-color: #398ade;" @click="ChoseMonthChock ">点击跳到2022-01-21</div>
  </div>
</template>

<script>
import Calendar from "vue-calendar-component";

export default {
  data() {
    return {
      arr2: [],
      arr: [
        {
          date: "https://cdn.jxasp.com:9143/image/2022/01/1",
          className: "mark1"
        },
        {
          date: "https://cdn.jxasp.com:9143/image/2022/01/13",
          className: "mark2"
        }
      ]
    };
  },
  components: {
    Calendar
  },
  methods: {
    clickDay(data) {
      console.log("选中了", data); //选中某天
      this.$toast("选中了" + data);
    },
    clickToday(data) {
      console.log("跳到了本月今天", data); //跳到了本月
    },
    changeDate(data) {
      this.$toast("切换到的月份为" + data);
      console.log("左右点击切换月份", data); //左右点击切换月份
    },
    ChoseMonthChock() {
      this.$refs.Calendar.ChoseMonth("https://cdn.jxasp.com:9143/image/2018-12-13"); //跳到12月12日选中12月12日
    }
  },
  created() {
    function format(date, index) {
      date = new Date(date);
      return `${date.getFullYear()}-${date.getMonth() + 1}-${index}`;
    }

    // setTimeout(() => {
    //   this.arr = [
    //     {
    //       date: format(new Date(), 3),
    //       className: "mark1"
    //     },
    //     {
    //       date: format(new Date(), 12),
    //       className: "mark2"
    //     }
    //   ];
    //   this.arr.push({
    //     date: format(new Date(), 15),
    //     className: "mark1"
    //   });
    // }, 300);
  }
};
</script>

<style scoped>
/* 重写css部分 start */
/deep/ .wh_content_item {
  color: black;
}

/deep/ .wh_top_changge li {
  color: black;
}

/deep/ .wh_jiantou1 {
  border-top: 2px solid #030303;
  border-left: 2px solid #030303;
}

/deep/ .wh_jiantou2 {
  border-top: 2px solid #030303;
  border-right: 2px solid #030303;
}

/deep/ .wh_jiantou1 {
  background-color: white;
}

/deep/ .wh_content_all {
  background-color: #ffffff
}

/deep/ .wh_content_item .wh_isToday {
  background-color: #2b85e4
}

/deep/ .wh_content_item .wh_chose_day {
  background-color: #9acafc;
}

/* 重写css部分 end */

h3 {
  text-align: center;
  width: 90%;
  margin: auto;
}

.choseMonth-style {
  margin: auto;
  width: 220px;
  height: 44px;
  line-height: 44px;
  /*background: #0fc37c;*/
  color: #fff;
  font-size: 17px;
  text-align: center;
  margin-top: 20px;
}

.wh_container >>> .mark1 {
  background-color: orange;
}

.wh_container >>> .mark2 {
  background-color: blue;
}

.wh_content_item > .wh_isMark {
  background: orange;
}
</style>
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

6. 效果图