Custom item heights

[shutchings]

Is your feature request related to a problem? Please describe.
I'm trying to use the custom item renderer to render some content under the item title. It seems like the height isn't something that can be overwritten since it's used in positioning the items.

Describe the solution you'd like
I'd like to be able to render items of variable height depending on what the item is. Perhaps I'm just not using the itemRenderer correctly?

[shutchings]

@Ilaiwi is having custom item heights not supported? Or just something I don't understand how to do.

[shutchings]

@Ilaiwi ping.

[Ilaiwi]

@shutchings sorry for missing this.
hmmm this is a tricky question. This feature is not implemented specifically but there is a workaround using itemRender. You can do that by overring the style you get from getItemProps in itemRendere. this might cause some edge cases I think when you have stackItems on for rows and have some items above each other but should not be a big deal.

https://codesandbox.io/s/timeline-demo-item-renderer-0n63w

[eeliinaa]

@Ilaiwi I have the same problem. In my case (in picture) I have 4 items visible. 2 green, 1 gray and 1 red. They all are made using item renderer and because gray and red items are only as "background" items I have this horrible big space above green items. I know it is because timeline thinks that group contains 4 items but i don't want it to think so :) Is there any way to make this space smaller? Please help!
Thank you

[Ilaiwi]

@eeliinaa this is related to the buffer we render on both sides of the calendar. This is for performance so when you scroll left and right it won't stater each time. Refer to this section in https://github.com/namespace-ee/react-calendar-timeline#behind-the-scenes
if you want to fix that only pass to the timeline the current selected range items

[eeliinaa]

@Ilaiwi The thing is that gray and red items are in the same time ranges as green items. Gray one is stretched 100% height and red one is placed in bottom and it has 6px height. The only problem I have is that timeline thinks that gray and red items both looks like green items and saves place (height) for them in row (group row) but i don't want that. I want timeline to save space only for two(green) items. Maybe there could be some property for item that says: "Do not include this item when calculate row (group) height". In conclusion I need "background" items that are not calculated in rows(groups) height.
Is that possible? This is very important
Thank you!!!

[Ilaiwi]

@eeliinaa please create a new issue with your question please I don't this is actually related and please provide an example with codesandbox
https://codesandbox.io/s/w6xvqzno4w

[shutchings]

@Ilaiwi Thanks for responding. What about the items being too large for the row? Any way around that? Ideally I'd like to render the title of the item and then some additional content below it. Maybe a list of dependencies which would be different heights for each item.

[iaua]

@Ilaiwi Thanks for responding. What about the items being too large for the row? Any way around that? Ideally I'd like to render the title of the item and then some additional content below it. Maybe a list of dependencies which would be different heights for each item.

I changed the lineHeight prop, This worked for me

[stahlmanDesign]

I wanted to take this further and change the top property too, but it is calculated from the top of the timeline, not the row. This would require calculating stacked items in the same row, plus an offset from top of timeline. Daunting. I think this is the same request as #792 and #636