​

效果预览

安装

复制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为一维数组如2023年6月21为[2023,6,21]
在range和multi模式下value为二维数组，如multi模式选中2018年6月21和6月28为[[2023,6,21], [2023,6,28]]
在range模式下如果定义value参数必须定义开始日期和结束日期，如[[2023,6,21], [2023,6,28]](⚠️从开始日期到结束日期)

• events 参数
  
  events为自定义备注，例如备注2023年6月21日为{'2023-6-21': '今日备注', '2023-6-22':'明日备注'}，在clean模式下备注为圆点，lunar农历模式下备注会替代农历优先展示
• disabled 参数
  
  disabled为禁用日期，如禁用2023-6-21日为['2023-6-21']
• now 参数
  
  now参数可以选择是否将今天日期展示为今字，传入false则不展示，传入字符串则展示你定义等字符串内容，默认为true展示今字样
• tileContent 参数
  
  tileContent参数可以为具体某日定义一个class名，还可以插入一段文本内容。如[{date: '2023-9-20', className: 'holiday', content: '休'}]可以设置2023-9-20这天的class名为holiday，并且生成一个文本内容为 休 的dom节点

示例

<template><view style="display: flex; flex-direction: column; flex:1;"><calendar :months="months" :value="value" @next="next" @prev="prev" :events="events" lunar clean @select="select" ref="calendar"@selectMonth="selectMonth" @selectYear="selectYear" :arrowLeft="arrowLeft" :tileContent="tileContent" :almanacs="almanacs"></calendar><view><button @click="setToday">返回今日</button><button @click="dateInfo">日期信息</button><button @click="renderer">重新渲染年月日期</button></view></view>
</template><script>import calendar from 'components/mpuve-calendar/src/mpvue-calendar.vue';export default {data() {return {months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October','November', 'December'],disabledArray: ['2023-6-27', '2023-6-25'],value: [2023, 6, 7],begin: [2016, 1, 1],end: [2020, 1, 1],events: {'2023-6-7': '今日备注','2023-6-8': '一条很长的明日备注'},almanacs: {'9-3': '抗战胜利日','11-17': '学生日'},tileContent: [{date: '2023-9-22',className: 'holiday ',content: '休'},{date: '2023-9-23',className: 'holiday ',content: '休'}],// arrowLeft: arrowLeftarrowLeft: ''}},components: {calendar},methods: {selectMonth(month, year) {console.log(year, month)},prev(month) {console.log(month)},next(month) {console.log(month)},selectYear(year) {console.log(year)},setToday() {this.$refs.calendar.setToday();},dateInfo() {const info = this.$refs.calendar.dateInfo(2023, 8, 23);console.log(info);},renderer() {this.$refs.calendar.renderer(2023, 8); //渲染2023年8月份},select(val, val2) {console.log(val)console.log(val2)}}}
</script><style>page view {display: flex;flex-direction: row;}
</style>

喜欢的希望大家点个赞，点个关注，鼓励一下,谢谢大家的支持!!!

源码获取关注VX公众号「码农园区」，回复 【uniapp源码】

最后

精选32套源码目录：

IT之家小程序版客户端(使用 Mpvue 开发，兼容 Web)ithome-lite-master.zip

mpvue 仿网易严选mpvue-shop-master.zip

mpvue-音乐播放器mpvue-music-master.zip

mpvue性能测试与体验miniweibo-master.zip

mpvue改造的日历.zip

mpvue框架仿滴滴出行didi-master.zip

mpVue高仿美团小程序教程mpvue-meituan-master.zip

uni APP自动更新并安装.vue

uni-app nvue沉浸式状态栏(线性渐变色).vue

uni-app 二维码生成器分享wxqrcode.zip

uni-app 侧边导航分类,适合商品分类页面uni-app-left-navigation-master.zip

uni-app 自定义底部导航栏uni-app-bottom-navigation-master.zip

uni-app全局变量的几种实现方式.zip

uni-app的markdown富文本编辑器插件uniapp-markdown-master.zip

uni-app自定义导航栏title-custom.zip

uniapp聊天实例，支持图片，语音，表情.zip

uniapp选择器,包含一级,二级级联,三级级联uniapp-picker-master.zip

vue-mpvue-ChatRobot聊天机器人vue-mpvue-ChatRobot-master.zip

【小程序】CNode社区mpvue-cnode-master.zip

【插件、图表】7种图表漂亮丰富uniCharts.zip

一款播课类小程序, 基于 mpvue 构建mp-podcast-mpvue-master.zip

云档新版小程序端，基于mpvue开发cloud-doc-v2-master.zip

仿uc浏览器列表.vue

仿扎克新闻mpZAKER-master.zip

仿网易云UImusic播放器mpvue-music-master.zip

仿追书神器的小说阅读器小程序wx-book-master.zip

参照米家APP布局和样式,编写的一款智能家居小程序smart-home-master.zip

商城实例mpvue-xbyjShop-master.zip

基于 mpvue 实现豆瓣电影微信小程序mpvue-douban-master.zip

基于mpvue的优酷mpvue-youku-master.zip

校园助手示例SHUhelper-master.zip

类似mui中的chat(聊天窗口)实现uniapp-chat-master.zip

美团外卖(第三方)开源程序mpvue-master.zip

美食搜索mpvue-FG-master.zip

豆瓣平分mpvue-douban-pingfen-master.zip

顶部tabbar.vue

源码截图：

说明

如果本项目对您有帮助，欢迎 “点赞，关注” 支持一下 谢谢~

源码获取关注公众号「码农园区」，回复 【uniapp源码】