FullCalendar

Question

因为selectOverlap函数只传递被重叠的事件，而不是selection，所以很难自定义如何处理事件创建。

就我而言，我们正在开发一个 calendar/diary 系统，背景事件显示员工的轮班，事件显示他们的个人预订。

在这一点上，除了背景事件 - 绝对没有事件应该能够相互重叠。

然而...最重要的是 - 我们然后覆盖 'all day events' - 这可能是任意数量的东西，但为了举例，假设它们是 'staff birthdays' - 因此，您今天可能有几个活动，但全天部分会有一个活动，显示某人的生日。

我正在检查 eventOverlap 并对 eventDrop 和 eventResize 进行一些其他检查以处理不同的冲突，但这些仅适用于正在移动或调整大小的现有事件。我想对事件创建做同样的事情——这发生在 select 期间。为了禁止 select 已经有事件的空间，我使用了 selectOverlap 文档中的示例函数：

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

效果非常好。但是，如果我尝试创建一个新的全天活动，它将 'overlap' 当天存在的任何其他活动，并且不会通过此检查。我希望能够使用 selection 的对象来检查它是否有 allDay=true，但是函数只传递了现有事件，没有办法检查 select编辑部分。

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

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

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

有更好的方法吗？我可以完全删除 selectOverlap 并改为在 select callback 中执行所有操作，但我需要基本上复制重叠检查才能使这项工作正常进行，而且我觉得这对于应该做的事情来说似乎有点矫枉过正比较简单。

是否可以在做selectOverlap函数时，不仅得到overlapped event对象，还能得到selection对象？

Answer 1

当前的解决方法是删除 selectOverlap 检查，然后自己在 select callback.

中进行检查

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

class Diary extends React.Component {

    //additional functions, state definitions, etc etc etc here.

    //Define calendarRef as it will be needed in the function below
    calendarRef = React.createRef();


    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 阻止创建全天事件

FullCalendar - selectOverlap prevents creation of allday events

fullcalendar-4