Jquery draggable get start/end date

I’m working with a timeline scheduler with external drag and drop based on Jquery UI drag and drop.
When i drop an event it calls the scheduler method

// get action
scheduler.getActionData(event)

// create event object ... and add it
scheduler.addEvent(ev);

// But how to get start date ex: 22-12-2016 16:00 end date 22-12-2016 20:00??

But this only returns (Date) the object of the cursor-pointed date. Does anyone know how to use
jQuery draggable to get the start and enddate.

Hi,

If you drag an external item, I’m not sure what do you mean by start and end points, as there is only one point - the point of drop.
If you drag and drop inside of the Scheduler, why not use a built in drag-to-create-event-behavior instead of jQuery UI actions?

I’m using a external div with events. The events could be dragged on the timeline. But after droping i only could get
the startdate where the mouse drops the event. I want also want to know the enddate.

I will try to explain in some more depth.
I have some external divs (events) that needs to be dropped on the scheduler timeline. Every event has a duration in hours.
When i grep an event for dragging, i calculate the hours. See code below

					// Drag
					$('.drag_task').draggable({
						revert           : 'invalid',
						cursor           : 'move',
						zIndex           : 999,
						scrollSensitivity: 10,
						scrollSpeed      : 10,
						helper           : function(event){
							// get task subject
							var subject = $(event.currentTarget).find(':first-child').html();
							// get task hours
							var hours   = $(event.currentTarget).find('td[data-hours]').data('hours');

							return $("<div class='drag_helper' data-hours='" + hours + "'>" + subject + "</div>");
						},
						drag             : function(event, ui){
							// draggable helper object
							$helper     = $(ui.helper);
							// get task hours
							hours       = $helper.data('hours');
						}
					});

When the event is over the timeline i want to calculate the start/end date for storing into a database, how?

So for now i add an highlight div witch width is calculate by hours * cellWidth. (This is not working correctly, because the cell width is different after a couple of cells.)
If i could make this working properly, i want to try to calculate the start/end date by the highlighter start en end position if this is possible.

Hi,
you can get datetime/section from mouse event using scheduler.getActionData(DOMEvent) method
docs.dhtmlx.com/scheduler/api__s … ndata.html
Here is a related discussion in docs:
docs.dhtmlx.com/scheduler/dhtmlx … 1218710315

Scheduler won’t know the intended end date since it only knows mouse position which is a single point and interpreted as start date.
As I understand, in your handler you have task duration in hours so the end date can be easily calculated, e.g.:

[code]function(event, ui){
var hours = $helper.data(‘hours’);
var pos = scheduler.getActionData(event);
var start_date = pos.date;
var end_date = scheduler.date.add(start_date, hours*1, “hours”);
var section = pos.section;

scheduler.addEvent({
start_date: start_date,
end_date: end_date,
section_id: section,// section property as specified in ‘y_property’ of timeline
text: “new event”
});
}[/code]

docs.dhtmlx.com/scheduler/api__s … other.html

And if you want to highlight div position inside a timeline while user moves the mouse, you could try these methods
docs.dhtmlx.com/scheduler/api__s … espan.html
docs.dhtmlx.com/scheduler/api__s … espan.html
docs.dhtmlx.com/scheduler/limits.html
they can color calendar dates by start/end dates:

[code]var divs = scheduler.markTimespan({
start_date:start_date,
end_date: end_date,
css: “css-class”,
sections:{
“timelineName”: section
}

});[/code]

Thx this was very helpfull, but i’ve some other problem to. In the scheduler (timeline) i am hidding weekends and hours.
So a week is without weekend, and a day starts from 00:00 till 07:00

			scheduler.ignore_planningweekview = function(date){
				if(format2hour(date) > 7){
					return true;
				}
				//non-work hours
				if(date.getDay() == 6 || date.getDay() == 0){
					return true;
				}
			};

The problem with the following code is, when i mouseover for example on friday: hour 05:00 it will add 10 hours
to the enddate. But this wil still return friday with a endtime of 05:00 + 10:00 = 15:00
But this needs to return monday 03:00

How could i use scheduler.date.add so that it knows the hidding hours and days??

			scheduler.attachEvent("onMouseMove", function(id, event)
			{
				var hours      = 10;
				var pos        = scheduler.getActionData(event);
				var start_date = pos.date;
				var end_date   = scheduler.date.add(start_date, hours, "hour");
				var section    = pos.section;
				console.log('hours: ' + hours);
				console.log('start_date: ' + start_date);
				console.log('end_date: ' + end_date);
				console.log('section: ' + section);
			});

Hello,

‘scheduler.date.add’ is able to add a time interval that you specify.

To solve this issue you must add different intervals depending on the start_date.

This is my solution

		// custom calc for enddate
		var fix_enddate = function(date)
		{
			// get number of 15 minutes
                        // for exemple event_duration = 3 hours (3*60*60/900) = 12 pieces of 15 minutes
			var nrOf15Min = ((event_duration * 60) * 60) / 900;

			// counter
			var i = 0;

			while(i < nrOf15Min)
			{
				// increase end date
				date.setMinutes(date.getMinutes() + time_interval);

                               // last hour on a day (days are from 00:00 - 08:00)
				if(date.getHours() >= 8)
				{
					// add day
					date.setDate(date.getDate() + 1);
					// reset houres
					date.setHours(0);

					// if new date is weekend skip it
					if(date.getDay() == 0 || date.getDay() == 6)
					{
						date.setDate(date.getDate() + 2);
					}
				}

				i++;
			}

			return date;
		};