如何在角度环境中使用活动允许从全日历来限制某些事件的拖放

Question

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

我尝试添加 eventAllow 作为回调并在 ts 文件中定义一个方法，但该方法从未被调用，就好像该事件从未被触发一样。

Answer 1

经过一段令人沮丧的时间，我自己解决了这个问题。答案是在标题为 eventAllow 的 js/ts 文件中创建一个属性/变量，并将该变量设置为响应类型为布尔值的函数。

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

并读取 HTML 文件中的属性/变量，如下所示。

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

注意：创建一个方法而不是一个属性/变量将不起作用，并可能导致堆栈溢出。

希望这对任何遇到类似问题的人有所帮助！