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

1. 基本介绍

官网：vue-sweet-calendar

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

效果：

2. 安装

npm install vue-sweet-calendar --save

yarn

yarn add vue-sweet-calendar --save

3. 卸载

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相关推荐

一款简洁大气的jquery日期日历插件
本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址: http://keleyi.com/a/bjad/e ...
我是如何使用laydate日历插件更换掉老项目不好用的日历插件datepicker的
背景:最近整改了一个老项目系统,里面采用的是java+bootstrap+jsp写的,里面的日历插件datepicker特别不好用,容易点击失灵,我决定把它给替换了. layDate 官网:https ...
一款很好用的Jquery 打印插件——jQuery.print.js
https://blog.csdn.net/JodenHe/article/details/70313604?locationNum=3&fps=1 登录网址https://github.co ...
ChromeFK插件推荐系列十九:网站图片批量下载插件推荐
本次分享几个网站图片下载插件,内容来自: chromefk.希望对你有所帮助. 1.[CHROMEFK]图片助手(ImageAssistant) 批量图片下载器一款用于嗅探.分析网页图片并提供批量下 ...
一款很好用的JQuery dtree树状图插件（一）
一款很好用的JQuery dtree树状图插件树状图 -dtree 由于他的节点设置思想不错,使连接数据库的数据库设计比较方便. 下载dtree资源包,引用一下dtree.css和dtree.js ...
word press html,wordpress广告插件24款管理网站广告代码很方便
> >推荐一些常用的wordpress广告插件,还是比较好用的.在网站中投放广告,不仅能够帮你赚取金钱.增加收入,还能够证明你网站的价值. >今天,云服务器网(www.yuntue. ...
vetur插件_6款让开发效率“起飞的”VS code插件，哪个才是你的最爱
VS Code,是一个免费的.开源的跨平台编辑器,几乎也是很多程序员最满意的编辑器,如果说有多满意,我甚至觉得没有什么不能用VS Code来解决. 这次推荐一些VS Code的插件,在提高工作效率上会 ...
1年19款，款款口碑爆棚，Cocos 插件大佬的真面目竟是？
前阵子,C姐在盘点2021年度 Cocos Store 上口碑与销量俱佳的十大插件工具和十大游戏源码时,意外发现了一位「劳模」:2021年累计发布了19款插件,且款款口碑爆棚.他便是拥有10年+编程经 ...
tinymce--一款非常好用的富文本编辑器 VUE如何集成tinymce编辑器
博客(coder的自我修养)原文链接:tinymce--一款非常好用的富文本编辑器 vue集成tinymce编辑器 - coder的自我修养 TinyMC编辑器简介 TinyMCE是一款易用.且功能强 ...
一款腾讯UED设计的提示插件（使用教程）
这是一款腾讯UED设计的提示插件,看着肯定很眼熟吧,闲话不多说,直接上demo吧. 显示 ZENG.msgbox.show(提示信息,图标类型); 隐藏: ZENG.msgbox._hide(); 几 ...

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

1. 基本介绍

2. 安装

3. 卸载

4. 引入

5. 代码举例

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

最新文章

热门文章