Question

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

我知道Fullcalendar有一个方法可以检查一个事件是否与另一个事件重叠（使用slotEventOverlap属性时，它会执行此操作），以便根据事件的数量将其降低到50％或更少。

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

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

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

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

Answer 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没有提供任何源代码。应该给出需要/可以做什么的想法。

Answer 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来实现目标。

Answer 3

我没有足够的声誉来发表评论:-)，所以我建议改善Yuri的JavaScript解决方案（标记为未经测试），该解决方案对我有用：

更改：

start和end是momentJS对象，因此可以使用isBefore()和isAfter()方法。
在全天活动中，start和end可以是null。

因此可以将功能isOverlapping()编辑为此：

function isOverlapping(event) {
    var array = $('#calendar').fullCalendar('clientEvents');
    for(i in array){
        if(array[i].id != event.id && array[i].start != null && array[i].end != null && event.start != null && event.end != null) {
            if(array[i].start.isBefore(event.end) && array[i].end.isAfter(event.start)) {
                return true;
            }
        }
    }
    return false;
}

FullCalendar重叠事件的颜色不同

3 个答案: