2

I use fullcalendar js jquery plugin which is a great plugin but I have a small question do you know how:

I have a list of events which always not overlap. Then sometimes I need to resize an event to be 1 or 2 hours much longer. The real step is here I try to make the next event to be not overlap but to move according to the resized end event. I have tried with event overlap custom function but it doesn't really work. There is always a gap of minutes between the two events.

I will send you a fiddle tomorrow to show you where I am.

/EDIT/ Just Create this Codepen :

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

Javascript example for overlap :

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
  • Please provide us with some code to work with... Commented Oct 23, 2016 at 19:11
  • Just added a Pen and my custom function. Thanks
    – CChumi
    Commented Oct 25, 2016 at 6:12

1 Answer 1

2

it's been a while since your post but I think that I got a solution for you, I was looking your code and understood that, at the moment that the events overlaps the eventoverlap function is triggered, so I just add an event listener .mouseup() before your code to stop the trigger of your code until you release the click of the mouse. Now it works perfectly. Now your code has to look like this:

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.