I have a Scheduler component on my page that uses a custom SchedulerEditItem to display the events. Every time I click on any Scheduler item that is not a allDay item, the allDay items get resized the height becomes 2 px bigger. In the screenshot you can see the allDay-Rows that are filled are bigger than the others. That's because I clicked multiple times on any scheduler items.
In the Scheduler component I have set the editable options like so:
editable={{
add: true,
remove: false,
drag: false,
resize: false,
select: false,
edit: true,
}}
Previously I also had the "select" option set to true and that caused the allDay items to resize even when I clicked anywhere in the scheduler, so also on the empty slots the same behavior was showing. It also doesn't help if I either set the slot height or the height in the styling of the SchedulerEditItems that have the isAllDay property set to true. Unfortunately my app is much to big to copy it somewhere to be able to troubleshoot the behavior. So I'll just put here the configuration of the Scheduler and the SchedulerEditItem to start the discussion.
<Scheduler
data={calendarData}
defaultDate={displayDate}
height={400}
header={(props) => <React.Fragment />}
footer={(props) => <React.Fragment />}
timezone="CET"
slot={CustomSlot}
onDataChange={handleDataChange}
editable={{
add: true,
remove: false,
drag: false,
resize: false,
select: false,
edit: true,
}}
editItem={CalendarProfileItem}
form={
isColumnEmpty
? NewProfileForm
: EditProfileForm
}
>
<WeekView
title="Full Week"
workWeekStart={Day.Monday}
workWeekEnd={Day.Friday}
showWorkHours={false}
workDayStart="06:00"
workDayEnd="19:00"
dateHeaderCell={CustomDateHeaderCell}
slotDivisions={1}
/>
</Scheduler>
<SchedulerEditItem
{...props}
ref={item}
title={title}
description={props.dataItem.description}
onDoubleClick={onSchedulerItemDoubleClick}
startTimezone={'CET'}
endTimezone={'CET'}
showOccurrenceDialog={false}
style={{
...props.style,
backgroundColor:
props.dataItem.color || GLOBALS.STANDARD_JOB_COLOR,
color: getContrastYIQ(
props.dataItem.color || GLOBALS.STANDARD_JOB_COLOR
),
height: props.dataItem.isAllDay ? '35px' : undefined,
}}
vertical={true}
>
</SchedulerEditItem>
