fullCalendar 中的拖放事件不起作用

Posted 2023-02-19

【中文标题】fullCalendar 中的拖放事件不起作用

【英文标题】：Drop and Dragging events in fullCalendar does not work angular

【发布时间】：2022-01-23 12:19:35

【问题描述】：

我想为我的 fullCalendar 事件实现拖放功能。该功能使用户能够在日历中拖放事件以更改他们在另一天和时间的事件。

这是我的 html 代码：

<p-fullCalendar deepChangeDetection="true" [events]="events" [options]="calendarOptions"></p-fullCalendar>

这是 ts 文件

this.calendarOptions = 
      droppable: true,
      eventDragStart: function(a) 
        console.log("Drag start", a);
      ,
      eventDragStop: function(a) 
        console.log("Drag stop", a);
      
      ,

【问题讨论】：

“这是 html 代码”是什么意思？代码是否放置在 HTML 中？在组件的.ts文件中声明calendarOptions，不使用this

是的，我的意思是 htl 文件和 ts 文件，我在问题中做了一些编辑，谢谢！

我看到你使用this。您的 calendarOptions 到底在哪里初始化？能否提供完整的.ts 文件

只是一个参数calendarOptions: CalendarOptions;

【参考方案1】：

你说你想启用

用户在日历中拖放事件

但是，根据 fullCalendar 文档，droppable 选项...

确定是否可以将来自其他日历的外部可拖动元素或事件拖放到日历上。

（我的粗体字）。

您需要设置的是editable 选项，它...

确定是否可以修改日历上的事件。这决定了是否可以拖动事件并调整其大小。

（再次，我的粗体字）。

所以如果你设置

editable: true

在您的日历选项中，您应该会得到更好的结果。

参考资料：

https://fullcalendar.io/docs/droppable https://fullcalendar.io/docs/editable