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

时间:2014-12-01 09:15:38

标签: javascript jquery calendar fullcalendar

我已经在全日历中创建了一个应用程序,应用程序工作正常,但问题是在星期视图下我今天有两个事件(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;
            }
        });
});

1 个答案:

答案 0 :(得分:0)

如果您需要以下内容:

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

谢谢。