要实现日历单元格内右上角带色小圆点，必须绕过mark选项，改用ready回调+DOM操作：先清空已有.dot，再遍历.laydate-day匹配目标日期并注入<span class="dot">，最后用CSS绝对定位控制位置、大小和颜色。
laydate 的 mark 配置能标日期，但不支持小圆点样式
直接用 mark 选项只能渲染纯文本（如 “●” 或数字），且会覆盖单元格默认结构，无法精准控制位置、颜色或大小。真正要实现「日历单元格内右上角/居中带色小圆点」，必须绕过 mark，改用 ready + DOM 操作手动注入。
在 ready 回调里遍历日期单元格加圆点
ready 是 laydate 渲染完日历 DOM 后的钩子，此时所有 .laydate-day 元素已存在，适合做标记注入。关键点：
- 用
laydate.render()的ready回调获取当前面板 DOM - 筛选出目标日期对应的
.laydate-day元素（注意：含年月切换，需校验日期是否匹配） - 每个目标单元格内插入一个
<span class="dot"></span>，再用 CSS 定位 - 避免重复插入（比如切月后再次触发
ready）——建议先清空已有.dot
laydate.render({
elem: '#test',
ready: function(dateObj, endDate, startTime) {
// 清掉之前加的 dot，防止重复
$('.laydate-content .laydate-day').find('.dot').remove();
// 假设要标 [2024-05-10, 2024-05-15, 2024-05-20]
const markedDates = ['2024-05-10', '2024-05-15', '2024-05-20'];
$('.laydate-content .laydate-day').each(function() {
const $this = $(this);
const dateText = $this.text().trim();
if (!dateText || isNaN(dateText)) return;
// 拼出当前单元格完整日期（依赖 laydate 内部 data-date 属性最稳）
const fullDate = $this.data('date');
if (fullDate && markedDates.includes(fullDate)) {
$this.append('<span class="dot"></span>');
}
});
}
});
用 CSS 控制小圆点位置和样式
layui 日历单元格是相对定位，.dot 必须用绝对定位才能脱离文本流，否则会被文字挤偏。常见坑：
- 没给
.laydate-day加position: relative→ 圆点相对于整个日历面板定位 - 用
top: 0; right: 0放右上角，但未设置width/height和border-radius→ 看不出是圆点 - 颜色用默认灰，和背景对比弱 → 建议用
background: #ff5722这类高饱和色
.laydate-day { position: relative; }
.dot {
position: absolute;
width: 6px;
height: 6px;
background: #ff5722;
border-radius: 50%;
top: 4px;
right: 4px;
}
动态更新标记时别漏掉重绘逻辑
如果标记数据是异步加载（比如从接口拿待办日期），不能只在初始化时跑一次 ready。得封装成函数，在数据就绪后主动触发：
- 保存 laydate 实例到变量（
const dateIns = laydate.render({...})） - 调用
dateIns.calendar()强制重绘当前月（会再次触发ready） - 或者更稳妥：手动调用你的标记函数，传入当前面板 DOM（
$('.laydate-content')） - 注意：
change回调只在用户选日期时触发，不适用于月视图切换后的标记同步
圆点本质是 DOM 节点，不是 laydate 原生能力，所以每次切月、切年都得重新挂载——这点容易被忽略，结果就是只在首次打开时显示，翻页后消失。
