Angular 2 PrimeNG Scheduler onDrop event get date
I am trying to implement drag-and-drop support using PrimeNG Scheduler.
Here's my template.
<p-schedule [droppable]="true" (onDrop)="handleDropEvent($event)" pDroppable="test">
But in the handler, my event is DragEvent, not the calendar event with date and everything else.
handleDropEvent(event: any) {
console.log(event); //prints DragEvent
}
One thought is that it pDroppable="test"
breaks her one way or another as I originally did it without her and it felt natural to me. But no event happens at all.
And one more thought, because primeng Drag & Drop uses its own DragAndDrop, which doesn't work with Scheduler? Reason full calendar supports drag and drop for jQuery-ui. Vil checked it out now.
Maybe I missed something, here is the plunker with the problem.
https://plnkr.co/edit/89y3KOdkU63O6vJpcJ41?p=preview
UPD: Yes it looks like this: pDroppable overrides onDrop and calls it with its own arguments.
Confirmed to only work with jquery-UI draggable.
source to share
The only solution I could find was to reject PrimeNG Drag and Drop and use the supported JQuery-UI one ...
In your component, declare a jQuery reference like this (be sure to use this syntax instead of importing jQuery like this import $ from 'jquery';
one because it creates a different context that prevents the blob from working):
declare var $: any;
then in the onInit make method the Draggable component:
ngAfterViewInit(){
$('.draggable').draggable({
revert: "invalid",
revertDuration:1
});
}
The drag source can of course be any html element with a selected selector:
<div class="draggable" style="background-color: gray;width:300px;height:30px">Drag me</div>
If you have a problem importing jquery-ui I ended up using jquery-ui-bundle and modified 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"
],
Hope this helps ...
source to share
One solution to use jQuery-UI in your code like in the column at the bottom. But I don't want to use jQuery-UI and hope this will be fixed by the primeng command or fullcalendar will support its own Drag & Drop.
My solution (I need to support falling into a specific event, so will show an example with this, but it can be used with day as well)
Here is the plunker - https://plnkr.co/edit/LddxzNDSyOwGlPhW1rRq?p=preview
And here's the explanation.
So I added a handler for rendering events
calendarOptions = { eventRender: this.handleEventRender() };
And used it on a calendar like this.
<p-schedule [events]="events" [droppable]="true" [options]="calendarOptions">
There is an eventRender attribute, but fullcalender calls it itself, so self-promotion is broken. So using 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;
}
This is no better in my opinion, I would like to make a template for an event in this function with a primeng droppable. But at the moment you don't have much time to delve into it. But the reason is completely in one place, and if primeng or fullcalender fixes this, I hope that in most cases I will just need to remove it. This can also be used for daytime views. But the reason for my logic for decreasing the day is much more complicated, this is currently not being implemented. There is a dayRender attribute, so it should be pretty much similar.
source to share