为什么相同类型的外部元素在FullCalendar中同时重叠？

Question

I am trying to stop overlapping same id event onto the each other. For ex: if I have id:1 eventName: orange so if I drag this external element onto the week's calendar and assign time of this event from 8 to 9 then another event should not be assign in this time slot 8 to 9 as it's already occupied by event 1. No matter what if it's id 1 or id 2 it should not be overlap there once it's occupied by id 1.

Screenshot and this should not be happen as you can clearly see both events of same id is side by side which I DON'T WANT.

You can get my code from fiddle and here is my fiddle please edit or develop new one. Thank you guys a lot in advanced.:)

Friends, I also have one more issue apart from this main issue that if I move sunday orange event to monday. Then tuesday orange event is also move to wednesday so how to remove connections between them so only sunday orange event move to Monday and not affect to Tuesday event. Please help me guys as new to FullCalander and I couldn't find document is so useful as they should provide examples.

Fiddle

$(document).ready(function () {


    /* initialize the external events
    -----------------------------------------------------------------*/

    $('#external-events .fc-event').each(function () {

        // store data so the calendar knows to render an event upon drop
        $(this).data('event', {
            title: $.trim($(this).text()), // use the element's text as the event title
            stick: true, // maintain when user navigates (see docs on the renderEvent method)
            id: $(this).attr('id')
        });

        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 999,
            revert: true, // will cause the event to go back to its
            revertDuration: 0 //  original position after the drag
        });

    });


    /* initialize the calendar
    -----------------------------------------------------------------*/

    $('#calendar').fullCalendar({
        header: {
            left: 'today',
            center: 'title',
            right: 'agendaWeek'
        },
        allDaySlot: false,
        slotEventOverlap: false,
        eventOverlap: function (stillEvent, movingEvent) {
            return stillEvent.allDay && movingEvent.allDay;
        },
        columnFormat: {
            week: 'dddd'
        },
        titleFormat: 'dddd',
        eventDrop: function (event, delta, revertFunc) {
            //inner column movement drop so get start and call the ajax function......
            console.log(event.start.format());
            console.log(event.id);

            //alert(event.title + " was dropped on " + event.start.format());

        },
        eventResize: function (event, delta, revertFunc) {
            console.log(event.id);
            console.log("Start time: " + event.start.format() + "end time: " + event.end.format());

        },
        timeFormat: 'H(:mm)',

        editable: true,
        defaultView: 'agendaWeek',
        droppable: true, // this allows things to be dropped onto the calendar
        drop: function (date) {

            //Call when you drop any red/green/blue class to the week table.....first time runs only.....
            console.log("dropped");
            console.log(date.format());
            console.log(this.id);


            // is the "remove after drop" checkbox checked?
            /*if ($('#drop-remove').is(':checked')) {
                // if so, remove the element from the "Draggable Events" list
                $(this).remove();
            }*/
        },
        eventRender: function (event, element) {

        }

    });


});

Answer 1

Removing the id tags from the external events should fix both issues

<div class='fc-event orange'>Orange</div> <!-- removed id="1" -->
<div class='fc-event red'>Red</div>       <!-- removed id="2" -->
<div class='fc-event purple'>Purple</div> <!-- removed id="3" -->

http://jsfiddle.net/uu0jd543/