uniapp如何实现时间轴会议预约显示？

uniapp实现时间轴会议预约显示：

 效果图如下：

 数据源可用：

				listInfo: [{
						"scheduleId": "366471527434162177",
						"leadUserId": 18375156497,
						"startTime": "09:10",
						"endTime": "09:40",
						"scheduleTitle": "省委常委会1",
						"scheduleAddr": "省委常委会议室",
						"scheduleType": 100,
						isClash: true,
						clashArr : [{
								"startTime": "09:10",
								"endTime": "09:40",
								"scheduleTitle": "省委常委会1",
								"scheduleAddr": "省委常委会议室1",
								scheduleType: 100,
								"scheduleId": "366471527434162177"
							},
							{
								"startTime": "09:30",
								"endTime": "09:50",
								"scheduleTitle": "省委常委会2",
								"scheduleAddr": "省委常委会议室2",
								scheduleType: 200,
								"scheduleId": "366471527434162177"
							}
						]
					},
					{
						"scheduleId": "367522536147259393",
						"leadUserId": 18375156497,
						"startScheduleDate": "2022-09-29 09:00",
						"endScheduleDate": "2022-09-29 12:00",
						"startTime": "11:00",
						"endTime": "11:20",
						"scheduleTitle": "临时会议2",
						"scheduleContent": "临时会议，工作安排",
						"scheduleAddr": "4楼2号会议室",
						"scheduleStatus": 100,
						"scheduleType": 200,
						"trainType": 0,
						"isUrgentDiscuss": false,
						"isClash": false,
						"clashNum": 0
					}
				]

 如果没有设计冲突，可把冲突的代码删掉就行（clashArr 判断的html代码删除），时间轴就正常显示