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

时间:2015-11-17 01:01:09

标签: javascript jquery fullcalendar

我试图阻止相同的id事件重叠到彼此。例如:如果我有id:1 eventName:orange所以如果我将这个外部元素拖到周日历上并将此事件的时间从8分配到9,那么在这个时间段8中不应该分配另一个事件因为它已被事件1占用,所以如果它的id为1或id为2,则一旦被id 1占用,它就不应该重叠。

屏幕截图,这不应该发生,因为你可以清楚地看到同一个id的两个事件是并排的,我不想要。 enter image description here

你可以从小提琴中获取我的代码,这是我的小提琴,请编辑或开发新代码。非常感谢大家先进。:)

朋友们,除了这个主要问题之外,我还有一个问题,如果我将周日橙色活动移至星期一。然后星期二橙色事件也移动到星期三,所以如何删除它们之间的连接,所以只有周日橙色事件移动到周一,而不影响周二事件。请帮助我作为FullCalander的新手,我无法找到文档是如此有用,因为他们应该提供示例。

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) {

        }

    });


});

1 个答案:

答案 0 :(得分:0)

从外部事件中删除id标记应解决这两个问题

def delete_file(request_id, response, exception):
  if exception is not None:
    # Do something with the exception
    pass
  else:
    # Do something with the response
    pass

batch = service.new_batch_http_request(callback=delete_file)

for file in children["items"]:
  batch.add(service.files().delete(fileId=file["id"]))

batch.execute(http=http)

http://jsfiddle.net/uu0jd543/