1. 基本介绍
- 甜蜜的日历视图
- 一个简单甜美的 vue.js 日历
- 效果:
2. 安装
- npm
npm install vue-sweet-calendar --save
- yarn
yarn add vue-sweet-calendar --save
3. 卸载
- npm
npm uninstall vue-sweet-calendar --save
- 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
}
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>
效果:
【备注】背景默认是白色的,灰色是我自己加的。