Jquery draggable get start/end date

Scheduler Javascript
#1

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.

#2

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?

#3

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.

#4

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.

#5

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]

#6

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);
			});
#7

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.

#8

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;
		};