Drag'n drop from dhtmlx list to scheduler

Scheduler
#1

Hi everybody,
I’ m not able to create an event when I drag from dhtmlx list.
Below I put the code.
Can anybody help me.

Thank’s in advance.

G

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>DRAG&DROP</title>
	<link rel="stylesheet" href="/lib/dhtmlx/scheduler_6.0.3/css/dhtmlxscheduler_material.css?v=6.0.3" type="text/css">
	<script src="/lib/dhtmlx/scheduler_6.0.3/js/dhtmlxscheduler.js?v=6.0.3" type="text/javascript"></script>
    

		<!-- DHTML SUITE -->
	<link href="/lib/dhtmlx/suite_7.3.13/css/suite.css" rel="stylesheet">
	<script src="/lib/dhtmlx/suite_7.3.13/js/suite.js"></script>
</head>
<body>
    <div id="list_container" style="width:200px;height:100%"></div>
        <div id="scheduler_here" class="dhx_cal_container" style='width:1000px; height:100%; position:absolute; top:0px; left:250px'>
		<div class="dhx_cal_navline">
			<div class="dhx_cal_prev_button"></div>
			<div class="dhx_cal_next_button"></div>
			<div class="dhx_cal_today_button"></div>
			<div class="dhx_cal_date"></div>
			<div class="dhx_cal_tab" data-tab="day"></div>
			<div class="dhx_cal_tab" data-tab="week"></div>
			<div class="dhx_cal_tab" data-tab="timeline"></div>
			<div class="dhx_cal_tab" data-tab="month"></div>
		</div>
		<div class="dhx_cal_header">
		</div>
		<div class="dhx_cal_data">
		</div>
	</div>
	<script>
        window.addEventListener('DOMContentLoaded', function (event) {
           const list = new dhx.List("list_container", {
                itemHeight: 30,
                dragMode:"both",
                editable: true
            });
            list.data.add({value:"PROVA 1"},1);
            list.data.add({value:"PROVA 2"},2);
            list.data.add({value:"PROVA 3"},2);
            
            scheduler.plugins({
				timeline: true,
				outerdrag: true,
       
          	});

			var sections = [{
					key: 1,
					label: "James Smith"
				},
				{
					key: 2,
					label: "John Williams"
				},
				{
					key: 3,
					label: "David Miller"
				},
				{
					key: 4,
					label: "Linda Brown"
				}
			];

            scheduler.createTimelineView({
				name: "timeline",
				x_unit: "minute",
				x_date: "%H:%i",
				x_step: 30,
				x_size: 24,
				x_start: 16,
				x_length: 48,
				y_unit: sections,
				y_property: "section_id",
				render: "bar"
			});
			
            scheduler.init('scheduler_here', new Date(2022, 5, 30), "timeline");
   </script>
</body>
</html>
#2

I believe the problem is using version 7.3.13 of the suite and version 6.0.3 of the scheduler.
Using version 6.0.3 of the suite, externalDrag events fire.

Can anyone help me so I don’t have to downgrade the suite and rewrite all methods?

Thank’s

#3

Hello @Gabriele_Vittozzi ,

Yes, you are correct - the issue occurs, because the scheduler doesn’t have built-in DnD integration with the new suite versions.

Technically, you can implement the same functionality, by adding DND listeners to the scheduler/list manually, using JS.

I don’t have the exact solution for the list component, but you can try using the similar approach, that is used in the following demo:
https://snippet.dhtmlx.com/6pbq0tlg

The idea, is to listen drop of some component into the scheduler, gets the drop position with the getActionData method, and call the scheduler API to create an event on this place.

(drag the purple div into some timeline section and drop it there)

If you meet some difficulties implementing it, could you please describe them, and reproduce in the snippet tool:
https://snippet.dhtmlx.com/6pbq0tlg
(open the snippet => reproduce the issue on HTML/CODE tabs => click the “Save” button => post here the new link)

Kind regards,

#4

Hi Siarhei,
Perfect.
Works.
Thank you.

Have a good day.

1 Like
#5

Hello @Gabriele_Vittozzi,

Update on the topic:

The DnD integration with modern suite components is possible, using the drag_between plugin of the scheduer:
https://docs.dhtmlx.com/scheduler/extensions_list.html#dragndropbetweenschedulers
and the dnd functionality of suite components:

Here is a demo:
https://snippet.dhtmlx.com/rfxkih90

Kind regards,

#6

Hi @Siarhei,
thanks for the reply.
I had already seen the drag_between property.
I would like to highlight the duration of the event as it goes on the scheduler, but onEventDragIn event but it doesn’t fire.

Here is a snippet:
https://snippet.dhtmlx.com/a8ks3ogd

#7

Hello @Gabriele_Vittozzi,

Regarding this part:

but onEventDragIn event but it doesn’t fire.

Yes, this event doesn’t fire, as it works for case of dragging events between two schedulers:
onEventDragIn Scheduler Docs.

Regarding this part:

I would like to highlight the duration of the event as it goes on the scheduler

There is no built-in option for that, but technically it can be done with the limit plugin:
https://docs.dhtmlx.com/scheduler/limits.html

The idea of solution could be similar, that is implemented in the following sample:
https://docs.dhtmlx.com/scheduler/samples/09_api/06_hightlight_and_single_click_create.html

But you should redefine the range of the timespan each time you start dragging the item from the list(probably the required range should be stored in the list data items)

Kind regards,