Search code examples
javascriptangulartypescriptfullcalendarfullcalendar-5

Drop and Dragging events in fullCalendar does not work angular

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

  • 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: