Event Calendar Resource Fixed Width or Scroll


How to give resources fixed width? or just allow scroll if i have many resources?

Thank you

Hello @Warren_Tiu :wave:

Can you share a bit more information about the use case/ context?
I’m not sure that I understand why would you like to set a fixed width for the resources.
Or what do you mean by ‘just allow scroll if i have many resources’.

@Warren_Tiu @Zsombor Hi!

Not sure if @Warren_Tiu resolved this issue somehow but I have a use case for horizontally scrolling when there are enough resources that they get too narrow.

For me, the exact behavior I’d like is already a feature when using multiple resources in a ‘week’ type for the scheduler view config.

For example, here’s my config (React) as needed to show 1 day with multiple resources:
const view: MbscEventcalendarView = {
schedule: {
// If I change type to ‘week’, I get the scrolling behavior I want
type: ‘day’,
allDay: false,
timeCellStep: 30,
timeLabelStep: 60,

Type: ‘week’ scrolls resources by default but ‘day’ forces all the resources to be visible no matter how many there are.

I use a custom renderResource, but this didn’t make a difference in behavior.

@tomprince @Warren_Tiu Hi!
The scroll applies for the type: "day" as well, but indeed there is a width set for columns. By overwriting the css one can widen the columns and the horizontal scroll should work instantly.
.mbsc-schedule-col-width { width: 2.5em; /* change the value here */ }
Best regards, Pityu

.mbsc-schedule-col-width { min-width: 200px;  }

I ended up adding a min-width. width seems to have no real effect since we’re in a flex context

Thanks for pointing me in the right direction @Istvan_Csiszer!