Fullcalendar js事件重叠

时间:2016-10-23 18:14:28

标签: javascript jquery calendar fullcalendar

我使用的是fullcalendar js jquery插件,这是一个很棒的插件,但我有一个小问题你知道怎么做:

我有一个始终不重叠的事件列表。 然后有时我需要将事件的大小调整为1或2个小时。真正的一步是在这里我尝试使下一个事件不重叠但是根据调整大小的结束事件移动。我尝试过事件重叠自定义函数,但它并没有真正起作用。这两个事件之间总是存在几分钟的差距。

明天我会告诉你一个小提琴,告诉你我在哪里。

/编辑/ 只需创建此Codepen:

http://codepen.io/cchumi/pen/pEGLXd

重叠的Javascript示例:

eventOverlap: function(stillEvent, movingEvent) {           
//Update MovingEvent     
$('#calendar').fullCalendar('updateEvent', movingEvent);
//swap stillEvent time with movingEvent
  stillEvent.end = stillEvent.end;
  stillEvent.start = movingEvent.end;
//Update stillEvent
  $('#calendar').fullCalendar('updateEvent', stillEvent);
  //return true to allow swap.
  return true;
}

2 个答案:

答案 0 :(得分:2)

从你的帖子开始已经有一段时间了,但我认为我找到了一个解决方案,我正在寻找你的代码并理解这一点,在事件重叠的那一刻,eventoverlap函数被触发,所以我只是在代码之前添加事件监听器.mouseup()以停止代码触发,直到释放鼠标单击。现在它完美无缺。 现在您的代码必须如下所示:

eventOverlap: function(stillEvent, movingEvent) {
    $('#calendar').mouseup(function() {
        var movingEventEnd = moment(movingEvent.end).utc().format();
        //"YYYY-MM-DDTHH:mm:ss"
        var StillStart  = moment(stillEvent.start).utc().format();
        var StillEnd = moment(stillEvent.end).utc().format();

        var duration = moment.duration(moment(StillEnd).diff(moment(StillStart)));
        var hoursbaseStillEvent = duration.asHours();
        console.log("Still Hours Base " + hoursbaseStillEvent);
        $('#calendar').fullCalendar('updateEvent', movingEvent);

        var movingEventNewEnd = moment(movingEvent.end).utc().format();
        var durationMovingEvent = 
moment.duration(moment(movingEventNewEnd).diff(moment(movingEventEnd)));


        var hoursMovingEvent = durationMovingEvent.asHours();
        console.log("hourss " + hoursMovingEvent);

        stillEvent.start = moment(movingEvent.end).utc().format();
        var StillEventStart = moment(stillEvent.start).utc().format();
        console.log("StillEventStart " + StillEventStart);
        var StillEventEnd = moment(stillEvent.end).utc().format();
        var Startdate = moment(StillEventStart).utc().format();
        console.log("Startdate " + moment(Startdate).utc().format());
        var Enddate = moment(StillEventEnd);

        var StillEventEndNew = moment(Startdate).add(hoursbaseStillEvent, 'hours');  

        console.log("StillEventEndNew " + moment(StillEventEndNew).utc().format());

        stillEvent.end = moment(StillEventEndNew).utc().format(); 
        $('#calendar').fullCalendar('updateEvent', stillEvent);
    });
    return true;
    //return stillEvent.allDay && movingEvent.allDay;
},

答案 1 :(得分:0)

嗨,我已经解决了我的第一个问题。 您可以在代码中查看我的codepen。

但另一个“问题”来了。 在fullcalendar中我们可以暂停eventoverlap函数,直到我释放resi​​ze事件。 解释。我已将时间设置为30分钟。但是当我调整事件大小并重叠另一个事件时,我无法继续调整大小,直到释放鼠标单击并再次调整大小。每次需要30分钟