Drop and Dragging events in fullCalendar does not work angular

Question

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);
      
      },

Answer 1

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:

• https://fullcalendar.io/docs/droppable
• https://fullcalendar.io/docs/editable