日程冲突错开展示方案

在日历月视图中部分计划时间是有冲突的，如果不错开计划相互重叠显得杂乱而且容易错过某些计划。
错开处理操作
步骤一：排序，此处可以根据自己需要的优先级排序
步骤二：第一个日程放入组1中
步骤三：第二个日程和组1中日程否重叠（任意一个或者全部），
步骤四：如果重叠则放到组1中，如果没有重叠放入一个全新的数组中。
步骤五：根据组中日程个数确定日程宽度。组中只有一个则占据整个宽度，组中多个则均分日宽度。

const findConflictTaskGroups = (taskList: TaskSubjectTime[]): TaskSubjectTime[][] => {
    if (taskList.length === 0) return [];
    // 按照开始时间排序
    const sortedTasks = [...taskList].sort((a, b) => a.marginTop - b.marginTop);
    // 冲突计划分组
    const groups: TaskSubjectTime[][] = [];
    // 装填计划索引
    const processed = new Set<number>();

    for (let i = 0; i < sortedTasks.length; i++) {
        if (processed.has(i)) continue;

        const group = [sortedTasks[i]];
        processed.add(i);
        let groupEndTime = (sortedTasks[i].marginTop + sortedTasks[i].height);

        // 查找所有与当前组时间范围重叠的任务
        for (let j = i + 1; j < sortedTasks.length; j++) {
            if (processed.has(j)) continue;

            // 如果任务开始时间早于当前组的最晚结束时间，可能冲突
            if (sortedTasks[j].marginTop < groupEndTime) {
                // 检查是否确实与组内某个任务冲突
                const conflicts = group.some(task => isOverlapping(task, sortedTasks[j]));
                if (conflicts) {
                    group.push(sortedTasks[j]);
                    processed.add(j);
                    groupEndTime = Math.max(groupEndTime, (sortedTasks[j].marginTop + sortedTasks[j].height));
                }
            } else {
                // 由于已排序，后续任务都不会冲突，可以提前退出
                break;
            }
        }

        groups.push(group);
    }

    return groups;
};

步骤三中任意一个重叠效果

步骤三种全部重叠效果

目前使用任意一个重叠的方案，正在完善更好的方案，毕竟此方案中浪费空间较多。完全重叠的比较杂乱。
欢迎体验微信小程序：马上行计划管理
PC端：https://www.huaruyu.com/