Vue-hash-calendar-slide NPM

原图1：https://file.allsmy.com/vhcs/demo1.mov 原图2：https://file.allsmy.com/vhcs/demo2.mov 上图只是配置中部分功能,更多演示参照下面运行项目

vue-hash-calendar-slide

基于 vue 2.X 开发的日历组件
原生 js 开发，没引入第三方库
上下滑动切换周/月模式，左右滑动切换月份
支持外部传参控制上下滑动，方便复杂页面集成
日期标记支持5种类型：日期颜色、日期背景色、日期底部原点、日期右上角标记、日期底部文字
更多更新查看提交日志： https://github.com/liuhean2021/vue-hash-calendar-slide/commits/master

1. 体验效果请先克隆仓库地址: https://github.com/liuhean2021/vue-hash-calendar-slide

2. 本地运行仓库，安装依赖命令： npm i 启动项目命令： npn run server

3. 运行成功后浏览器访问： http://localhost:8080/

安装使用说明

npm i vue-hash-calendar-slide

// 在入口文件中（main.js）或vue组件里，导入组件库
import vueHashCalendarSlide from 'vue-hash-calendar-slide'
// 引入组件CSS样式
import 'vue-hash-calendar-slide/lib/vue-hash-calendar-slide.css'
// 注册组件库
Vue.use(vueHashCalendarSlide)

// 在VUE文件中引入组件
 <vue-hash-calendar-slide/>

API

属性	说明	类型	默认	是否必传
disabledDate	设置日期的禁用状态，参数为当前日期，要求返回 Boolean （禁用该日期需返回 true）	Function	---	否
markDate	需要被标记的日期，如：[{ color: 'rgba(187,27,27,0.3)', type: 'background', date: '2021/12/20' },{ color: '#76f105', type: 'dateColor', date: '2021/12/21' },{ color: '#ff0000', type: 'dot', date: '2021/12/22' },{ color: '#133fcf', type: 'topRightIcon', date: '2021/12/23' },{ color: '#b7bc1f', text: '节假日', type: 'bottomText', date: '2021/12/24' } ]	Array	[]	否
showArrowIcon	显示底部的箭头按钮切换周/月模式；启用默认禁用上下滑动切换周/月	Boolean	false	否
borderBoxShadow	控件边框的阴影控制，如：'0 5px 10px 0px rgba(203,203,203,0.5)'	String	''	否
contentColor	控件整体日期颜色控制	String	'#FFFFFF'	否
disableColor	非当前月份或禁用日期的颜色	String	'#c0c4cc'	否
swipeStatus	滑动状态参数从外部传入控制，用于复杂页面对滑动动作的控制，支持up,down,left,right	String	''	否
mainBackgroundColor	控件的整体背景色控制	String	'#0e8ee9'	否
visible	控制日历组件的显示或隐藏,需使用 `.sync` 修饰符	Boolean	false	否
scrollChangeDate	控制滑动的时候是否修改选中的日期	Boolean	true	否
model	日历组件以哪种形式展示。inline：内联的方式。dialog：弹窗的方式	String	inline	否
defaultDatetime	指定默认时间。	Date	当前时间	否
format	确认日期时，回调事件返回的日期格式。如“YY/MM/DD hh:mm” 、“YY 年 MM 月第 DD 天，当前时间 hh 时 mm 分”、“MM DD,YY at hh:mm F”	String	YY/MM/DD hh:mm	否
weekStart	以星期几作为日历每一周的起始星期。可选'sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'	String	sunday	否
pickerType	选择器类型 datetime：日期+时间 date：日期 time：时间	String	datetime	否
showTodayButton	是否显示返回今日按钮	Boolean	true	否
isShowWeekView	是否以周视图展示组件	Boolean	false	否
disabledWeekView	禁用周视图（设置为 true 后，无法上下滑动进行周/月切换）	Boolean	false	否
minuteStep	间隔时间。（分钟的步长）	Number	1	否
lang	选择的语言版本。可选值:'CN', 'EN'	String	CN	否