How can i limite move(drag) range in timeline view


#1

i have set the time range by createTimelineView to (9:00 - 18:30) but there is a problem when i move the created event
for example , there is an created event_A(time 10:00 to 12:00) now i move it and make its time start from 18:00, i expect the time would be 18:00-18:30(overflow is unnecessary), but actually the time is 18:00-20:00.
samples/06_timeline/09_drag_duration.html can recur this problem

scheduler.createTimelineView({
        section_autoheight: false,
        name:	'timeline',
        x_unit:	'minute',
        x_date:	'%H:%i',
        x_step:	30,
        x_size: 20,
        x_start: 18,
        x_length:	48,
        y_unit: this.sections,
        y_property:	'section_id',
        dx: 70,
        dy: 120,
        scrollable: true,
        round_position: true,
        column_width: 53,
        event_dy: 'full',
        // folder_dy: 100,
        render: 'bar',
        //  dy:200,
        //  column_width:200
        event_min_dy: 60
      })

#2

Do you want to reduce event duration when you drag it to the edge/limit of the scale?


#3

yes.you cant drag over the edge of scale,(if you drag over it,the event’s start_date or end_date can only be start/end of the scale edge/limit time) and my solution now is just limit(take the edge time if it was over edge) the data before it send to server. is scheduler support a property to limit it? (sorry for my bad english :slight_smile: )


#4

Thank you for clarifications.
It can be implemented in the onDragEnd handler. Get min and max dates of the active view using getState() method and set these values after dragging the event.

scheduler.attachEvent("onDragEnd", function (id, mode, e){
    var ev = scheduler.getEvent(id);

    var minDate = scheduler.getState().min_date;
  	var maxDate = scheduler.getState().max_date;

  	if(ev.start_date.getTime() < minDate.getTime() )
      ev.start_date = minDate;
  
  	if(ev.end_date.getTime() > maxDate.getTime() )
      ev.end_date = maxDate;

    return true;
});

Here the snippet that demonstrates how it works https://snippet.dhtmlx.com/524ef1fae


#5

many thanks!:grinning: