可拖动事件到 FullCalendar

Question

我正在使用 PrimeNG，我想在 Angular 中将可拖动事件完成到日历中，就像在演示 here. This is the live demo 中一样。问题是这个例子在 Vanilla JS 中，angular 需要它在打字稿上。

我在尝试这样做的地方创建了一个 StackBlitz，但是由于 typescript 代码，日历根本没有显示。

Answer 1

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

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

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

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

Here 是工作样本。

但我认为您还想从其他输入拖到 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 我修改了您的代码

可拖动事件到 FullCalendar

Draggable events into a FullCalendar

angular

angular12