FullCalendar 重叠事件不同颜色答案

【问题标题】：FullCalendar Overlapping Events different colorFullCalendar 重叠事件不同颜色
【发布时间】：2018-06-21 13:28:27
【问题描述】：

我正在使用 Fullcalendar / Scheduler 在日历上显示一些事件。我从 REST 服务获取所有信息。

我知道 Fullcalendar 有一个方法可以检查一个事件是否与另一个事件重叠（它在使用 slotEventOverlap 属性时会这样做），因此它会根据事件的数量使其减少 50% 或更少。

我的问题是，有谁知道那个方法是什么.. 我需要实现的是，当日历上有两个重叠的事件时，它们应该是红色的。像这样的：

我在想，在库中的某个地方，当计算完成并设置 % 时，可以将一个新类添加到这些事件中，比如 fc-overlap，我可以自定义它。

或者有人对我如何实现这一点有任何想法吗？

我能找到的唯一解决方案是在获得事件列表后，在函数中解析它们，检查 startTime 和 endTime 是否重叠，并以某种方式将一个类分配给仅重叠的那些。（我可以通过他们的 ID 识别事件）但这似乎以某种方式违背了目的，因为日历在呈现事件时已经在进行验证。

【问题讨论】：

我想知道是否可以通过 CSS，我发现垂直事件可能是重叠的。我不确定，但是如果您将样式应用于fc-v-event 类，它会起作用吗？如果存在重叠的事件没有得到这个类或者重叠的事件没有得到这个类的情况，那么它就不起作用了。
不幸的是，这不起作用，我已经查看了每个事件有哪些类，它们与不重叠的正常事件没有什么不同。它们之间的唯一区别是重叠事件计算并渲染了它们各自的片段。 Fullcalendar 不会向它们添加任何其他内容
如果那是唯一的区别，您不能解析计算属性的样式，那么通常您会知道它们重叠并相应地设置样式吗？我认为你正在寻找修改源函数，我同意这会更优雅。我只是在这里抛出快速解决方案的想法。
不幸的是我不能这样做，因为我不知道是否有 2 或 3 个元素发生冲突......这意味着每次计算的结果都不同。
您想在哪个阶段执行此操作？从远程加载事件还是渲染事件？

标签： javascript jquery angular fullcalendar fullcalendar-scheduler

【解决方案1】：

有两种方法可以做到这一点：

服务器端：我认为最好的方法，绝对更快。

假设您有一个名为events 的数据库表填充了您的事件，您可以轻松检查当前事件是否与当前视图中的其他事件重叠。示例：

$output = [];
$my_start_date = $_GET['start'];
$my_end_date = $_GET['end'];
$result = $db->query("SELECT * FROM events WHERE 1;");
foreach ($result AS $row){
    $is_overlapping_class = "";
    if( isOverlapping($row['start'], $row['end']) )
        $is_overlapping_class = "my-custom-overlapping-class";

    $output[] = [
        "title" => $row['title'],
        "content" => $row['content'],
        "start" => date("Y-m-d", strtotime( $row['start'] )),
        "end" => date("Y-m-d", strtotime( $row['end'] )),
        "allDay" => boolval($row['allDay']),
        "className" => $is_overlapping_class
    ];
}

还有isOverlapping()函数，非常基础：

function isOverlapping( $start, $end ){
    GLOBAL $db;
    $result = $db->query("SELECT 1 FROM events WHERE date(date_start) >= date('$my_start_date') AND date(date_end) <= date('$my_end_date')");
    return $result->rowCount() > 1; // > 1 because one result will be surely the currently tested event
}

客户端：当您必须同时显示许多事件时，我不建议使用此方法。

定义一个函数 (found here) 来检查当前事件是否与任何其他事件重叠。

function isOverlapping( event ) {
    var array = $('#calendar').fullCalendar('clientEvents');
    for(i in array){
        if(array[i].id != event.id){
            if(!(Date(array[i].start) >= Date(event.end) || Date(array[i].end) <= Date(event.start))){
                return true;
            }
        }
    }
    return false;
}

然后，在事件 eventRender 检查重叠并添加类：

$('#calendar').fullCalendar({
    events: [ ... ],
    eventRender: function(event, element) {
        if( isOverlapping( event ) ){
            element.addClass('my-custom-overlapping-class');
        }
    }
});

注意：此代码未经测试，因为 OP 未提供源代码。应该说明需要/可以做什么。

【讨论】：

【解决方案2】：

考虑到您正在使用来自https://fullcalendar.io 的完整日历库来回答

检查链接https://fullcalendar.io/docs/slotEventOverlap，其中指出，您是否想要重叠事件。使用上面链接中的关键字“slotEventOverlap”，我在JS文件https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.js中找到了与之关联的事件@

函数“generateFgSegHorizontalCss”使用关键字“slotEventOverlap”来获取与正在显示的事件相关的 CSS。

希望使用以上信息，您可以尝试找出下一个可能的解决方案来创建自定义 css 以实现您的目标。

【讨论】：