如何将 fullcalendar 重复事件的结束时间延长到第二天？

Question

如何显示结束时间超过当天的重复事件？

这是一个示例数据：

const data = {
  id: 1,
  title: "ABC",
  startRecur: "2020-06-11T16:00:00.000Z",
  startTime: "23:00:00",
  endTime: "03:00:00",
  daysOfWeek: ["5"]
};

calendar.addEventSource({
  events: [data]
});

基本上开始时间是11:00 PM ，应该在第二天3:00 AM结束。 我如何让fullcalendar知道它应该在第二天结束？ 请注意，这是一个反复发生的事件。

这是它在月视图中的样子：

并在周视图中（未呈现事件，因为它认为结束时间是同一天的凌晨 3 点）：

这是问题所在。

我希望它看起来像这样（谷歌日历）

更新：使用rrule 插件让它工作

Answer 1

所以在此之前，我是使用fullcalendar's内置重复事件来完成的。

const data = {
  id: 1,
  title: "ABC",
  startRecur: "2020-06-11T16:00:00.000Z",
  startTime: "23:00:00",
  // endTime is 03:00:00 because I expect it to end the next day at 3 AM
  endTime: "03:00:00",
  daysOfWeek: ["5"]
};

calendar.addEventSource({
  events: [data]
});

这样做的问题是，当您的endTime小于给定的startTime时， fullcalendar将无法理解它并且不会在日历中呈现事件。

为了解决这个问题，有一个名为rrule 插件的插件，它允许在几天内重复发生事件。 感谢阿迪森。

代替上述添加重复事件的方式，我们可以使用它来代替：

const data = {
  id: 1,
  title: "my recurring event",
  rrule: {
    freq: "weekly",
    interval: 5,
    byweekday: ["fr"],
    // In the above code,
    // start date and start time are separate.
    // In the rrule plugin, dtstart
    // should contain both start date and time.
    dtstart: "2020-06-01T23:00:00"
  },

  // Duration is how long the event will run,
  // not exactly what the time it should end.
  // in our case, to end the event the next day 3 AM.
  // We should add 4 hours.
  duration: "04:00"
};

calendar.addEventSource({
  events: [data]
});

这是一支工作笔。