Disable changing section while resizing event

Scheduler
#1

Hello, when I resize event - sometimes it change the section to other. I need to disable this while resizing (and only in that scenario) Is it possible?

#2

Hello @pawelktr ,

Yes, you can do it with onBeforeDrag, onDragEnd, onBeforeEventChanged events. The logic(if you want to keep resized dates, but forbid section changes) will be to get the original section before the drag starts, and manually set this section to the resized event when drag operation ends.

The onBeforeDrag event allows you to get the dragging mode(you need the mode == resize), and set the flag that will control when you want to forbid moving event between sections. Also, it uses to get the original event’s section:

scheduler.attachEvent("onBeforeDrag", function (id, mode, e){
  markSections(scheduler.getActionData(e).section)
  if (mode != "create"){
    originalSection = scheduler.getEvent(id).section_id;
  }
  if (mode == "resize"){
    resizeFlag = true;
    originalSectionNew = scheduler.getActionData(e).section;
	originalSection = originalSectionNew; // emulate original section for colorizing part
  }
  return true;
});

The onDragEnd event is used to reset the resize flag:

scheduler.attachEvent("onDragEnd", function(id, mode, e){
  resizeFlag = false;
});

The onBeforeEventChanged is used to finally forbid resize event to change section:

scheduler.attachEvent("onBeforeEventChanged", function(ev, e, is_new, original){
  if(!is_new && resizeFlag){
    ev.section_id = original.section_id;
  }
  
  return true;
});

Here is a demo:
http://snippet.dhtmlx.com/5/ae9d3c204

in addition, to forbid moving resizing events between sections, it also marks all “forbidden” sections:

var marked; // variable for markTimespan
scheduler.attachEvent("onEventDrag", function (id, mode, e){
  if(mode == "resize"){
    var date = scheduler.getActionData(e).date;
    var activeSection = scheduler.getActionData(e).section;
    scheduler.unmarkTimespan(marked);
    marked = scheduler.markTimespan({
      start_date: scheduler.date.add(date, -5, "week"),
      end_date: scheduler.date.add(date, 5, "week"),
      css: "highlighted_timespan",
      sections:{timeline: markedSections},
      type: "dhx_time_block" 
    });
  }
  return true;
});

And also colorized resizing the event with the following code:

scheduler.templates.event_class=function(start, end, event){

  if (scheduler.getState().drag_id == event.id && event.section_id !== originalSection){
    if(resizeFlag)
    	return "changeable_false";
  } 
  else {
    return ""
  };
};
#4

Works like a charm! Thank you very much