SchedulerProportionalViewItem has min height when event is less than 2 minutes

1 Answer 58 Views
Scheduler
Bernd
Top achievements
Rank 5
Bronze
Bronze
Bronze
Bernd asked on 22 Jul 2022, 02:59 PM

Hi.

If an event using the SchedulerProportionalViewItem has a duration of less than 2 minutes, the event get's a height of 45px and doesn't display as long as it should. I have made an example showing events of 1 second, 1 minute and 2 minutes length and removed the text from it so that the event can show a length as appropriate:

https://stackblitz.com/edit/react-g64ffz?file=index.js

I gave the k-event a minHeight of 5px in the css so it doesn't appear too small for very short events. Is there a way to get around this if events are less than 2 minutes?

Also, in my example I tried to make the events editable but when I doubleclick on them, nothing happens. Not sure what the issue is.

Thanks!

Greetings,

Bernd

1 Answer, 1 is accepted

Sort by
1
Accepted
Konstantin Dikov
Telerik team
answered on 26 Jul 2022, 01:51 PM

Hi Bernd,

Regarding the height of the events, since the min-height is coming from the theme, overriding the k-event would be the only option for rendering events with less than 25px height.

As for the editing, the issue is that the custom item is defined as a inline functional component and not as a separate one and nesting the definition in such manner forces React to re-mount the main component, which is what prevents the editing. Here is the modified version of your example that resolves the issue:

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Bernd
Top achievements
Rank 5
Bronze
Bronze
Bronze
commented on 26 Jul 2022, 02:22 PM

Hi Konstantin.

Thanks for your answer and indeed the editing issue is solved now. Thank you very much.

As for the height of the events, I tried already to overwrite .k-event with a min-height of 5px but that didn't work. Also I'm not sure if that is the answer because it only shows events longer than they are if their duration is less then 2 minutes as you can see in the example.

Shouldn't the css in the index.html file do the job? See at the bottom here:
https://stackblitz.com/edit/react-g64ffz-gq4cet?file=index.html

Greetings,

Bernd

Konstantin Dikov
Telerik team
commented on 28 Jul 2022, 11:04 AM

Hi Bernd,

The internal logic in the SchedulerProportionalViewItem has internal calculations for the minimum event height based on the slot division and slot duration and if it is less than the minimum possible, it defaults to "25", which is equal to the min-height value. Note that if the slot is 30px for example and the slotDuration is 60 minutes, having an event that is less than 2 minutes will make it impossible to render proportionally, because it will be 0.5px.

I could talk with the developers team to see if we can reduce the min height to 1px for example and default to 1 instead of 25. Currently, the only workaround that I could suggest is to change the duration of the events to be at least 2 minutes with that configuration.

As a side note, could you please elaborate what is the use case of having events with 1 second or 1 minute duration?

Bernd
Top achievements
Rank 5
Bronze
Bronze
Bronze
commented on 29 Jul 2022, 06:18 AM

Hi.

Hm, ok, then I'll have to check how we can handle this.

Our use case is that we use the Scheduler to visualize events for house automation. Usually you have a start and an end date for an event for example for switching the light on at 8:00 and off at 20:00 or so. But sometimes you have just to trigger something at a specific time like triggering a check on a module. As there is no possibility in the Scheduler to have an event with just a start date, we solve this by setting the start date equally to the end date and handle this in the backend. This is of course an issue because the Scheduler doesn't show any events if the start is the same as the end date so I make sure that the event is at least one second long. That's not a problem because the tooltip in the Scheduler doesn't show seconds. But if I have to make the event 2 minutes, this will probably show in the tooltip as the Scheduler title shows the hours and minutes.

I'll check if I can work around this.

Greetings,

Bernd

Konstantin Dikov
Telerik team
commented on 29 Jul 2022, 01:45 PM

After consulting with the developers team we have decided to log an item for improvement of the SchedulerProportionalItem and allow it to default to "1px" instead of "25px" if the duration is too small:

Bernd
Top achievements
Rank 5
Bronze
Bronze
Bronze
commented on 29 Jul 2022, 02:33 PM

Thank you very much! I implemented a workaround for now setting all events that are shorter than 2 minutes to 2 minutes and still displaying the correct length but when the issue is resolved, I will definately roll this back.

Thanks again!

 

Tags
Scheduler
Asked by
Bernd
Top achievements
Rank 5
Bronze
Bronze
Bronze
Answers by
Konstantin Dikov
Telerik team
Share this question
or