Question

由于selectOverlap函数仅通过重叠的事件（而不是选择的事件）进行传递，因此难以自定义如何处理事件创建。

就我而言，我们正在使用日历/日记系统，其中有后台事件显示员工的班次，而事件显示员工的个人预订。

在这一点上，除了背景事件以外-绝对没有事件可以相互重叠。

但是...最重要的是-然后，我们叠加了“全天活动”-可能有很多事情，但举例来说，假设它们是“员工生日”-因此，您可能有今天有几项活动，但全天部分都会有一个活动，显示某人的生日。

我正在检查eventOverlap并在eventDrop和eventResize上进行其他检查，以处理不同的冲突，但是这些检查仅适用于正在移动或调整大小的现有事件。我想对事件创建做同样的事情-在选择过程中会发生。为了禁止选择已经有事件的空格，我使用selectOverlap文档中的example函数：

function(event) {
    return event.rendering === 'background';
}

这很棒。但是，如果我尝试创建一个新的全天事件，它将“重叠”当天存在的所有其他事件，并且不会通过此检查。我希望能够使用选择对象来检查它是否为allDay=true，但是该函数仅传递现有事件，并且无法检查所选部分。

您可以在此处看到一个非常简化的演示：

https://codepen.io/anon/pen/NQrxOO

尝试在已有活动的当天创建一个全天活动。

有更好的方法吗？我可以完全删除selectOverlap并在select callback中进行所有操作，但是为了使这项工作有效，我将需要重复进行重叠检查，我觉得这似乎有些过分了比较简单。

执行selectOverlap函数时，不仅可以获取重叠的事件对象，还可以获取选择对象吗？

Answer 1

当前的解决方法是删除selectOverlap支票，而是自己在select callback内做。

下面是我使用select={this.handleEventCreate}时要调用的快速函数的简化版本：

    handleEventCreate = (info) => {
        // Get the Calendar API to allow unselection
        let calendarApi = this.calendarRef.current.getApi();

        // Get all Events
        let checkEvents = calendarApi.getEvents();
        // Loop through them
        checkEvents.forEach(function(event){
            // If it's not a background element, check whether the new element contains the existing, or vice versa.
            if(event.rendering !== "inverse-background" && 
                    (
                        (event.start >= info.start && event.start <= info.end) ||
                        (event.end >= info.start && event.end <= info.end) ||
                        (info.start >= event.start && info.start <= event.end) ||
                        (info.end >= event.start && info.end <= event.end)
                    )
                ){
                    // It is an overlapping event, so we reject it.
                    return calendarApi.unselect();
                }
        });

        alert('All good here to create the event.');
        //extra event creation code to fire here.
    }

FullCalendar-selectOverlap阻止创建全天活动

1 个答案: