Question

我已经在全日历中创建了一个应用程序，应用程序工作正常，但问题是在星期视图下我今天有两个事件（2014年11月9日至15日） - 会议1和会议2，两者都是在边界水平内，你可以看到一个浅绿色的事件。我面临的问题是事件正在分享通过拖放分配给他们的时间，如下所示。由于我的要求是任何事件都不应与其他事件分享时间

enter image description here

任何人都可以告诉我一些解决方案吗

Working JSfiddle

我的代码如下所示

$(document).ready(function() {
        $('#calendar').fullCalendar({
           slotEventOverlap : false,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            defaultDate: '2014-11-12',
            businessHours: true, // display business hours
            editable: true,
            events: [
                {
                    title: 'Business Lunch',
                    start: '2014-11-03T13:00:00',
                    constraint: 'businessHours'
                },
                {
                    title: 'Meeting 1',
                    start: '2014-11-13T11:00:00',
                    end: '2014-11-13T12:00:00',

                    constraint: 'availableForMeeting', // defined below
                    color: '#257e4a'
                },
                {
                    title: 'Meeting 2',
                    start: '2014-11-13T12:00:00',
                    end: '2014-11-13T14:00:00',
                    constraint: 'availableForMeeting', // defined below
                    color: '#257e4a'
                },
                {
                    title: 'Conference',
                    start: '2014-11-18',
                    end: '2014-11-20'
                },
                {
                    title: 'Party',
                    start: '2014-11-29T20:00:00'
                },

                // areas where "Meeting" must be dropped
                {
                    id: 'availableForMeeting',
                    start: '2014-11-11T10:00:00',
                    end: '2014-11-11T16:00:00',
                    rendering: 'background'
                },
                {
                    id: 'availableForMeeting',
                    start: '2014-11-13T10:00:00',
                    end: '2014-11-13T16:00:00',
                    rendering: 'background'
                },

                // red areas where no events can be dropped
                {
                    start: '2014-11-24',
                    end: '2014-11-28',
                    overlap: false,
                    rendering: 'background',
                    color: '#ff9f89'
                },
                {
                    start: '2014-11-06',
                    end: '2014-11-08',
                    overlap: false,
                    rendering: 'background',
                    color: '#ff9f89'
                }
            ],
             eventDrop: function (event, delta, revertFunc) {
                return false;
            }
        });
});

Answer 1

如果您需要以下内容：

disableDragging: true,

- 对你来说很容易。但这是一个fullCalendar方法，它禁用了wholle caledar的事件拖动能力。

所以（而不是尝试使用不存在的函数）在eventRender(event, element)回调中尝试这个：

if (event.id == 'someid')
    element.draggable = false;
}

我在这里找到了另一个解决方案：

为什么不在Select回调中查看？

select: function( start, end, allDay, jsEvent, view ) {
    if( /*start is the disabled time*/ )
        return false;
    else{
        // Proceed with the normal flow of your application
        // You might show a popup to get info from user to create
        // a new event here
    }
}

参考：Disable timeslot ranges in jQuery fullcalendar plugin

谢谢。

事件在完整日历中相互分享

1 个答案: