events sharing each other in full calendar

问题

I have created an application in full-calendar, the application is working fine but the problem is that under the week view i have two events for today (Nov 9 - 15, 2014)- Meeting 1 and Meeting 2, both are within the boundary levels which you can see a light green event. The problem which i am facing is the events is sharing the time which is been allocated to them through dragging and dropping like as shown below. Since my requirement is that the any events should not share their time with any other events

Can anyone please tell me some solution for this

Working JSfiddle

My code is as given below

$(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:

If you need something like:

disableDragging: true,

-things are that easy for you. But this is a fullCalendar method which disables the event-dragging ability of the wholle caledar.

So (rather than trying to use non-existent functions) try this in your eventRender(event, element) callback:

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

I found another solution here:

Why don't you check it in Select callback?

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
    }
}

Reference: Disable timeslot ranges in jQuery fullcalendar plugin

Thank you.

来源：https://stackoverflow.com/questions/27225049/events-sharing-each-other-in-full-calendar

标签

javascript

jquery

calendar

fullcalendar