layui日历控件周几标记[工作排班]

上效果图：

参考教程1

参考教程2

<div id="work_div" class="open-form layui-form" bind_id="0" style="display: none;">
 <div id="test2" ></div>
</div>

var work_detail = function(e){
    var data_id = $(e.srcElement).attr("id");
 var bind_id = $('#work_div').attr('bind_id');
 if(bind_id != data_id){
        var week_day = $(e.srcElement).attr("week_day")?$(e.srcElement).attr("week_day").split(','):[]; //下发数据是"0,1,3" 0是周天
 var rest_date =  $(e.srcElement).attr("rest_date")?$(e.srcElement).attr("rest_date").split(','):[]; //下发数据是"2020-11-9,2020-11-10,2020-11-11," 数据格式要和laydate 定义一致，下发处理format(Y-n-j)，月日不补零
 var work_name = '早班';
 var work_time = '00:02 01:00-05:00';
 var mark_class = '';
 week_day.forEach(function (val, index) {
            mark_class += '.layui-laydate-content td:nth-child('+val+'),'
 });
 mark_class = mark_class.substring(0, mark_class.length-1)
        $('#work_div').attr('bind_id', data_id)
        $('#work_div').html('<div id="test2" ></div>' +
            '<div><div>班次详情</div><div>'+work_name+' '+work_time+'</div></div>');
 layui.use('laydate', function(){
            var laydate = layui.laydate;
            laydate.render({
                elem: '#test2'
                 ,position: 'static'
                 ,showBottom: false
                 ,change: function(value, date){ //监听日期被切换
                     if(week_day.length>0){
                        var choosedate = $(mark_class).addClass('work_date');//选中所有显示日期的td
 choosedate.each(function (index,elem) {
                            if(rest_date.indexOf($(this).attr('lay-ymd'))!=-1){
                                $(this).removeClass('work_date');
 }
                        })
                        $('.work_date').append("<div class="layui-elip work-mark">"+work_name+"</div>");//在选中的td中加入显示价价格的div
 }
                }
                ,ready: function(date){
                    if(week_day.length>0){
                        var choosedate = $(mark_class).addClass('work_date');//选中所有显示日期的td
 choosedate.each(function (index,elem) {
                            if(rest_date.indexOf($(this).attr('lay-ymd'))!=-1){
                                $(this).removeClass('work_date');
 }
                        })
                        $('.work_date').append("<div class="layui-elip work-mark">"+work_name+"</div>");//在选中的td中加入显示价价格的div
 }
                }
            });
 });
 }

 
 layer.open({
    type: 1
 ,title: "排班详情"
    ,area: '650px'
    ,shade: [0.8, '#393D49']
    ,shadeClose:true
 ,maxmin: true
 ,content: "#work_div"
    ,btn: [确定，取消]
    ,zIndex:999
 ,yes: function(index){
       
 }
    ,btn2: function(){
        layer.closeAll();
 }
    ,success: function(layero,index){
 }
    ,end: function(){    
 }
});
 
 
 
 
 
};