calendar-vue-app

vue-calendar-ui(当前版本 V1.0.5)

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

兼容版本

Vue2.x

Install

	npm i calendar-vue-app -S

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

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

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

版本 ui 效果图

Attribute

属性	类型	说明	默认	是否必传
animated	Boolean	是否可缩放	TRUE	FALSE
zoom	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
title-split	Boolean 或 String	title 年月间隔	"-"	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
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 号)
onChangeSlide	日历展开关闭时的回调	Boolean，(与配置 zoom 相同，默认是 false 为关闭)

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")
slideChange(Boolean)	展开或关闭日历	true 打开，false 关闭	this.$refs.cv.slideChange(true)

Other

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

2、如果有其他问题邮件沟通[e-mail]或者加 qq1195669615。若插件能够帮助到您，期待您的 star 哦！