dynamically change the height of time slot

[mikeyyyzhao]

Do you want to request a feature or report a bug?

Feature

What's the current behavior?

Currently, in order to change the height of timeslot, you have to change it in the css through .rbc-timeslot-group. However, if you're trying to dynamically change the height of the slot, say to let users see more hours of the day or less hours of the day, it's not possible. I've looked into timeSlotWrapper in components but that seems to only change the height of the lines within the timeslot and not the entire timeslot itself.

What's the expected behavior?

We can dynamically set the height of timeslot (similar to how you can set it in rbc-timeslot-group) either through giving us a class name selector or something else.

[emilienh]

Trying to do this as well, but no luck.

[emilienh]

Opened a PR to address this: #1510

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[emilienh]

Please look into the PR, it's an easy fix and it's extremely useful

[schester44]

You can also accomplish changing the height of time slot groups by adding a CSS class to the parent element of the <Calendar />

<div className={`calendar-zoom-${someDynamicZoomLevel}`}>
  <Calendar />
</div>

then in your CSS:

.calendar-zoom-<level> .rbc-timeslot-group {
   
}

at least, thats how i've accomplished it in the past. An all JS solution may be cleaner though, I will check it out. thanks for the PR!