更新记录

3.0（2023-09-09） 下载此版本

基于mpvue-calendar的适配uni-app平台的的日历组件

平台兼容性

Vue2 Vue3
√ √
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.4.15 app-vue app-nvue √ √ √ √ √ √
钉钉小程序 快手小程序 飞书小程序 京东小程序
√ √ √ √
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ √ √ √ √

mpvue-calendar

基于mpvue-calendar的适配uni-app平台的的日历组件

安装

复制components/mpvue-calendar/目录到目标项目的components目录

使用

  • import calendar from 'mpvue-calendar' 引入组件
  • components中注册组件calendar
  • template中使用组件<calendar />

参数及方法

参数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节点

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...