【Vue插件】一款很好用的vue日历插件——vue-sweet-calendar

1. 基本介绍

1. 官网：vue-sweet-calendar
   

• 甜蜜的日历视图
• 一个简单甜美的 vue.js 日历

2. 效果：
   

2. 安装

1. npm

npm install vue-sweet-calendar --save

2. yarn

yarn add vue-sweet-calendar --save

3. 卸载

1. npm

npm uninstall vue-sweet-calendar --save

2. yarn

yarn remove vue-sweet-calendar --save

4. 引入

import { Calendar } from 'vue-sweet-calendar'
import 'vue-sweet-calendar/dist/SweetCalendar.css'

components: {
    Calendar // Registering Component
  }
1
2
3
4
5
6

5. 代码举例

<template>
  <div id="your-component">
    <!-- Using Component -->
    <calendar
      :eventCategories="eventCategories"
      :events="events"
      ref="calendar"
    />
  </div>
</template>
<script>
// Importing Component and style
import { Calendar } from "vue-sweet-calendar";
import "vue-sweet-calendar/dist/SweetCalendar.css";

export default {
  name: "YourComponentName",
  data() {
    return {
      eventCategories: [
        {
          id: 1,
          title: "Personal",
          // 日历上数字的颜色
          textColor: "white",
          // 数字背后的颜色
          backgroundColor: "blue",
        },
        {
          id: 2,
          title: "Company-wide",
          textColor: "white",
          backgroundColor: "red",
        },
        {
          id: 3,
          title: "National",
          textColor: "white",
          backgroundColor: "green",
        },
      ],
      events: [
        {
          title: "Event 1",
          // 标记开始的时间
          start: "2019-06-02",
          // 标记结束的时间
          end: "2019-06-06",
          // 重复的方式
          repeat: "monthly",
          // eventCategories 中的id
          categoryId: 1,
        },
        {
          title: "Event 2",
          start: "2019-06-08",
          end: "2019-06-09",
          repeat: "yearly",
          categoryId: 1,
        },
        {
          title: "Event 3",
          start: "2019-06-10",
          end: "2019-06-11",
          repeat: "mothly",
          categoryId: 2,
        },
        {
          title: "Event 4",
          start: "2019-04-23",
          end: "2019-04-23",
          repeat: "never",
          categoryId: 2,
        },
        {
          title: "test5",
          start: "2021-06-17",
          end: "2021-06-18",
          repeat: "weekly",
          categoryId: 3,
        },
      ],
    };
  },
  methods: {
    goToday() {
      this.$refs.calendar.goToday();
    },
  },
  components: {
    Calendar, // Registering Component
  },
};
</script>
1
2
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

效果：

【备注】背景默认是白色的，灰色是我自己加的。