javascript - 如何将全日历重复事件的结束时间延长到第二天？

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 知道它应该在第二天结束？请注意，这是一个重复发生的事件。

这是月 View 中的样子:

在周 View 中(事件未呈现，因为它认为结束时间是同一天的凌晨 3 点):

Here's a pen of the problem.

我希望它看起来像这样(谷歌日历)

更新:使用rrule plugin让它工作

Answer 1

所以之前，我使用 fullcalendar 内置的重复事件来完成此操作。

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 plugin 的插件。允许跨天重复发生事件。感谢ADyson .

我们可以使用以下方法来代替上述添加重复事件的方法:

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]
});

这是一个工作 pen .