完整日历多个后台事件未呈现

Question

我在 fullcalendar 中使用背景事件作为假期。我正在像这样从数据库中获取事件

 events: [
        @foreach($events as $in)
            {

                id: '{{$in["id"]}}',
                title: '{{$in["name"]}}',
                start: '{{$in["interventionTime"] or ''}}',
                end: '{{$in["interventionTime"]}}', 
                room: '{{$in["room"]}}',
                repeat: '{{$in["repeat"]}}',
                limit: '{{$in["limit"]}}',
                detail: '{{$in["detail"]}}',
                @if($in['holiday'] == 1)
                rendering:  'background',
                backgroundColor:  '#fb0b0b',
                @endif

            },
        @endforeach

一切都会好起来的。我只看到这种颜色的背景事件backgroundColor: '#fb0b0b',

但是当我尝试检测这样的背景事件时问题就开始了

   dayClick: function(date, jsEvent, view) {
        if (jsEvent.target.classList.contains('fc-bgevent')) {
            alert('You cannot create intervention on a holiday');
            return false;
        }
   }

仅检测到最后一个后台事件，其他事件不会。我很困惑背景颜色适用于每个背景事件，但rendering: 'background', 仅适用于最后一个事件。 请帮忙。

Answer 1

所以您试图阻止用户创建与您的背景事件重叠的事件？

如果是这样，那么首先，不要使用dayClick 来创建事件 - 这应该通过处理“select”回调来完成，该回调会检测用户选择并允许他们在日历上拖动鼠标以指示特定他们希望事件发生的时间段。见https://fullcalendar.io/docs/selection/select_callback/。

这样做后，您可以通过设置selectOverlap 选项轻松阻止用户在后台事件或任何其他事件之上添加事件：

selectOverlap: false

如果您希望允许与其他事件重叠，但不允许与背景事件重叠，那么您可以在此处放置回调，而不是简单地 false：

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

对于每个与用户选择重叠的事件运行一次，并在允许选择继续之前检查被重叠的事件不是背景事件。

与您的方法相比，这里的优势在于它使您可以访问实际事件object，而不是渲染它的 HTML 元素，因此您可以检查它的所有属性，包括“渲染”一个告诉你它是否是背景事件。

详情请见https://fullcalendar.io/docs/selection/selectOverlap/。