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>
1 Answer, 1 is accepted
Hello,
Thank you for the example and the extra details.
There were a couple of points we had to change to address that issue:
1) We only render the custom item when it is not all day as the allDay item do not have proportional positioning.
2) We also use separate items for the editing and position logic. We separate the items based on that. The different options can be seen here:
https://www.telerik.com/kendo-react-ui/components/scheduler/customization/items/
SchedulerItem - Responsible for the visual aspect of the item.
SchedulerViewItem - Responsible for side-effects like positioning.
SchedulerEditItem - Responsible for the data-editing functionality.
We updated the example to show the changes:
https://stackblitz.com/edit/react-jktdxu-7bagaa?file=app%2FProportionalViewItem.tsx
Regards,
Stefan
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 5
Bronze
Bronze
Bronze
Hi.
I hope you know how awesome you guys are. :-) You saved my day.
THANK YOU VERY MUCH!!
Greetings,
Bernd
Hello, Bernd,
Thank you very much for the kind words, we are happy we were able to help.
Rank 5
Bronze
Bronze
Bronze
Hi again.
I'm re-opening this thread because there is an issue with the ending of the Scheduler items. The start of the events is always showing correctly but the ending is not. You can view the issue in the example you shared, for example look at the events for Sat, 26, "UPS maintenance" and "Dine with Mathew" or also the "Dance Practice" on Wednesday.
https://stackblitz.com/edit/react-jktdxu-7bagaa?file=app%2FProportionalViewItem.tsx
Thanks!
Greetings,
Bernd
Thank you for the example.
After more testing, we found that the issues occur because of the use of requestAnimationFrame. The time when that logic is executed is overwritten by the resizing of the Splitter. That creates the wrong positioning of the event. We can resolve that by using setTimeout instead to ensure that that logic is executed last:
https://stackblitz.com/edit/react-jktdxu-z8wspm?file=app%2FProportionalViewItem.tsx
Rank 5
Bronze
Bronze
Bronze
That works perfectly! I never would have guessed that...
Thank you very much!
Rank 5
Bronze
Bronze
Bronze
Well, I was too fast. I actually had to add a milliseconds value to the setTimeout to make it work. I guess as I have some other things going on in the Splitter frames that also take some time, it didn't help without the timing. So I added a 100 to the setTimeout function and now it works.
Just thought I'd drop this here if somebody else wants to use this... I have also updated the demo version on Stackblitz:
https://stackblitz.com/edit/react-jktdxu-g7vsrd?file=app%2FProportionalViewItem.tsx
Oh, and by the way... this completely falls apart, when you resize the screen. After resizing, the events don't look correct at all and you have to reload to set the events to the correct time again. So I guess I need a solution for that too...
Hi, Bernd,
I tried to reproduce the mentioned behavior by resizing the screen to no avail. In order to assist further can you provide more information on the steps on how to reproduce it? I tested the example on Chrome.
Regards,
Filip
Rank 5
Bronze
Bronze
Bronze
Hi Filip.
I have to apologize. You're right, there is nothing to complain about and it works as expected. Don't know what I saw there...
Sorry again.
Greetings,
Bernd
Hello,
Thank you for the details.
I made an example using the provided code. After I click on the elements there is indeed an issue. Still, it may be different than the one you are describing:
https://stackblitz.com/edit/react-jktdxu?file=app/main.jsx
Could you please take a look at the example and advise if this is the same issue. If it is not, could you please update the example to showcase the issue you are observing and I will be happy to take a look at it.
Hi.
Ok, thanks for the example. Your behavior is similar but different. I have made an attempt to add as much code as needed to basically show the behavior I experience. I feared that I would have to upload my whole application but I didn't have to. What you'll see looks a little strange as there is some code missing but it is enough to show the behavior. Every time you will click on any of the events in the Friday column, the event on Saturday will grow by a couple of pixels:
https://stackblitz.com/edit/react-jktdxu-fsvgc1
I hope this is enough so you can check what is happening. Let me know if you need more information. By the way if you load it for the first time you might have to hit the reload button to sort the data... And also: Please note that I make use of this example code to position my calendar elements:
https://stackblitz.com/edit/react-yiyhmk-pbf7a3?file=app%2Fmain.jsx
So you can see how the application appears for me, I have added two screenshots that show how it looks before and after clicking on items. As you can see, after clicking, also the positioning of the non-all-day-items gets messed up and they are put to the full hour instead of staying where they should be.
Thanks!