事件渲染不允许渲染重叠或在营业时间之外

Question

我正在制作一个日历，它目前位于 http://klanten.jebble.nl/nodots/fleskens/agenda.html

我已经将一个eventRender挂在dayClick函数上，该函数渲染一个1.5小时的事件，并且只能在空闲时间段和营业时间内拖动。

但是，如果您在另一个事件的营业时间之外单击，它确实会在不应该重叠的地方重叠。

希望有人可以告诉我使用什么参数或函数，以便当我在工作时间之外单击或重叠当前事件时，它不会呈现或会在空闲时间段自动呈现。

$(document).ready(function() {
        $('#calendar').fullCalendar({
            /* Text and data config */
            lang: 'nl',
            defaultView: 'agendaWeek',
            titleFormat: 'MMMM',
            columnFormat: 'dd D',
            header: {
                left:   'prev',
                center: 'title',
                right:  'next'
            },
            buttonText: {
                prev: 'vorige week',
                next: 'volgende week'
            },
            /* Available hours and date stuff */
            weekends: false,
            businessHours: {
                start: '09:00', /* API Data */
                end: '18:00', /* API Data*/
                dow: [1,2] /* API Data */
            },
            eventConstraint: {
                start: '09:00', /* API Data */
                end: '18:00', /* API Data*/
                dow: [1,2] /* API Data */
            },
            minTime: '09:00',
            maxTime: '18:00',
            allDaySlot: false,
            monthNames: ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'],
            /* Styling */
            eventBackgroundColor: '#dff0f7',
            eventBorderColor: '#dff0f7',
            eventTextColor: '#35a0da',
            contentHeight: 'auto',
            eventOverlap: false,
            slotEventOverlap: false,
            selectOverlap: false,
            /*View Render (disable past weeks) */
            viewRender: function(currentView) {
                var minDate = moment()
                // Past
                if (minDate >= currentView.start && minDate <= currentView.end) {
                    $(".fc-prev-button").prop('disabled', true); 
                    $(".fc-prev-button").addClass('fc-state-disabled'); 
                }
                else {
                    $(".fc-prev-button").removeClass('fc-state-disabled'); 
                    $(".fc-prev-button").prop('disabled', false); 
                }
            },
            dayClick: function(date, jsEvent, view) {
                start = date.format();
                start = moment(start);
                var tmp = moment(start);
                var end = tmp.add(1.5, 'hours');
                $('#calendar').fullCalendar('removeEvents', 1)
                var newEvent = {
                    id: 1,
                    title: 'Ketelonderhoud',
                    start: start,
                    end: end,
                    backgroundColor: '#7db927',
                    borderColor: '#7db927',
                    textColor: '#fff',
                    editable: true,
                    durationEditable: false,
                };
                $('#calendar').fullCalendar('renderEvent', newEvent);
            },
            events: [
                {
                    id: 10,
                    title: 'bezet',
                    start: '2015-04-14T13:00:00',
                    end: '2015-04-14T14:30:00',
                }
            ]
        });

Answer 1

你不应该使用 dayClick .有一个内置选项可用于创建名为 selectable 的事件

。

然后，您可以使用selectOverlap回调来限制选择。并且在做出选择后调用select回调。如果您需要固定的时间量，请在将其添加为事件之前先使用结束日期。示例 JSFiddle。

否则，您需要手动检查它。

如果这样做，项目中的 eventsArray 循环需要更改。该行：

if (end.valueOf() > evStart && end.valueOf() < evEnd){

不做你想做的事。

完整日历使用momentjs作为日期。<和>运算符不起作用。使用 isBefore() 和 isAfter() 。像这样：

if (end.isAfter(evStart) && end.isBefore(evEnd)){

Answer 2

当您从 dayClick 回调手动创建它时，您需要检查您正在创建的事件。

为了知道它是否与其他事件重叠，你可以检查有没有办法防止jQuery FullCalendar中的重叠事件？