如何防止资源时间线中的事件重叠？

Question

我有一个每周间隔的活动列表（例如2022年5月6日至12日、2022年5月13日至19日等）。当时段持续时间也是每周且时段间隔未对齐时，日历会以“锯齿形”模式显示事件：

fullcalendar api 中是否有任何设置可以防止这种情况发生并“向下舍入”事件以适合插槽，如下所示：

我不想逐一处理事件，因为事件持续时间可以是每周、每两周、每月，并且时段持续时间也可能有所不同。这将使处理事件和时隙持续时间的不同排列变得困难。

我尝试将

eventOverlap

和

slotEventOverlap

设置为 false，但“之字形”模式仍然存在。

这是最小的可重现示例：

const MyCalendar = () => {
  const start = new Date(2022, 4, 6);
  const end = new Date(2022, 4, 12);

  const resources = [{ id: "1", title: "random weekly" }];
  const events = Array(8)
    .fill()
    .map((_, index) => ({
      id: index,
      title: "random weekly",
      resourceId: "1",
      allDay: true,
      start: moment(start)
        .add(7 * index, "days")
        .toDate(),
      end: moment(end)
        .add(7 * index, "days")
        .toDate(),
      overlap: false,
    }));

  return (
    <FullCalendar
      plugins={[resourceTimelinePlugin]}
      resources={resources}
      events={events}
      slotEventOverlap={false}
      eventOverlap={false}
      initialView="quarter"
      views={{
        quarter: {
          type: "resourceTimeline",
          slotDuration: { weeks: 1 },
          visibleRange: { start: new Date(2022, 3, 1), end: new Date(2022, 6, 1) },
        },
      }}
    />
  );
};

Answer 1

您可以在后台解决问题。这是一个使用 Nodejs 和 momentjs 库的示例：

const moment = require('moment');


function checkEventOverlap(allEvents, data) {
    for (const event of allEvents) {
        const dataStart = moment(data.start).format("YYYY-MM-DD HH:mm:ss");
        const dataEnd = moment(data.end).format("YYYY-MM-DD HH:mm:ss");
        const eStart = moment(event.start).format("YYYY-MM-DD HH:mm:ss");
        const eEnd = moment(event.end).format("YYYY-MM-DD HH:mm:ss");

        if (
            moment(dataStart).isBetween(eStart, eEnd) ||
            moment(dataEnd).isBetween(eStart, eEnd) ||
            moment(eStart).isBetween(dataStart, dataEnd) ||
            moment(eEnd).isBetween(dataStart, dataEnd)
        ) {
            return { error: "You can't create more than 2 events in one timeline" };
        }
    }

    return "You can add your event";
}
    const data = { //your new event
        start: "01.01.2024",
        end: "02.01.2024"
    }

    const dataTwo = { //your new event
        start: "01.01.2024",
        end: "07.01.2024"
    }
    const allEvents = [
        {
            start: "05.01.2024",
            end: "07.01.2024"
        },
        {
            start: "02.01.2024",
            end: "03.01.2024"
        },
        {
            start: "03.01.2024",
            end: "04.01.2024"
        }
    ]

    console.log(checkEventOverlap(allEvents, data))
// response is "You can add your event"

    console.log(checkEventOverlap(allEvents, dataTwo))
// response is "{ error: "You can't create more than 2 events in one timeline" }"