uni-calendar日历组件更改标点颜色和位置及多个标点显示

uni-calendar的日历组件显示的标点只能显示一种颜色,并且标点的位置在右上角.而我们在项目中需要实现多种颜色标点的显示,并且标点要显示在日期的正下方.

改之后的效果图:

实现以上的效果我们需要对uni-calendar组件的源码进行修改就可以了,想让这个日历组件实现不同颜色的标点我这里有两种方法可以实现.

第一种:

首先我们先找到uni-calendar-item.vue 文件

这里是我们传给日历组件的info标点值.

weeks.extraInfo.info 就是我们传给日历组件的标点值.

第二种:

日历组件显示多个标点:

我们只需要给日历组件的状态传一个数组即可

在 uni-calendar-item.vue中进行循环判断即可