I want to implement a drag and drop functionality for my fullCalendar events. The functionality enables users to drag and drop events within the calendar to change their event in another day and time.
This is the html code I have:
<p-fullCalendar deepChangeDetection="true" [events]="events" [options]="calendarOptions"></p-fullCalendar>
and this the ts file
this.calendarOptions = {
droppable: true,
eventDragStart: function(a) {
console.log("Drag start", a);
},
eventDragStop: function(a) {
console.log("Drag stop", a);
},
You said you wanted to enable
users to drag and drop events within the calendar
But, as per the fullCalendar documentation, the droppable option...
Determines if external draggable elements or events from other calendars can be dropped onto the calendar.
(my bold).
What you need to set instead is the editable option, which...
Determines whether the events on the calendar can be modified. This determines if the events can be dragged and resized.
(again, my bold).
So if you set
editable: true
in your calendar options, you should get better results.
References: