将事件拖动到FullCalendar中

Question

我正在使用PrimeNG，我想在Angular中完成可拖动事件到日历中，就像这里的演示一样。这是现场演示。问题是这个例子在Vanilla JS中，angular需要在typescript上使用它。

我创建了一个StackBlitz，试图这样做，但由于打字脚本代码的原因，日历根本没有显示。

Answer 1

首先要注意的是，您忘记添加fullCalendar指令。将以下代码添加到html:

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

然后在选项中添加editable:true。

请注意，您可以使用ngModel来检查是否选中复选框，但您需要在schedule.module中添加import { FormsModule } from '@angular/forms';。我修复了这个问题并更新了示例链接。

这是工作样品。

但我认为您还想从其他输入拖动到fullCalendar。因此，您需要在服务中实现可拖动事件。这就是你想做的第二部分

Answer 2

当您使用primeng时，您必须像一样从priming添加日历组件

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

现在更新您的this.options以接受可丢弃事件。

droppable: true,

还将您的活动设置为Draggable，如下面所示

let draggableEl = document.getElementById('external-events');
new Draggable(draggableEl, {
itemSelector: '.fc-event',
eventData: function(eventEl) {
return {
title: eventEl.innerText
};
}
});

全样本StackBlitz，我修改了你的代码