时间戳

首页 > 解决方案 > 使用 FullCalendar，如何在 eventReceive 时向 EventObject 添加信息？

javascript - 使用 FullCalendar，如何在 eventReceive 时向 EventObject 添加信息？

问题描述

我已经开始发现和使用 FullCalendar，但我坚持下去。

我想要做的是月视图中的ResourceTimeline ，带有外部事件拖动（左面板）。

稍后的主题将是当您删除事件时有一个模式，以便选择您希望该事件是从上午 8 点到下午 12 点，还是从下午 12 点到下午 6 点。

所以首先，我想做一个没有模式的简单 eventReceive，看看我是否可以在事件被删除时更新它。

但似乎我不能，我做错了什么？

据我了解，看起来当您在月视图中删除事件时，发送到 eventReceive 的参数中的事件被修改。

eventReceive(info) {
  info.event.start = moment(info.event.start).add(8, 'hours').format('YYYY-MM-DD hh:mm:ss');
  // var c = confirm('OK = morning, Cancel = aprem');
  // if (c) {
  //   console.log("morning !")
  // } else {
  //   console.log("afternoon !")
  // }
}

事件非常基本，因为我想在将它们放入日历时完成它们

new Draggable(listofEvents, {
  itemSelector: '.draggable',
  eventData(event) {
    return {
      title: event.innerText,
      activite: event.dataset.activite,
      allDayDefault: false,
    }
  },
})

我什至试图强制 allDayDefault 为 false，但它并没有改变任何事情......

这是项目当前状态的代码笔：https ://codepen.io/nurovek/pen/zYYWGyX?editors=1000

抱歉，如果我的帖子缺少信息，我不习惯在 SO 上提问。如果缺少，当然，如果您问我，我会尝试更明确！

标签： javascriptfullcalendarfullcalendar-schedulerfullcalendar-4

解决方案

根据文档，事件的公共属性（例如“开始”、“结束”、“标题”等）是只读的。因此，要在事件创建后更改属性，您必须运行“设置”方法之一。

因此，如果您使用以下setDates方法，您的想法将会奏效：

eventReceive(info) {
  info.event.setDates(moment(info.event.start).add(8, 'hours').toDate(), info.event.end, { "allDay": false } )
  console.log(info.event);
}

演示：https ://codepen.io/ADyson82/pen/dyymawy?editors=1000

PS 你可能会注意到我还对你的 CodePen 做了一些其他的小改动，主要是为了更正所有指向 CSS 和 JS 文件的链接，因为它会产生各种控制台错误。这些错误是因为链接错误或只是引用了不存在的东西，并且由于某种原因，您还使用了来自两个不同版本的 fullCalendar（4.3.0 和 4.3.1）的文件，如果您愿意，这绝不是一个好主意以确保完全兼容。

推荐阅读