README.md

ren-calendar

简介

一款可收缩，可标记日期的日历，目前只在uni-app项目中使用，其他平台适配兼容未知，如有帮助到你不胜荣幸，欢迎Star！

DCloud插件市场地址

调用示例

<view class="content">
    <ren-calendar ref='ren' :markDays='markDays' :headerBar='false' @onDayClick='onDayClick'></ren-calendar>
    <view class="change">选中日期：{{curDate}}</view>
</view>

 import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
	export default {
        components:{
            RenCalendar
        },
		data() {
			return {
				curDate:'',
                markDays:[]
			}
		},
		onReady() {
            let today = this.$refs.ren.getToday().date;
            this.curDate = today;
            this.markDays.push(today);
		},
		methods: {
            onDayClick(data){
                this.curDate = data.date;
            }
		}
	}

属性说明

属性名	类型	默认值	说明
weekstart	Number	0 （即周日为第一天）	以周几为第一天
markDays	Array	-	标记的日期集合
headerBar	Boolean	true	是否展示月份切换按钮
open	Boolean	true	是否展开日历
collapsible	Boolean	true	是否可收缩
disabledAfter	Boolean	false	未来日期是否不可点击

事件说明

事件名	说明
onDayClick	点击日期时触发，返回当前选中日期, 如：{date: "2020-07-18", week: "星期六"}

方法说明

方法名	说明
changYearMonth	改变年月，初始化时需在onReady后通过$refs调用

Tips

• 如果不能满足场景需求可自行更改组件源代码来满足需求

预览