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。有一个内置选项可用于创建名为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?

eventRender不允许呈现重叠或外部businessHours

2 个答案: