Drag drop users to the Daypilot calendar event

I am also trying to implement other solution for it, I am actually trying to integrate some libraries for drag drop from angular2 named ng2-drag-drop, But for that i need to a new Div and need to add the droppable directives on it,
I added the div to the event by adding Areas in the onBeforeEventRender event but there i am facing some issues

1. In areas we can mentioned right, bottom, width etc in px but suppose if we have to add it like width = 100% and height=100% how can i add it (Because i want that div size same as that of the event)?
2. I want to add the draggable directive to that div, But there is no option to add it in areas? Is there any property where we can mention the complete html of the areas which we are adding, I saw there is one property named html in areas but even after setting that html is not coming in the event

Can anyone please help on it,

Thanks,
Dhiraj

I am adding the div to the event by adding it in areas in onBeforeEventRender as below

onBeforeEventRender: (args) => {
args.e.areas = [
{
right: 50,
bottom: 200,
width: 1200,
top: 100,
HeightSpec: 120,
onClick: (argsclick) => {
this.confirmDeleteIconClick = true;
this.confirmDelete.show(argsclick.source);
},
onDrop: (argsDrop) => { alert('ondrop'); this.drop(argsDrop) },
onDragover: (argsDragOver) => {alert('ondragover'); this.allowDrop(argsDragOver) },
visibility: args.e.visible,
html: '<div class = "fa fa-trash-o iconFont" style="height:100%; width: 100%; background-color:red;"> Memebership 2 </div>',
}
]
}

But only OnClick event works and other events are not getting detected (Even we are not able to see other events in Event listeners tabs of that div),

Is there any restrictions from DayPilot side for adding other events? Or what i can do so that other events are also getting attached to this div element?
Note: We are using it in Angular4

Can anyone please help me on it, Also please let me know is there any other way in daypilot for drag and drop on the event?