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

What do you mean by 'This is the html code'? Is the code placed inside of the HTML? Declare `calendarOptions` in the `.ts` file of the component and use it without `this` — Beka Kalandadze, Dec 22 '21 at 08:51
yes i mean the htl file and the ts file i did some edit in the question , thanks ! — adele, Dec 22 '21 at 09:01
I see you use `this`. Where exactly is your calendarOptions initialized? Can you provide full `.ts` file — Beka Kalandadze, Dec 22 '21 at 10:11

score 1 · Accepted Answer · answered Dec 22 '21 at 14:04

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:

Drop and Dragging events in fullCalendar does not work angular

1 Answers1