Fullcalendar RRule 重复事件 - 在 timeGridWeek 中呈现错误的结束日期

Question

实际数据中的事件A和事件B两个事件在时间上没有重叠：

Event A:- start:2021-03-01T01:20:00.000Z, end: 2021-03-01T02:00:00.000Z

Event B:- start:2021-03-01T02:00:00.000Z, end: 2021-03-01T02:20:00.000Z

但这就是它们在日历上的显示方式：

事件定义：

events: [
  {
    id: 762,
    title: "Event A",
    start: "2021-03-01T01:20:00.000Z",
    end: "2021-03-01T02:00:00.000Z",
    allDay: false,
    eventColor: "#36BFD7",
    color: "#F05974",
    labelName: "TIK",
    rrule: {
      freq: "weekly",
      interval: 1,
      dtstart: "2021-03-01T01:20:00.000Z",
      until: "2021-04-08",
      byweekday: ["Mo"],
    },
  },
  {
    id: 763,
    title: "Event B",
    start: "2021-03-01T02:00:00.000Z",
    end: "2021-03-01T02:20:00.000Z",
    allDay: false,
    eventColor: "#36BFD7",
    color: "#9E69AF",
    labelName: "PPKN",
    rrule: {
      freq: "weekly",
      interval: 1,
      dtstart: "2021-03-01T02:00:00.000Z",
      until: "2021-04-08",
      byweekday: ["Mo"],
    },
  },
],

演示：https://codepen.io/abdul007malik/pen/rNjxRwP

Answer 1

当您在 fullCalendar 事件中使用 rrule 时，事件的正常 start 和 end 属性将被忽略（因为它们不再有意义 -事件不再有单一的开始或结束时间，而是有重复的时间模式。

您需要为事件指定一个 duration 值 - 如 RRule plugin documentation, otherwise fullCalendar will give the event the default duration 中所述的 1 小时。您可能已经注意到您的活动 B 也太长了？那是由于同样的问题。

这些定义将产生所需的输出：

events: [
  {
    id: 762,
    title: "Event A",
    allDay: false,
    eventColor: "#36BFD7",
    color: "#F05974",
    labelName: "TIK",
    duration: "00:40",
    rrule: {
      freq: "weekly",
      interval: 1,
      dtstart: "2021-03-01T01:20:00.000Z",
      until: "2021-04-08",
      byweekday: ["Mo"],
    },
  },
  {
    id: 763,
    title: "Event B",
    allDay: false,
    eventColor: "#36BFD7",
    color: "#9E69AF",
    labelName: "PPKN",
    duration: "00:20",
    rrule: {
      freq: "weekly",
      interval: 1,
      dtstart: "2021-03-01T02:00:00.000Z",
      until: "2021-04-08",
      byweekday: ["Mo"],
    },
  },
],

演示：https://codepen.io/ADyson82/pen/Bapjgdd

Fullcalendar RRule 重复事件 - 在 timeGridWeek 中呈现错误的结束日期

Fullcalendar RRule recurring events - renders wrong end date in timeGridWeek

javascript

fullcalendar

fullcalendar-5

rrule