Gantt and Scheduler in the same page, with DnD

Gantt
#1

Hello,

I currently have two different pages, one with a gantt, and the other one with a scheduler (timeline view).
I’m planning on having only one page presenting both the gantt and the scheduler (timeline view) at the same time, with a synchronized horizontal scrolling.
Does anybody knows if this is possible ?
Is it possible to drag and drop events from the timeline view to the gantt view ?

Best regards,
Thanks for your help !

#2

Hello,

Does anybody knows if this is possible ?

You can do this by attaching an event listener to the Gantt scroll event and adjusting the Scheduler’s timeline accordingly.

const timeline = scheduler.getView(); 

gantt.attachEvent("onGanttScroll", (left, top) => {
    const scrollState = gantt.getScrollState();
    timeline.scrollTo(scrollState.x);
});

Is it possible to drag and drop events from the timeline view to the gantt view ?

You can allow dragging events from the Scheduler and dropping them into the Gantt by listening to the onEventDropOut event in Scheduler:

scheduler.attachEvent('onEventDropOut', (id, event, to, e) => {
    // Ensure the drop happened inside the Gantt area
    if (!e.target.closest('.gantt_data_area')) return;

    // Convert the dropped event into a Gantt task
    const newTask = {
        text: event.text,
        start_date: event.start_date,
        end_date: event.end_date
    };

    // Add the task to Gantt
    gantt.addTask(newTask);

    return true;
});

Here is an example: DHTMLX Snippet Tool
Please note that this example requires further development and testing.

#3

Thanks very much Maksim_Lakatkou,
I really appreciate your answer and the associated Snippet.
I’ll work on it …

1 Like