Мерцает при перетаскивании события на весь день во временную сетку в React-Big-Calendar ⇐ Javascript

[Anonymous]

Я использую react-big-calendar (v1.19.4) с надстройкой перетаскивания.
Когда я создаю событие на весь день (отображаемое в строке всего дня), а затем перетаскиваю его в область сетки времени, событие начинает непрерывно мерцать во время операции перетаскивания.
Ожидаемое поведение
Событие должно плавно перемещаться в сетку времени без мерцания (аналогично поведению Календаря Google).
Фактическое поведение
При перетаскивании события на весь день в сетку времени компонент неоднократно перерисовывается и визуально мерцает.
Среда

• react: v18.3.1
• react-big-calendar: v1.19.4
• date-fns: v3.6.0

Ниже приведена соответствующая реализация:
const handleDragStart = useCallback(({ event }: { event: CalendarEvent }) => {
draggedEventRef.current = event.id;
originalEventRef.current = { ...event };
}, []);

const handleEventDrop = useCallback(
({ event, start, end, isAllDay }: EventInteractionArgs) => {
const startDate = new Date(start);
const endDate = new Date(end);

const wasAllDay = event.allDay === true;
const hasSpecificTime =
startDate.getHours() !== 0 || startDate.getMinutes() !== 0;

if (wasAllDay && hasSpecificTime) {
draggedEventRef.current = null;
originalEventRef.current = null;
return;
}

let newIsAllDay: boolean;

if (wasAllDay) {
newIsAllDay = true;
} else if (hasSpecificTime) {
newIsAllDay = false;
} else if (isAllDay !== undefined) {
newIsAllDay = isAllDay;
} else {
const isStartMidnight =
startDate.getHours() === 0 && startDate.getMinutes() === 0;
const isEndMidnight =
endDate.getHours() === 0 && endDate.getMinutes() === 0;

newIsAllDay =
isStartMidnight &&
isEndMidnight &&
(endDate.getTime() - startDate.getTime()) % 86400000 === 0;
}

setEvents((prevEvents) =>
prevEvents.map((item) =>
item.id === event.id
? {
...item,
start: startDate,
end: endDate,
allDay: newIsAllDay,
}
: item
)
);

draggedEventRef.current = null;
originalEventRef.current = null;
},
[]
);

const handleEventResize = useCallback(
({ event, start, end }: EventInteractionArgs) => {
if (event.allDay) return;

setEvents((prevEvents) =>
prevEvents.map((item) =>
item.id === event.id
? { ...item, start: start as Date, end: end as Date }
: item
)
);
},
[]
);

return (
!event.allDay}
draggableAccessor={(event: CalendarEvent) => event.allDay !== true}
defaultView="week"
views={["month", "week", "day"]}
components={{ event: CustomEvent }}
messages={{
next: t('calendar.next'),
previous: t('calendar.previous'),
today: t('calendar.today'),
month: t('calendar.month'),
week: t('calendar.week'),
day: t('calendar.day'),
agenda: t('calendar.agenda'),
date: t('calendar.date'),
time: t('calendar.time'),
event: t('calendar.event'),
noEventsInRange: t('calendar.noEventsInRange'),
}}
style={{ height: '80vh' }}
/>
);


Подробнее здесь: https://stackoverflow.com/questions/798 ... g-calendar