日历+列表

场景描述

如图所示显示类似与日程的方式

实现思路

使用日历和列表组件实现，在日历组件上定制日期单元格(追加)添加列表组件，列表组件绑定存储日程的数据，判断列表渲染行数据跟日历的日期单元格是同一个日期时显示对应的日程数据。

实现步骤

1.在页面上放日历组件，然后点击“定制日期单元格(追加)”

2.在日期单元格(追加)区域放列表组件，并且给列表组件绑定要展现的日程数据集

3.向列表组件的列表模版中添加行列等组件布局为需要显示的样式，然后可以放展现组件如文本绑定要显示的字段值，本例是放了行列在行列中放的文本组件组显示

4.列表组件默认是列表格式展现数据集中加载的数据，但日程要显示的是跟单元格日期相同的数据记录，因此需要对展现组件(本例是文本组件)控制动态隐藏。可以用列表组件的当前行存储日期的字段值跟日历组件单元格的日期进去对比，当两个值不相等的时候就隐藏文本不显示，需要注意的是Day.js的isSame函数判断，如图：