Schedule External Drag and Drop Resources onto existing event

[Daniel]

Hello,

Trying to incorporate the ability for a user to drag and drop a resource onto an existing appointment/event via scheduler. I have configured external drag and drop to drop appointments onto the calendar and this works perfect, however i would like to be able to drop an external item onto an existing appointment/event. 

I've tried exploring the "hover" method and then retrieving the id, but this could have some potential problems. 

public onHover(e: any): void {

console.log('appointment ', e?.event?.target?.dataset);

console.log('appointment id', e?.event?.target?.dataset?.id);

console.log('appointment gid', e?.event?.target?.dataset?.guid);

// this.dragAppointmentId = e?.event?.target?.dataset?.id;

}

<ejs-schedule (hover)="onHover($event)"></ejs-schedule>

Is there any method to get the existing appointment/event connected to the cell or eventHover? Any help or guidance would be greatly appreciated!

[Venkateshwaran Saravanakumar]

Hi Daniel,

Demo: https://stackblitz.com/edit/angular-vmbmyt-jtbs2v?file=src%2Fapp.component.ts

You can achieve your requirement by utilizing the Scheduler's getCellDetails, getEvents, and getResourcesByIndex methods within the TreeView's nodeDragStop event, as shown in the code snippet below.

[app.component.html]

 <ejs-treeview #treeObj [fields]='field' cssClass='treeview-external-drag' dragArea=".drag-sample-wrapper"

        [allowDragAndDrop]='allowDragAndDrop' (nodeDragStop)="onTreeDragStop($event)" (nodeDragStart)="onTreeDragStart()"

        (nodeDragging)="onTreeDrag($event)" (nodeSelecting)="onItemSelecting($event)">

        <ng-template #nodeTemplate let-data>

          <div id="waiting">

            <div id="waitdetails">

              <div id="waitlist">{{data.Name}}</div>

              <div id="waitcategory">{{data.DepartmentName}} - {{data.Description}}</div>

            </div>

          </div>

        </ng-template>

      </ejs-treeview>

[app.component.ts]

public onTreeDragStop(event: DragAndDropEventArgs): void {

    if (event.target.classList.contains('e-work-cells')) {

      var cellDetails = this.scheduleObj.getCellDetails(event.target);

      var eventDetails = this.scheduleObj.getEvents(cellDetails.startTime, cellDetails.endTime);

      var resDetails = (this.scheduleObj.getResourcesByIndex(cellDetails.groupIndex)).resourceData.Id;

      var apptDetail = eventDetails.filter(item => resDetails == item.ConsultantID);

      console.log(apptDetail);

    }

    else {

      console.log(this.scheduleObj.getEventDetails(event.target.closest('.e-appointment')));

    }

}

 

Regards,
Venkatesh