仅限新事件（选择）到背景事件

Question

基本上我有一个日历，其中包含各个领域的背景事件。我想限制用户只能创建一个在后台事件范围内的事件。

这是日历的一个例子： https://i.imgur.com/OpTTcX5.png

只有绿色突出显示的区域才允许在其上选择新事件。

这是我日历的完整代码：

 if ($('#calendar').is(':visible')) { //if the container is visible on the page
    $('#calendar').fullCalendar({
        height: 'auto',
        allDaySlot: false,
        defaultView: 'agendaWeek',
        editable: false,
        weekends: false,
        selectable: true,
        minTime: "10:00",
        maxTime: "21:00",
        events: function (start, end, timezone, callback) {
            var csrfToken = $('input[name="csrfToken"]').attr('value');
            $.ajaxSetup({
                beforeSend: function (xhr) {
                    xhr.setRequestHeader('Csrf-Token', csrfToken);
                }
            });
            $.ajax({
                url: '/availableSlots/' + '@UserController.getCurrentUser.getUid',
                type: 'GET',
                success: function (response) {
                    var events = [];
                    $(response).each(function () {
                        var event = {
                            id: $(this).attr('availabilityId'),
                            title: "One-Time",
                            start: $(this).attr('startDate'),
                            end: $(this).attr('endDate'),
                            dow: [],
                            rendering: 'background'
                        };
                        if ($(this).attr("weekly") === true) {
                            event.title = "Weekly";
                            event.dow = [moment($(this).attr('startDate')).isoWeekday()];
                            event.start = moment($(this).attr('startDate')).format("HH:mm");
                            event.end = moment($(this).attr('endDate')).format("HH:mm");
                        }
                        events.push(event);
                    });
                    callback(events);
                }
            })
        },
        eventRender: function (event, eventElement) {
            eventElement.find("div.fc-content").prepend("<button onclick='removeAppointment(\"" + event + "\")' class='no-button eventDelete'><i class=\"material-icons md-18\">close</i></button>");
        },
        select: function (start, end, jsEvent, view) {
            if(($("#calendar").fullCalendar( 'clientEvents', [1])).length > 0) {
                $.alert({
                    title: "Hold on there",
                    content: "You already have an appointment slot selected, cancel the current one to change your time.",
                    buttons: {
                        ok: {
                            text: "Okay"
                        }
                    }
                })
            } else {
            var newAppointment = {
                title : "Appointment",
                id: 1,
                userId: '@UserController.getCurrentUser.getUid',
                start: moment(start).format(),
                end: moment(end).format(),
                weekly: false
            };
            $.confirm({
                title: 'Confirm Appointment',
                content: 'Do you want to create an appointment for this time?',
                theme: 'modern',
                buttons: {
                    yes: {
                        text: 'Yes, Create',
                        btnClass: 'btn-primary',
                        keys: ['enter', 'shift'],
                        action: function () {
                            $('#calendar').fullCalendar('renderEvent', newAppointment, true);
                        }
                    },
                    cancel: {
                        text: 'No, Cancel.'
                    }
                }
            });
            }
        },
        selectOverlap: function(event) {
            return event.rendering === 'background';
        }
    });
} else {
    setTimeout(createMakeAppointmentCalendar, 50); //wait 50 ms, then try again
}
}

代码仍处于开发阶段，因此它可能不是最优化/干净的，但我基本上需要将新事件创建限制为仅仅是背景事件。

任何想法/提示？我找不到类似的用例。