Slot placement in Scheduler Weekview

Well, not exactly. :-) This pushes all events down 12px but it should be like that, that the events themselves should be pushed down depending on their individual start time and also the length of the event in the calendar should be influcenced by the end time of the event. And if I have 2 events starting in the same slot, for example one at 8:10 and one at 8:20 on the same day, the one starting at 8:20 should be pushed down a little more than the one at 8:10.

Ok, but I guess this means that there is no out-of-the-box setting that enables this so I guess I have to calculate the position of the events myself... Hm. That will be an adventure... Any hints on how this could be done?

Ok, I think I got the calculation portion of it but the SchedulerEditItem component doesn't let me change the height using the style parameter. I have attached a couple of screenshots where you can see how I tried to change the styling of the event item. Weirdly enough this works perfectly if the isAllDay setting is set to true but it does not work for all the others. In my code (screenshot setting-height.png) you can see that I'd like to set the height of the item to 45px if it is a "isAllDay" item and to a different calculated value if not (eventMargins.height). The eventMargins.height is correctly filled with "41.8px" as you can see in the screenshot "debugging.png" but in the browser the item still gets the height of 179px (see styles-in-browser.png) and I don't know why. Do you have an explanation why this is the case and how I can manipulate this?

Another question: If I calculate the vertical positioning of the items it may happen that they overlap. In the out-of-the-box Scheduler component of course the items will be placed next to each other instead of overlapping if they have overlapping times. Is there any way how I could achieve the same behavior?

Hi, Bernd,

I consulted with my colleagues, the height stays the same because the items are positioned and stretched according to the slots, if the height changes the visualization will not be accurate because it will no longer match the slots. In case you really want to adjust the height it is possible to target the .k-event class and set its height via CSS like shown here:

https://stackblitz.com/edit/react-1kbmz7?file=index.html

In regard to your second question, if the items overlap, a possible solution would be to again use the style prop and adjust their position. In case you are still experiencing any issues with the implementation, please provide a runnable example so that we can inspect further and help.

I hope this helps

Regards,FilipProgress Telerik

Hi,

Thanks for the example I added a bit of my code so you can see what I want to achieve. I changed the times of your scheduler event and added the script to calculate the top margin and the height of the event and what does not work is setting the height. I can't set the height in the css/html file because this has to be dynamic as of course every event is different.

In case the example does not work as above, here is the code again:
https://stackblitz.com/edit/react-1kbmz7-gugror?file=app/main.tsx

I marked what does not work with a comment. I don't know if my calculations make sense because I couldn't really test it but it also does not work if I put for example a string like '500px' into eventMargins.height...

Regarding the overlapping, well, I guess then I have to also calculate that myself. Not sure how to achieve that but I'll see.

One more question: I think the timely exact positioning could be a feature that would be worth implementing into the scheduler component. How do I submit a request for this?

Hello, Bernd,

Thank you for the provided example. I reviewed the example and it seems that the height of the item will not be changed because they are positioned and stretched according to the slots, if the height changes the visualization will not be accurate because it will no longer match the slots, the component will not allow for that to happen. 

Feature requests can be submitted in our feedback portal at the link below:

https://feedback.telerik.com/kendo-react-ui

I hope this helps.

Regards,Filip

For anyone looking at this: I got this workaround:

https://stackblitz.com/edit/react-yiyhmk-pbf7a3?file=app%2Fmain.jsx

And if anyone want to vote for it to make it a feature:

https://feedback.telerik.com/kendo-react-ui/1553762-allow-exact-event-placement-according-to-start-and-end-time-in-scheduler-instead-of-only-placing-events-at-beginning-and-end-of-slots

Or to make it a default behavior:

https://github.com/telerik/kendo-react/issues/680