关于layui: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(){}
});
 
 
 
 
 
};