How do I use eventAllow from fullcalendar in an angular environment to restrict drag and drop from certain events

Issue

<full-calendar #unitCalendar [editable]='true' [defaultView]="calendarView" [defaultDate]="unit.start_date*1000" [plugins]="calendarPlugins" [header]="calendarHeader" (eventClick)="viewEventDetails($event)" (eventDrop)='updateDate($event)' (dateClick)="handleDateClick($event)" [eventSources]="calendarEventSource"></full-calendar>

I have tried adding eventAllow as a callback and define a method inside the ts file but the method is never called as if the event is never fired.

Solution

I resolved this my self after a frustrating time. The answer is to create a property/variable in the js/ts file titled eventAllow and set the variable to a function with a response type of boolean.

eventAllow = function (dropInfo, draggedEvent) {
    if(draggedEvent.extendedProps.calendarEvent.id !== null) {
      return true;
    }
    return false;
  }

and read the property/variable in the HTML file like below.

<full-calendar 
#unitCalendar 
[editable]='true' 
[defaultView]="calendarView" 
[defaultDate]="unit.start_date*1000" 
[plugins]="calendarPlugins" 
[header]="calendarHeader" 
(eventClick)="viewEventDetails($event)"
(eventDrop)='eventDropped($event)' (eventResize)='eventResized($event)' 
[eventAllow]='eventAllow' 
(dateClick)="handleDateClick($event)" [eventSources]="calendarEventSource"
></full-calendar>

NOTICE: Creating a method instead of a property/variable will not work and possibly cause a StackOverflow.

Hope this helps anyone out there with a similar issue!

Answered By - ajhernandez95