【发布时间】：2020-08-07 15:49:07
【问题描述】：
我正在使用@fullcalendar/angular v4.2 并已成功创建日历并使用 eventSources 通过我的后端 API 获取数据。我一直无法弄清楚如何处理将事件拖到月视图中的新日期。
<full-calendar #calendar
defaultView="dayGridMonth"
[editable]="true"
[plugins]="calendarPlugins"
[eventSources]="eventSources"
(eventDrop)="onEventDrop($event)"
(eventResize)="onEventResize($event)"></full-calendar>
当 drop 事件触发时，我通过将持续时间 eventDropInfo 增量添加到存储在 extendedProps 中的对象的先前开始/结束来使用新时间更新我的后端。但是，如果我什么都不做，日历事件会在我释放鼠标后迅速回到原来的位置。我添加了对 calendarApi.refetchEvents() 的调用，它重新加载所有事件，然后日历在新位置绘制移动的事件。然而这并不是最优的，因为在获取新数据时事件会快速回到原始位置，然后它会移动到新位置。
public onEventDrop(eventDropInfo) {
const form = eventDropInfo.event.extendedProps.form as SippForm;
const duration = moment.duration(eventDropInfo.delta);
const mStart = moment(form.DateStarted, 'YYYY-MM-DD HH:mm:ss').add(duration.asSeconds(), 'seconds');
const mEnd = moment(form.DateEnded, 'YYYY-MM-DD HH:mm:ss').add(duration.asSeconds(), 'seconds');
form.DateStarted = mStart.format('YYYY-MM-DD HH:mm:ss');
form.DateEnded = mEnd.format('YYYY-MM-DD HH:mm:ss');
this.sippBackendService.updateSippForm(form)
.pipe(first())
.subscribe(newForm => {
const calendarApi = this.calendarComponent.getApi();
calendarApi.refetchEvents();
}, error => {
window.alert(`Changes couldn't be saved`);
eventDropInfo.revert();
});
}
我希望事件在其新位置放置，然后我更新后端 API 并且事件保持在它放置的位置。我错过了什么？
尝试修复 #1：
基于https://github.com/fullcalendar/fullcalendar-angular/issues/184我降级了版本
"@fullcalendar/angular": "^4.0.2-beta",
"@fullcalendar/core": "^4.1.0",
"@fullcalendar/daygrid": "^4.0.1",
"@fullcalendar/interaction": "^4.1.0",
"@fullcalendar/list": "^4.0.1",
"@fullcalendar/timegrid": "^4.0.1",
现在，对于固定的事件数组，拖动可以正常工作。但是，当我尝试使用 eventSources 时，它会引发控制台错误
ERROR TypeError: Cannot read property 'emit' of undefined
at Calendar.options.<computed> (fullcalendar-angular.js:230)
编辑：使用 v 4.2 澄清 编辑：尝试降级
【问题讨论】：
-
您确定您使用的是fullCalendar 3.9吗？因为如果你是，你的大部分代码根本不应该工作。例如3.9 中的 eventDrop 函数具有完全不同的签名，这会使您的大部分 onEventDrop 代码失败：fullcalendar.io/docs/v3/eventDrop。您使用它的方式看起来更像是在 v4 或 v5 中完成的方式（例如fullcalendar.io/docs/v5/eventDrop）
-
嗯....然后我猜@fullcalendar/angular 正在安装自己的fullcalendar 版本。 package.json 的 @fullcalendar/angular 为 4.2，而 fullcalendar 为 3.9.0。我不维护完整的应用程序，所以我不确定为什么会这样。
-
你在使用fullCalendar提供的Angular组件吗？即fullcalendar.io/docs/v4/angular？如果是这样，那么是的，它会下载另一个版本的 fullCalendar 我敢肯定，因为它是一个依赖项。我自己不是 Angular/npm 用户，但我希望它依赖于特定版本或最低版本，并且在 fullCalendar v4 发布之前没有引入 fullCalendar Angular 组件，因此它必须至少需要那个版本。
-
我仍然对这种行为感到困惑。我已经使用 Fullcalendar js 没有问题，不知道我是否忘记了什么或什么。
-
我同意，这有点奇怪。我使用 vanilla fullCalendar (v4) 做了一个快速演示，但无法重现它。您是否收到任何控制台错误或任何问题？
标签： angular drag-and-drop fullcalendar