1. 基本介紹

官網：vue-sweet-calendar

• 甜蜜的日歷視圖
• 一個簡單甜美的 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 中的idcategoryId: 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>

效果：

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

總結

以上是生活随笔為你收集整理的【Vue插件】一款很好用的vue日历插件——vue-sweet-calendar的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。