Fullcalendar 仅将新事件（选择）限制为后台事件

基本上我有一个日历，上面有各个领域的背景事件。我想限制用户只创建背景事件范围内的事件

这是日历的一个示例：

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

这是我的日历的完整代码：

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

if（$（'#calendar'）。is（':visible'）{//如果容器在页面上可见
$（“#日历”）.fullCalendar({
高度：“自动”，
全天时段：错，
defaultView:'agendaWeek'，
可编辑：false，
周末：错，
是的，
minTime：“10:00”，
maxTime:“21:00”，
事件：函数（开始、结束、时区、回调）{
var csrfToken=$（'input[name=“csrfToken”]”）。attr（'value'）；
$.ajaxSetup({
发送前：函数（xhr）{
setRequestHeader（'Csrf-Token'，csrfToken'）；
}
});
$.ajax({
url:'/availableSlots/'+'@UserController.getCurrentUser.getUid'，
键入：“GET”，
成功：功能（响应）{
var事件=[]；
$（响应）。每个（函数（）{
var事件={
id:$（this.attr（'availabilityId'），
标题：“一次”，
开始：$（this.attr（'startDate'），
结束：$（this.attr（'endDate'），
道琼斯指数：[]，
渲染：“背景”
};
if（$（this.attr（“weekly”）==true）{
event.title=“每周”；
event.dow=[时刻（$（this.attr（'startDate'））.isoWeekday（）；
event.start=moment（$（this.attr（'startDate'））.format（“HH:mm”）；
event.end=力矩（$（this.attr（'endDate'））.format（“HH:mm”）；
}
事件。推送（事件）；
});
回调（事件）；
}
})
},
eventRender:函数（事件，eventElement）{
eventElement.find（“div.fc-content”）.prepend（“close”）；
},
选择：函数（开始、结束、jsEvent、视图）{
如果（$（“#日历”）.fullCalendar（'clientEvents'，[1]）.length>0）{
美元警报({
标题：“坚持住”，
内容：“您已经选择了约会时段，请取消当前时段以更改您的时间。”，
按钮：{
好:{
文字：“好的”
}
}
})
}否则{
var newAppointment={
标题：“任命”，
id:1，
userId:'@UserController.getCurrentUser.getUid'，
开始：时刻（开始）.format（），
结束：力矩（结束）.format（），
周刊：错
};
美元。确认({
标题：“确认约会”，
内容：“是否要为此时间创建约会？”，
主题:"现代",，
按钮：{
是的：{
文本：“是，创建”，
btn类：“btn主”，
按键：[“回车”，“移位”]，
行动：功能（）{
$（“#日历”）.fullCalendar（'renderEvent'，newAppointment，true）；
}
},
取消：{
文本：“不，取消。”
}
}
});
}
},
选择重叠：功能（事件）{
return event.rendering==='background'；
}
});
}否则{
setTimeout（createMakeAppointmentCalendar，50）；//等待50毫秒，然后重试
}
}

代码仍然在dev中，因此它可能不是最优化/干净的，但我基本上需要将新事件创建限制为仅返回事件

有什么想法/建议吗？我还没有找到类似的用例。

我可以看到两个选项：1）在选择方法中，检查提议的时间是否完全在任何现有的背景事件内。为此，您必须获取当前事件的列表并循环它们，比较每一个事件。2） 或者，将您的逻辑转换为更传统的方法。使用事件（或背景事件）-必要时与营业时间一起-指示不可用的区域（毕竟我假设这些是其他人已经占用的时段）。然后你可以直接使用“selectOverlap”选项来限制可能的范围。我可以看到两个选项：1）在选择方法中，检查建议的时间是否完全在任何现有的背景事件内。为此，您必须获取当前事件的列表并循环它们，比较每一个事件。2） 或者，将您的逻辑转换为更传统的方法。使用事件（或背景事件）-必要时与营业时间一起-指示不可用的区域（毕竟我假设这些是其他人已经占用的时段）。然后您可以直接使用“selectOverlap”选项来限制可能的范围。