Event Height for native Kendo Vue Scheduler

[Jasper]

Hi all,

I cannot find any way to increase the event height of the kendo native scheduler component for vue. when artificially changing it for the .k-event class the top values don't line up, how do I make this bigger? In the meantime I also want to make the width the same as the actual value and not be the correct width -20px (as in the picture)

The height should be like the box, and the width should increase so the whitespace where the arrow is pointing is not there. Can anyone help with this?

 

Discussion: I think its awful how Kendo keeps pushing the Native Vue component in favor of the JQuery one, but the vue native one is just so outrageous, I wrote about 800 lines just to fix stupid rendering bugs with this. When will this get better?

[Konstantin Dikov]

Hi Jasper,

In regards of your first question, you can refer to the following example in our documentation:

• https://www.telerik.com/kendo-vue-ui/components/scheduler/auto-item-height/

Here is the same approach applied to the timeline view with groups and resources:

• https://stackblitz.com/edit/lrub8n?file=src%2Fmain.vue

As for the second issue, we have logged item for this. I have just increased its priority so it can be handled in more timely manner:

• https://github.com/telerik/kendo-vue/issues/362

As for the Native components, since we provide a package for Vue, our main focus are the native components. However, you can still use the Kendo UI for jQuery components if your prefer. For any issues with the Kendo UI for Vue you can log them in our public repository.

 

Best Regards,
Konstantin Dikov
Progress Telerik

[Jasper]

Hi Dikov,

Thanks a lot for the reply! I will try this out on thursday and come back if there are any more problems! Another thanks for making the issue, is there any ETA on that? Since I kinda need it and its pretty crucial :D

Kind regards

[Jasper]

Hi again @Dikov ,

I already managed to test this out but I am having issues with the height of the groups (this was the main problem I am having), in your stackblitz, when duplicating an item and changing the id (so we have 2 events at the same time for the same user) the groups are not lining up.

[Konstantin Dikov]

Hi Jasper,

I was able to observe the issue when there are multiple events at the same time with the vertical group orientation. For that particular case you will have to defined explicit height for the slots and also, dynamically calculate the height of the items. Here is an example with such implementation, but I should mention that there will be a limit for the maximum number of events per slot (due to the min-height):

• https://stackblitz.com/edit/lrub8n-9txxnr?file=src%2Fdata.js,src%2Fmain.vue

[Jasper]

Hi @Dikov,

This does work in the JQuery implementation, so why would I need a workaround? All items should be a certain height as a requirement, so this is not wanted, I have somewhat fixed it with calculating the height for each group, but yea not clean code or easy really, would be awesome to see it fixed in the vue scheduler.

[Konstantin Dikov]

Hi Jasper,

I am glad to see that you have managed to find a solution for the problem.

As a side note, I will talk with the team to see if we can add this as a built-in feature in the Kendo UI for Vue Scheduler component as well.