Angular 2 PrimeNG Scheduler onDrop event get date

Question

I am trying to implement drag and drop support with primeNG Scheduler.

Here is my template.

<p-schedule [droppable]="true" (onDrop)="handleDropEvent($event)" pDroppable="test">

But in handler my event is DragEvent and not calendar event with date and all other things from it.

handleDropEvent(event: any) {
    console.log(event); //prints DragEvent
}

One thought is that pDroppable="test" breaks it somehow cause as i initially did it without it and it looked natural to me. But than no event happens at all.

And one another thought, cause primeng Drag&Drop uses native DragAndDrop it does not work with Scheduler? Cause full calendar supports drag and drop for Jquery-ui. Wil check this now.

May be i missed something, here is plunker with problem.

https://plnkr.co/edit/89y3KOdkU63O6vJpcJ41?p=preview

UPD: Yes looks like pDroppable overrides onDrop and calls it with own arguments.

Confirmed it works only with jquery-UI draggable.

Answer 1

One solution to use jQuery-UI in your code like in post at the bottom. But i do not want to use jQuery-UI and hope this will be fixed by primeng team or fullcalendar will support native Drag&Drop.

My solution (i need to support drop into specific event, so will show example with that, but it can be used with day as well)

Here is plunker - https://plnkr.co/edit/LddxzNDSyOwGlPhW1rRq?p=preview

And here is explanation.

So i added handler for event render

calendarOptions = {
    eventRender: this.handleEventRender()
};

And used it in calender like this.

<p-schedule [events]="events" [droppable]="true" [options]="calendarOptions">

There is attribute for eventRender, but fullcalender calls it by it self, so self reference is broken. So with use of options and wrapped function i can call my function

handleEventRender() {
  let that = this;

  let callback = (event: any, element: any, view: any) => {
    if (event.type == this.DROP_EVENT) {
        element.on('dragover', (jsEvent: any) => {
            jsEvent.preventDefault();
            jsEvent.originalEvent.dataTransfer.dropEffect = 'copy';
        });

        element.on('drop', (jsEvent: any) => that.handleDropEvent(event));
    }

    return element;
  };

  return callback;
}

It is not best in my opinion, i would like to render template for event in this function with primeng droppable. But for now don't have too much time to dig into it. But cause it is completely in one place and if primeng or fullcalender will fix it i hope in most cases i just will need to remove it. It is also possible to use for day views. But cause my logic for day drop is much more complex, currently not implementing this. There are dayRender attribute as well so it should be pretty much similar.

Answer 2

The only solution I've been able to find is to dismiss the PrimeNG Drag & Drop and use the supported JQuery-UI one...

In your component declare a reference to JQuery like this (it's mandatory to use this syntax instead of importing jQuery like this import $ from 'jquery';, because it creates a different context that prevents the drop to work):

declare var $: any;

then on the onInit method make the component Draggable:

    ngAfterViewInit(){
        $('.draggable').draggable({
          revert: "invalid",
          revertDuration:1
        });
     }

The drag source could be of course any html element with the chosen selector:

<div class="draggable" style="background-color: gray;width:300px;height:30px">Drag me</div>

If you have problem importing jquery-ui, I've ended up using jquery-ui-bundle and modifying the angular-cli.json like this:

"scripts": [ 
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/jquery-ui-bundle/jquery-ui.min.js",
        "../node_modules/moment/min/moment.min.js",
        "../node_modules/fullcalendar/dist/fullcalendar.min.js"
      ],

I hope this helps...