1 去掉laydate自定义的mark标记,css代码如下:
/*去掉日历mark标记*/
.laydate-day-mark::after{
width: 0%;
height: 0%;
}
2 自定义mark,js代码如下:
var results1 = ['2019-08-01','2019-08-02','2019-08-05']; //颜色设置为蓝色
var results2 = ['2019-07-20','2019-07-21','2019-07-22']; //颜色设置为橘色
var results3 = ['2019-07-15','2019-07-16','2019-07-17']; //颜色设置为粉色
var marks = [];
for (var i = 0; i < results1.length; i++) {
var sdate = results1[i]; //获取每个具体时间
var date_array = sdate.split("-"); //分割成数组
var date_day = date_array[2]; //取日期的天 比如 2017-09-11 取11
//将具体日期作为marks的属性值,不是数字i
marks[sdate] = '<span style="color:#27A5E2;font-size: 14px;"><i class="iconfont icon-rizhi" style="color:#27A5E2; position:absolute; left: 5px;font-size: 28px;z-index:-1;"></i>' + date_day + '</span>';
}
for (var i = 0; i < results2.length; i++) {
var sdate = results2[i]; //获取每个具体时间
var date_array = sdate.split("-"); //分割成数组
var date_day = date_array[2]; //取日期的天 比如 2017-09-11 取11
//将具体日期作为marks的属性值,不是数字i
marks[sdate] = '<span style="color:orange;font-size: 14px;"><i class="iconfont icon-rizhi" style="color:orange; position:absolute; left: 5px;font-size: 28px;z-index:-1;"></i>' + date_day + '</span>';
}
for (var i = 0; i < results3.length; i++) {
var sdate = results3[i]; //获取每个具体时间
var date_array = sdate.split("-"); //分割成数组
var date_day = date_array[2]; //取日期的天 比如 2017-09-11 取11
//将具体日期作为marks的属性值,不是数字i
marks[sdate] = '<span style="color:pink;font-size: 14px;"><i class="iconfont icon-rizhi" style="color:pink; position:absolute; left: 5px;font-size: 28px;z-index:-1;"></i>' + date_day + '</span>';
}
//初始日期控件
laydate.render({
elem: '#calendar-control', //绑定日历控件
position: 'static',
theme: '#0E42ED', //主题颜色
showBottom: false, //去掉日历下面的一行按钮
change: function (value, date) { //监听日期被切换,触发此函数
//lay('#calendar-date').html(value);
},
mark: marks
});