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

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 addEvent(allEvents, data){

    const sameEvent = allEvents.some(e => {

        const dataStart = moment(moment(data.start).format("YYYY-MM-DD HH:mm:ss"), 'YYYY-MM-DD HH:mm:ss')
        const dataEnd = moment(moment(data.end).format("YYYY-MM-DD HH:mm:ss"), 'YYYY-MM-DD HH:mm:ss')
        const eStart = moment(moment(e.start).format("YYYY-MM-DD HH:mm:ss"), 'YYYY-MM-DD HH:mm:ss')
        const eEnd = moment(moment(e.end).format("YYYY-MM-DD HH:mm:ss"), 'YYYY-MM-DD HH:mm:ss')

        // console.log(dataStart.isBetween(eStart, eEnd))
        // console.log(dataEnd.isBetween(eStart, eEnd))


        if(dataStart.isBetween(eStart, eEnd) || dataEnd.isBetween(eStart, eEnd) || eStart.isBetween(dataStart, dataEnd) || eEnd.isBetween(dataStart, dataEnd)){

            return {error: "You can't create more than 2 events in one timeline"}

        }
        else if(moment(dataStart).isSame(eStart) || moment(dataEnd).isSame(eEnd)){

            return {error: "You can't create more than 2 events in one timeline"}

        }
    })

    if(sameEvent){
        return {error: "You can't create more than 2 events in one timeline"}
    }
    else{
        //add your event here
        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(addEvent(allEvents, data)) 
// response is "You can add your event"

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