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';
}

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

此处优于您的方法的优点是，它允许您访问实际的事件对象，而不是呈现它的HTML元素，因此您可以检查其所有属性，包括“渲染“告诉你它是否是背景事件。

有关详细信息，请参阅https://fullcalendar.io/docs/selection/selectOverlap/。

完整日历多个背景事件无法渲染

1 个答案: