Custom slotHeight for resourceTimelineWeek

[jammerbundb]

Hi,

I know that according to the docs, setting slotHeight is not supported for resourceTimelineWeek,
but is there any workaround to increase the standard slot height for this view?

Thank you.

[vkurko]

Hello,

Can you please show on a screenshot the height of which element you are asking about?

[jammerbundb]

Hey,

thank you for the quick reply (and your work in general 👍 )

I am mainly using the resourceTimeGridWeek view, which is populated with events of duration 45/60/90 minutes.
There is some information that needs to be displayed (name, address, phone number if available).

slotDuration is set to 00:15, slotHeight to 36.

The resourceTimelineWeek view might also be quite useful, but i'm struggeling with very narrow cell heights, since slotHeight does not work for this view.
For each of the yellow marked rows, i'd like to have a larger cell height, so that the event titles are all readable.

[vkurko]

In theory, you could increase the padding in this CSS rule

.ec-timeline .ec-sidebar .ec-resource span {
    padding-top: 8px;
    height: fit-content;
}

but I tested it and for some reason, it doesn't always work well. I'd try to fix it, but I'm currently working on a completely new layout that eliminates these issues. If you can, I recommend waiting for the new release in the next couple of weeks and taking advantage of the benefits it offers.

[jammerbundb]

I played around with it as well and it seems to work for my purposes now. Thank you.
Looking forward to the next update 🙃

[HD9990]

Hello Jam, I'm currently working on a similar project. Can you shed some lights here how did you manage this? specifically how did you manage to set the card height of each event?

Thanks

[jammerbundb]

Hi,

for my use case, i basically just added and adapted the idea from @vkurko above (#581 (comment)):

    <style>
    .ec-timeline .ec-sidebar .ec-resource span {
        padding-top: 100px;
        height: fit-content;
    }
    .ec-timeline .ec-event {
        height: 120px;
    }
    .ec-timeline .ec-event-title {
        white-space: normal;
    }
    </style>