如何在 angular 环境中使用 fullcalendar 中的控件（特别是 eventAllow）来限制某些事件的拖放

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 的 ts 文件中创建一个 property/variable，并将变量设置为响应类型为布尔值的函数。

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

并阅读 HTML 文件中的 property/variable，如下所示。

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

注意：创建方法而不是 property/variable 将不起作用，并可能导致 Whosebug。

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

如何在 angular 环境中使用 fullcalendar 中的控件（特别是 eventAllow）来限制某些事件的拖放

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

javascript

fullcalendar

typescript

angular