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

這是一支工作筆。