By Anton M.


2017-06-26 08:20:45 8 Comments

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.

2 comments

@Anton M. 2017-06-28 08:20:23

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.

@talpaz 2017-06-27 23:03:59

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...

Related Questions

Sponsored Content

2 Answered Questions

[SOLVED] Tooltip for primeng- schedule events

1 Answered Questions

[SOLVED] Event onValueChange on a date. PrimeNG 5.2.4

1 Answered Questions

[SOLVED] Want to freely drag and drop using ng2-drag-drop angular 2

3 Answered Questions

[SOLVED] How to get the date of [(selection)] of primeNg data table. Angular 2

  • 2017-04-09 17:18:48
  • ilovejavaAJ
  • 2366 View
  • 1 Score
  • 3 Answer
  • Tags:   angular primeng

0 Answered Questions

Drag & Drop events p-schedule PrimeFaces/PrimeNG Angular 2

1 Answered Questions

[SOLVED] PrimeNg Schedule styles do not work

  • 2017-08-09 14:32:44
  • jphearse
  • 251 View
  • 0 Score
  • 1 Answer
  • Tags:   angular primeng

1 Answered Questions

[SOLVED] ng2-dragula modelDrop event causing array to be undefined

2 Answered Questions

PrimeNG Schedule on WebPack Angular 2

1 Answered Questions

Sponsored Content