Drag an event by clicking anywhere

Scheduler Javascript
#1

Currently it’s only possible to drag an event by doing this over the dhx_title. Is there an option to make the complete event draggable? So a user can just drag it by clicking anywhere in it?

#2

I ran into the same problem a few weeks back.
Go into the dhtmlxscheduler.js file and find the section:
“scheduler._on_mouse_down=function(”
This will have a switch statement in it (if the code is unmodified looks something like below)

NOTE: The snippet is from the minified js file, the a, b and c variables are probably named something else in the normal file, so remember to change the variable names if they don’t match up if you’re copying and pasting the code.

The switch statement you’re looking for:

switch(c){
	case "dhx_cal_event_line":
	case "dhx_cal_event_clear":
		if(this._table_view)
		this._drag_mode="move";
		break;
	case "dhx_event_move":
	case "dhx_wa_ev_body":
		this._drag_mode="move";
		break;
	case "dhx_event_resize":
		this._drag_mode="resize";
		break;
	case "dhx_scale_holder":
	case "dhx_scale_holder_now":
	case "dhx_month_body":
	case "dhx_matrix_cell":
	case "dhx_marked_timespan":
		this._drag_mode="create";
		this.unselect(this._select_id);
		break;
	case "":
		if(b.parentNode)
			return scheduler._on_mouse_down(a,b.parentNode);
	default:
		if(scheduler.checkEvent("onMouseDown")&&scheduler.callEvent("onMouseDown",[c])&&b.parentNode&&b!=this)
			return scheduler._on_mouse_down(a,b.parentNode);
		this._drag_id=this._drag_mode=null
}

Change it to this:

switch(c){
			case "dhx_cal_event_line":
			case "dhx_cal_event_clear":
				if(this._table_view)
					this._drag_mode="move";
				break;
			case "dhx_event_move":
			case "dhx_body":
			case "dhx_wa_ev_body":
				this._drag_mode="move";
				break;
			case "dhx_event_resize":
				this._drag_mode="resize";
				break;
			case "dhx_scale_holder":
			case "dhx_scale_holder_now":
			case "dhx_month_body":
			case "dhx_matrix_cell":
			case "dhx_marked_timespan":
				this._drag_mode="create";
				this.unselect(this._select_id);
				break;
			case "":
				if(b.parentNode)
					return scheduler._on_mouse_down(a,b.parentNode);
			default:
				if(scheduler.checkEvent("onMouseDown")&&scheduler.callEvent("onMouseDown",[c])&&b.parentNode&&b!=this)
					return scheduler._on_mouse_down(a,b.parentNode);
				this._drag_id=this._drag_mode=null
		}

Notice how the new code has a case of “dhx_body” this will allow the body of the event to be dragged as well. The footer can also be changed to be a move instead of a resize by changing the “dhx_event_resize” case

#3

Thanks a lot. I’ll try this this evening. Is there no way without modifying the source? This will cause problems every time there is an update.

#4

I don’t think so, since even if you put an event for onclick of “dhx_body” class if it managed to run the newly defined onclick first, then once it ran the scheduler’s checks it would end up hitting the default case in the switch statement as dhx_body wasn’t defined as a case and the default case naturally sets the drag related variables to be null, If it ran the newly defined onclick second, well the drag variables have already been defined and used as null since the default case was taken.

#5

Unfortunately there is no way to fix behavior without changing the sources.
But above described solution is safe and will not cause any unwanted side effects.