时间戳

首页 > 解决方案 > Fullcalendar RRule 重复事件 - 在 timeGridWeek 中呈现错误的结束日期

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

问题描述

实际数据中的两个事件Event A和Event 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

标签： javascriptfullcalendarfullcalendar-5rrule

解决方案

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

您需要duration为事件指定一个值 - 如RRule 插件文档中所述，否则 fullCalendar 将为事件提供 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

推荐阅读