vue-calendar-ui

2.0.3 • Public • Published

vue-calendar-ui(当前版本 V2.0.3)

一款高效、简洁、功能丰富、宽度可自适应的 pc 端考勤日历插件

兼容版本

Vue2.x

Install

	npm i vue-calendar-ui -S

	//main.js
	import cv from "vue-calendar-ui";
	Vue.use(cv)

	//页面使用
	<vue-calendar-ui
          ref="cv"
          :mark-arr="mark"
          title-color="#333"
          arrow-color="#333"
          crrentdaybg-color="#333"
          hoverbg-color="#333"
          hoverlabel-color="red"
          weeklabel-color="red"
          @onclickdate="onclickdate"
          @onchangemonth="onchangemonth"
	></vue-calendar-ui>

	//跳转指定月份api调用
	this.$refs.cv.jumpToMonth("2020-03-12");

V1.x 版本 ui 效果图(请使用 1.1.5)

效果图

V2.x 版本 ui 效果图

效果图

Attribute

属性 类型 说明 默认 是否必传
min Boolean 考勤样式尺寸(小) FALSE FALSE
future-disabled Boolean 是否不可跳转到未来月份 FALSE FALSE
sunday-start Boolean 日历是否周天开始 FALSE FALSE
titlebg-color String title 背景颜色(V2.X 版本已废弃) #f5f7fa FALSE
title-color String title 字体颜色 #333333 FALSE
weeklabel-color String 礼拜几字体颜色 #9da5b1 FALSE
arrow-color String 箭头颜色 #4b7df6 FALSE
itembg-color String 默认日期背景颜色 #fff FALSE
itemlabel-color String 默认日期字体颜色 #333333 FALSE
birthdaybg-color String 当天生日的背景颜色 #FFF5E7 FALSE
birthdaylabel-color String 当天生日的字体颜色 #333333 FALSE
crrentdaybg-color String 今天的背景颜色 #4b7df6 FALSE
crrentdaylabel-color String 今天的字体颜色 #fff FALSE
clickdaybg-color String 当前点击日期的背景颜色 rgba(51, 51, 51,0.8) FALSE
clickdaylabel-color String 当前点击日期的字体颜色 #fff FALSE
hoverbg-color String 鼠标经过背景颜色 #4b7df6 FALSE
hoverlabel-color String 鼠标经过字体颜色 #fff FALSE
prev-color String 当月之前的日期颜色 #cccccc FALSE
next-color String 当月之后的日期颜色 #cccccc FALSE
birthday-arr Array 需要标记生日日期列表(下方详细说明) [] FALSE
mark-arr Array 需要标记的日期列表(下方详细说明) [] FALSE

birthday-arr

类型 示例
String ["2020/05/20","2020/05/21"]

mark-arr

属性 类型 说明 格式 默认
date String 需要标记的日期 YYYY/MM/DD
color String 要标记日期底部图标或字的颜色 #333333
isLabel Boolean 要标记日期底部是否显示文字 true/false false
label String 要标记日期底部设置显示文字时的 label
userPopover Boolean 有额外信息标记的时候是否使用默认的 Popover 显示 true/false false
markContent String 额外需要标注的内容
renderHtml Boolean 额外需要标注的内容是否采用渲染 html 的格式 true/false false

回调函数

函数名 说明 返回值
onclickdate 点击具体日期时的回调 object,包含日期时间以及主动传递的 mark 值及是否当天有生日 isBirthday
onchangemonth 点击具体日期时的回调 object,包含点击按钮切换类型 type 及 day1(切换到相应月份的 1 号)

API

函数名 说明 参数格式 调用示例
jumpToMonth(date) 跳转到指定月份 date 对象或 YYYY-MM-DD this.$refs.cv.jumpToMonth("2020-03-12")
jumpToDay(date) 跳转到指定日期并标记当前日 date 对象或 YYYY-MM-DD this.$refs.cv.jumpToDay("2020-03-12")

Other

1、后继会继续更新 vue3 版本

2、如果有其他问题邮件沟通1195669615@qq.com或者加 qq1195669615。若插件能够帮助到您,期待您的 star 哦!

3、欢迎加入 qq 交流群(目前正在起步中)

qq交流群

Dependents (1)

Package Sidebar

Install

npm i vue-calendar-ui

Weekly Downloads

2

Version

2.0.3

License

MIT

Unpacked Size

347 kB

Total Files

22

Last publish

Collaborators

  • liweifei