1 Answer, 1 is accepted
It is possible to add styles to the custom slot and control its position by using the style prop or className props. I made a small example that showcases this approach:
Where I have created a custom slot that has a marginTop of 12px, enabling it to be placed further down when creating a new event at 8:20.
I hope this helps.
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.
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?
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:
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
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:
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?
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:
I hope this helps.
For anyone looking at this: I got this workaround:
And if anyone want to vote for it to make it a feature:
Or to make it a default behavior:
I am glad to hear that you have found a workaround and thank you for sharing it with the KendoReact community.
Thank you for submitting this feature request. Once we gather a significant amount of votes we will be plan the development accordingly.