CODEWITHSUNDEEP
javascriptangulartypescriptfullcalendarfullcalendar-5
adele
adele

Reputation: 43

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

Upvotes: 4

Views: 3001

Answers (1)

ADyson
ADyson

Reputation: 62074

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:

Upvotes: 3

Related Questions