mpvue-calendar
基于vue-calendar的适配mpvue平台的的微信小程序日历组件，现在已可以使用在浏览器端
预览
?
安装
npm i mpvue-calendar复制代码
使用
import Calendar from 'mpvue-calendar'引入组件import 'mpvue-calendar/src/style.css'引入样式文件(mpvue 小程序端)components中注册组件Calendartemplate中使用组件<Calendar />
⚠️在浏览器端使用要引入下面browser-style.css替换上面的style.css
import 'mpvue-calendar/src/browser-style.css'引入样式文件(浏览器端)
参数及方法
| 参数or方法 | 类型 | 说明 |
|---|---|---|
| months | Array | 自定义月份，不传默认为中文一到十二月 |
| weeks | Array | 自定义星期，不传默认为中文日到六 |
| value | Array | 默认选中日期 |
| begin | Array | 限制开始日期，不传则不限制 |
| end | Array | 限制结束日期，不传则不限制 |
| disabled | Array | 禁用日期 |
| events | Object | 自定义备注 |
| lunar | Boolean | 是否显示农历，默认为false |
| monFirst | Boolean | 是否每行日期以星期一作为开头，默认为false(默认为星期日开头) |
| completion | Boolean | 是否补全日期，设为true时会以每月6行展示，不足6行的会用下月日期补齐，默认为false |
| clean | Boolean | 是否为简洁模式，简洁模式下自定义备注会显示为圆点，默认为false |
| now | Boolean or String | 是否显示今日，传入字符串时可以自定义日历上今日的文字，默认为true |
| almanacs | Object | 自定义节日，如{'11-14': '学生日', '11-22': '感恩日'}, 自定义节日会覆盖组件默认节日 |
| tileContent | Array | 为每个具体日期自定义class和插入文本内容，具体用法见下 |
| range | Boolean | 是否为范围模式，默认为false |
| multi | Boolean | 是否为多选模式，默认为false |
| select(val, val2) | function | 日期选中事件,在range模式下val为开始日期、val2为结束日期，非range模式下val为选中日期,val2为日期信息 |
| setToday() | function | 组件实例中的方法，可以返回今日 |
| renderer(year, month) | function | 组件实例中的方法，可以重新渲染日期(参数中传入渲染的年份和月份，需要为数字类型) |
| dateInfo(y, m, d) | function | 组件实例中的方法，传入年,月,日三个参数会返回当天的信息(农历、节气、星座、星期、天干地支等) |
| selectYear(val) | function | 选择年份事件，val为选中的年份 |
| prev(val) | function | 选择上一月事件，val为月份 |
| next(val) | function | 选择下一月事件，val为月份 |
| arrowLeft | String | 自定义左箭头图片，填写图片路径，不填则使用默认字体图标 |
| arrowRight | String | 自定义右箭头图片，填写图片路径，不填则使用默认字体图标 |
value参数 在普通模式下value为一维数组如2018年6月21为[2018,6,21]在range和multi模式下value为二维数组，如multi模式选中2018年6月21和6月28为[[2018,6,21], [2018,6,28]]在range模式下如果定义value参数必须定义开始日期和结束日期，如[[2018,6,21], [2018,6,28]](⚠️从开始日期到结束日期)events参数 events为自定义备注，例如备注2018年6月21日为{'2018-6-21': '今日备注', '2018-6-22':'明日备注'}，在clean模式下备注为圆点，lunar农历模式下备注会替代农历优先展示disabled参数 disabled为禁用日期，如禁用2018-6-21日为['2018-6-21']now参数 now参数可以选择是否将今天日期展示为今字，传入false则不展示，传入字符串则展示你定义等字符串内容，默认为true展示今字样tileContent参数 tileContent参数可以为具体某日定义一个class名，还可以插入一段文本内容。如[{date: '2018-9-20', className: 'holiday', content: '休'}]可以设置2018-9-20这天的class名为holiday，并且生成一个文本内容为 休 的dom节点
示例
复制代码