eventRender 不允许渲染重叠或超出 businessHours

Question

我正在处理当前位于http://klanten.jebble.nl/nodots/fleskens/agenda.html 的日历

我已将 eventRender 连接到 dayClick 函数，该函数呈现 1.5 小时的事件，并且只能在空闲时间段和营业时间内拖动。

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

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

$(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){

没有做你想做的事。

Fullcalendar 使用momentjs 作为日期。 < 和 > 运算符不起作用。使用isBefore() 和isAfter()。比如：

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

Answer 2

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

为了知道它是否与其他事件重叠，您可以查看Is there a way to prevent overlapping events in jQuery FullCalendar?