Slot height in resourceTimeline

[Sandbird]

I’d like to reopen the following issue: (https://github.com/vkurko/calendar/issues/378) by providing an example to demonstrate the problem. Codepen: https://codepen.io/sandbird/pen/YPKVaWM

As shown in the image below, when additional details are added to the resources on the left (more rows basically), the events no longer align properly with their corresponding rows.

I am also experiencing the opposite bug when I just show single row events. As shown in this example below. I created many resources, and they all show up perfectly well, but that single event gets an extra 2px height causing misalignment, not sure why.

I am guessing a simple solution would be to assign one CSS class to the categories of the resources (with undefined IDs) and another to their children? And maybe then the events can follow along somehow?

[Sandbird]

Ok, found a simple solution to the problem. We can have a different fixed height for both the Categories, and the children in one go. Since the Categories don't have a resource.id value (id is undefined), we can separate the 2 resources like so:

In packages\resource-timeline\src\Sidebar.svelte, instead of 34, put: (resource.id == 'undefined' ? 34 : 74)

Same goes for packages\resource-timeline\src\Days.svelte

This way, we can control the height of the resource/event rows without breaking the calendar. The rows that are Categories will have one height, and the rows with children will have another.

It would be nice to have those 2 values in the Options though.

[Sandbird]

As a bonus, you can use the same method in the class attribute of both .svelte files, to apply a custom CSS class. This allows you to add a line to separate the categories, improving visual clarity, especially when dealing with a large number of categories.

[vkurko]

Unfortunately, the problem here is different. It was assumed that the height of the row with events can be greater than the height of the row with the resource name, but not vice versa. Therefore, the height of the row with the resource name is adjusted to the content inside the events, but the height of the row with events is not adjusted to the height of the content in the resource name.

Thank you for helping me understand what the problem is. I will try to provide a solution in future versions of the library.

[Sandbird]

Glad to be of assistance to this great library.

[vkurko]

This should be fixed in v4.5.2. Please check.

Thanks to @rovshena for his contribution to fixing the problem.