Angular List + Dhtmlx Timeline

Scheduler Javascript
#1

Hi,

I’m trying to add a event from classic div to my timeline div.
My events are in list
listeEvent:any[]=[];

HTML code
this list is display in (whatever you want) div like :
<div *ngFor=“let event of listeEvent” >
<div pDraggable=“event” (onDragStart)=“onDragStart(event)”>{{event.text}}</div>
</div>
pDraggable come from PrimeNG component

My timeline is like that
<div #scheduler_here class=“dhx_cal_container” pDroppable=“event” (onDrop)=“onDrop()”
style=“width: 80%; height:100%; position:absolute; top:0px; left:20%”>

Angular code :
import {Component, ElementRef, OnInit, ViewChild, ViewEncapsulation} from ‘@angular/core’;
import ‘dhtmlx-scheduler-enterprise’;
import ‘dhtmlx-scheduler-enterprise/codebase/ext/dhtmlxscheduler_timeline’;
import ‘dhtmlx-scheduler-enterprise/codebase/ext/dhtmlxscheduler_treetimeline’;
import ‘dhtmlx-scheduler-enterprise/codebase/ext/dhtmlxscheduler_outerdrag’;

declare let scheduler: any;

@Component({
  encapsulation: ViewEncapsulation.None,
  selector: 'app-scheduler',
  templateUrl: './scheduler.component.html',
  styleUrls: ['./scheduler.component.css']
})
export class SchedulerComponent implements OnInit {

  @ViewChild('scheduler_here', {static: true}) schedulerContainer: ElementRef;

  listeEvent: any[] = [];
  eventToDrag: any;

  constructor() {
  }

  ngOnInit(): void {

    let today: Date = new Date();

    scheduler.config.xml_date = '%Y-%m-%d %H:%i';
    scheduler.config.details_on_create = true;
    scheduler.config.details_on_dblclick = true;
    scheduler.config.dblclick_create = false;
    scheduler.config.edit_on_create = false;
    scheduler.config.drag_resize = false;
    scheduler.config.drag_create = false;

    scheduler.attachEvent('onBeforeExternalDragIn', (source) => {
      console.log('here');
      return true;
    });


    let sections = this.createListSections();

    let days: number = 5;

    scheduler.createTimelineView({
      name: 'timeline',
      x_unit: 'hour',
      x_date: '%H:%i',
      x_step: 1,
      x_size: 24 * days,
      scrollable: true,
      scroll_position: new Date(today.getFullYear(), today.getMonth(), today.getDate()),
      column_width: 95,
      y_unit: sections,
      y_property: 'section_id',
      render: 'tree',
      second_scale: {
        x_unit: 'day', 
        x_date: '%d %F'
      }
    });

    scheduler.init(this.schedulerContainer.nativeElement);
    scheduler.setCurrentView(new Date(), 'timeline');

    this.createlistEvents();

  }
 
  onDragStart(event) {
    this.eventToDrag = event;
  }

  onDrop() {
    console.log('onDrop', this.eventToDrag);
  }

}

I can drag my event, but, when I drop it in the timeline, got the call of drop() method but I don’t enter in onBeforeExternalDragIn (<= the method where I want to implement my adding method).

Can Someone help me to add my “external event” to my timeline ?

#2

Is it possible to add external event from classic div/list with drag&drop in Timeline ?
How to do it ?
Help !

#3

Hello @Benoit,

The code from your previous post doesn’t work, as “dhtmlxscheduler_outerdrag” supports integration with “Suite 5.x” and other scheduler instances, and doesn’t support 3-rd party components.

But you can implement similar logic for different components, with the basic js events as drop, dragleave, dragenter, dragover, drag, and others.

In order to do what you want, you should:

1.) Detect a drop of your draggable element on the scheduler
2.) Detect the section in which you drop it(in case of the timeline view) with the getActionData method
3.) Call the addEvent method
4.) Rerender the scheduler with the render() method

The code may look like follows:

document.addEventListener("drop", function( event ) {
  var action_data = scheduler.getActionData(event);
  if ( event.target.parentElement.classList.contains("dhx_matrix_cell")) {
    scheduler.addEvent({
      start_date: action_data.date,
      end_date:   "16-06-2025 12:00",
      text:   "Meeting" + Math.random(),
      holder: "John",
      section_id:  action_data.section
    });
    scheduler.render()
  }

}, true);

Here is the live demo(drag the “This div is draggable” element and drop into the timeline section):
https://snippet.dhtmlx.com/5/2c5bef3a5

#4

Thank for your answer.
I successed with it.

The important point is : let action_data = scheduler.getActionData(event); that allow to have position in the timeline.
In the html code, a simple

(onDrop)=“onDrop($event)”

and in angular

onDrop(event){
 let action_data = scheduler.getActionData(event);

and my problem was solved.

1 Like