如何解决可拖动事件到 FullCalendar
我正在使用 PrimeNG
并且我想在 Angular 中完成可拖动事件到日历中,就像在演示 here 中一样。这是live demo。问题是该示例在 Vanilla JS
中,而 angular 在打字稿中需要它。
我尝试在其中创建了一个 StackBlitz,但由于打字稿代码,日历根本没有显示。
解决方法
首先注意您忘记添加 fullCalendar
指令。将以下代码添加到 html:
<p-fullCalendar [events]="events" [options]="options"></p-fullCalendar>
然后在您的选项中添加 editable:true
。
请注意,您可以使用 ngModel
来检查复选框是否被选中,但您需要在 import { FormsModule } from '@angular/forms';
中添加 schedule.module
。我解决了这个问题并更新了示例链接。
Here 是工作样本。
但我认为您还想从其他输入拖动到 fullCalendar
。所以你需要在你的服务中实现可拖动事件。 This 第二部分你想做什么
当您使用 primeng
时,您必须从 Primeng 添加日历组件,例如
<p-fullCalendar [events]="events" [options]="options"></p-fullCalendar>
现在更新您的 this.options
以接受 droppable 事件。
droppable: true,
还将您的活动设为 Draggable
,如下所示
let draggableEl = document.getElementById('external-events');
new Draggable(draggableEl,{
itemSelector: '.fc-event',eventData: function(eventEl) {
return {
title: eventEl.innerText
};
}
});
完整示例 StackBlitz,其中我修改了您的代码
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。