不允许 eventRender 呈现重叠或在 businessHours 之外

Question

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

的日历

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

但是，如果您在另一个活动的 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 回调手动创建它时，您需要检查您正在创建的事件。

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

Answer 2

你不应该使用 dayClick。有一个用于创建名为 selectable.

的事件的内置选项

然后就可以使用selectOverlap callback to limit the selection. And the select callback is called after the selection is made. If you need it to be a fixed amount of time, play with the end date before adding it as an event. Example JSFiddle.

否则需要手动检查

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

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

没有按照您的意愿去做。

全日历使用 momentjs for it's dates. The < and > operators don't work. Use isBefore() and isAfter()。类似于：

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

不允许 eventRender 呈现重叠或在 businessHours 之外

eventRender not allowed to render overlapping or outside businessHours

jquery

fullcalendar