可将事件拖动到 FullCalendar 中

Question

我正在使用

PrimeNG

，我想在 Angular 中完成可拖动事件到日历中，就像在此处中的演示一样。这是现场演示。问题是该示例位于

Vanilla JS

中，而 Angular 需要在打字稿上使用它。

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

Answer 1

首先请注意，您忘记添加

fullCalendar

指令。将以下代码添加到 html 中：

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

然后在您的选项中添加

editable:true

。

请注意，您可以使用

ngModel

来检查复选框是否已选中，但您需要在

import { FormsModule } from '@angular/forms';

中添加

schedule.module

。我修复了问题并更新了示例链接。

这里是工作示例。

但我认为您也想从其他输入拖动到

fullCalendar

。所以你需要在你的服务中实现可拖动事件。 这你想做的第二部分

Answer 2

当您使用

primeng

时，您必须从primeng添加日历组件，例如

  <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我修改了您的代码