Slot placement in Scheduler Weekview

1 Answer 69 Views
Scheduler
Bernd
Top achievements
Rank 5
Bronze
Bronze
Iron
Bernd asked on 08 Feb 2022, 03:53 PM
I use the WeekView with the Scheduler component and I have set the slotDivisions property to 1. When I now add a new event for example at 08:20 it places the event exactly at the 08:00 slot. Is it possible to place it according to the time a little further down? Like for example in Outlook, if I add a new event, it is placed at the time when the event is starting (for example see attached screenshots).

1 Answer, 1 is accepted

Sort by
1
Filip
Telerik team
answered on 09 Feb 2022, 01:46 PM

Hello, Bernd,

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:

https://stackblitz.com/edit/react-bdkisb?file=app/main.tsx

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.

Regards, FilipProgress 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.

Bernd
Top achievements
Rank 5
Bronze
Bronze
Iron
commented on 09 Feb 2022, 02:21 PM

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?

Bernd
Top achievements
Rank 5
Bronze
Bronze
Iron
commented on 10 Feb 2022, 12:03 PM | edited

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?

Filip
Telerik team
commented on 11 Feb 2022, 12:52 PM

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

Bernd
Top achievements
Rank 5
Bronze
Bronze
Iron
commented on 11 Feb 2022, 02:48 PM | edited

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?

Filip
Telerik team
commented on 14 Feb 2022, 11:16 AM

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

Bernd
Top achievements
Rank 5
Bronze
Bronze
Iron
commented on 23 Feb 2022, 10:19 AM

Filip
Telerik team
commented on 23 Feb 2022, 02:18 PM

Hi Bernd,

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. 

Regards,
Philip 
Tags
Scheduler
Asked by
Bernd
Top achievements
Rank 5
Bronze
Bronze
Iron
Answers by
Filip
Telerik team
Share this question
or