React Scheduler > Centering event bar

Hi Andy,

You are probably using rowMinHeight to set the row height. If there are no overlapping events, it is possible to center the event by replacing it with rowMarginTop and rowMarginBottom.

Hi Dan,

I am actually using `minHeight` on `resources` array. That is because we might have different entity row might have different heights.

Currently, there is only 1 event per row, but in the future, there might be more events per row, which can lead to potential overlapping that requires event stacking.

Is using rowMarginTop and rowMarginBottom still the approach to go?

Hi Andy,

It works like this:

Each row is divided into “lines” which hold the events. If there are no overlaps, there will be just one line. If there are overlapping events, there will be as many lines as needed and trow height will be extended automatically.

Each event goes into a specific line, by priority. It starts with the top line.

You can specify which line to use - see the Event Placement Strategies for all the options. Plus you can reverse the line order using rowReverseLines.

But you can’t change the position of the lines, except by specifying the top margin using rowMarginTop. That shifts the position of all lines down. The rowMarginBottom and rowMinHeight props (or resources[].minHeight) are just different ways to add free space at the bottom.

If you want to specify different top margin for each row, you can use resources[].marginTop.

Thank you, Dan.

I will consider the suggestion and see what our team can do.