Customize the width of scheduler columns using the .mbsc-schedule-col-width CSS class. This allows you to define fixed or dynamic column widths to fit your layout needs.
When using resources, the defined width is applied to resource columns. If no resources are present, it applies to day columns instead.
Interested in individually adjusting resource widths? Discover how →
Demo
Set the column width:
Width applies to resources or days when off:
css.mbsc-schedule-col-width {
width: 50px;
}

JSHTMLCSS
var myResources = [
{ id: 1, name: 'Bart', color: '#328E39' },
{ id: 2, name: 'Jake', color: '#00AABB' },
{ id: 3, name: 'Carl', color: '#EA72C0' },
{ id: 4, name: 'Dana', color: '#FF5733' },
{ id: 5, name: 'Evan', color: '#3366FF' },
{ id: 6, name: 'Faye', color: '#FFD700' },
];
var myResEvents = [
{ start: '2026-11-01T07:00', end: '2026-11-01T09:00', title: 'Sync', resource: 1 },
{ start: '2026-11-02T08:00', end: '2026-11-02T10:00', title: 'Kickoff', resource: 1 },
{ start: '2026-11-03T09:00', end: '2026-11-03T12:00', title: 'Planning', resource: 1 },
{ start: '2026-11-04T09:00', end: '2026-11-04T12:00', title: 'Meeting', resource: 1 },
{ start: '2026-11-05T09:00', end: '2026-11-05T12:00', title: 'Review', resource: 1 },
{ start: '2026-11-06T08:00', end: '2026-11-06T10:00', title: 'Kickoff', resource: 1 },
{ start: '2026-11-07T10:00', end: '2026-11-07T12:00', title: 'Planning', resource: 1 },
{ start: '2026-11-01T16:00', end: '2026-11-01T18:00', title: 'Check-in', resource: 2 },
{ start: '2026-11-02T15:00', end: '2026-11-02T17:00', title: 'Talk', resource: 2 },
{ start: '2026-11-03T13:00', end: '2026-11-03T15:00', title: 'Discussion', resource: 2 },
{ start: '2026-11-04T11:00', end: '2026-11-04T13:00', title: 'Call', resource: 2 },
{ start: '2026-11-05T11:00', end: '2026-11-05T13:00', title: 'Integration', resource: 2 },
{ start: '2026-11-06T13:00', end: '2026-11-06T15:00', title: 'Demo', resource: 2 },
{ start: '2026-11-07T14:00', end: '2026-11-07T16:00', title: 'Fixing', resource: 2 },
{ start: '2026-11-01T09:00', end: '2026-11-01T11:00', title: 'Planning', resource: 3 },
{ start: '2026-11-02T11:00', end: '2026-11-02T13:00', title: 'Demo', resource: 3 },
{ start: '2026-11-03T10:00', end: '2026-11-03T12:00', title: 'Review', resource: 3 },
{ start: '2026-11-04T14:00', end: '2026-11-04T16:00', title: 'Review', resource: 3 },
{ start: '2026-11-05T15:00', end: '2026-11-05T17:00', title: 'Retrospective', resource: 3 },
{ start: '2026-11-06T11:00', end: '2026-11-06T13:00', title: 'Review', resource: 3 },
{ start: '2026-11-07T08:00', end: '2026-11-07T10:00', title: 'Onboarding', resource: 3 },
{ start: '2026-11-01T12:00', end: '2026-11-01T14:00', title: 'Collab', resource: 4 },
{ start: '2026-11-02T14:00', end: '2026-11-02T16:00', title: 'Retro', resource: 4 },
{ start: '2026-11-03T14:00', end: '2026-11-03T16:00', title: 'Feedback', resource: 4 },
{ start: '2026-11-04T10:00', end: '2026-11-04T13:00', title: 'Session', resource: 4 },
{ start: '2026-11-05T10:00', end: '2026-11-05T12:00', title: 'Testing', resource: 4 },
{ start: '2026-11-06T10:00', end: '2026-11-06T12:00', title: 'Stand-up', resource: 4 },
{ start: '2026-11-07T13:00', end: '2026-11-07T15:00', title: 'Rollout', resource: 4 },
{ start: '2026-11-01T11:00', end: '2026-11-01T13:00', title: 'Stand-up', resource: 5 },
{ start: '2026-11-02T10:00', end: '2026-11-02T12:00', title: 'Review', resource: 5 },
{ start: '2026-11-03T11:00', end: '2026-11-03T13:00', title: 'Design', resource: 5 },
{ start: '2026-11-04T15:00', end: '2026-11-04T17:00', title: 'Sprint', resource: 5 },
{ start: '2026-11-05T16:00', end: '2026-11-05T18:00', title: 'Demo', resource: 5 },
{ start: '2026-11-06T15:00', end: '2026-11-06T17:00', title: 'Retro', resource: 5 },
{ start: '2026-11-07T12:00', end: '2026-11-07T14:00', title: 'Review', resource: 5 },
{ start: '2026-11-01T14:00', end: '2026-11-01T16:00', title: 'Retro', resource: 6 },
{ start: '2026-11-02T13:00', end: '2026-11-02T15:00', title: 'Update', resource: 6 },
{ start: '2026-11-03T09:00', end: '2026-11-03T11:00', title: 'Meeting', resource: 6 },
{ start: '2026-11-04T08:00', end: '2026-11-04T10:00', title: 'Stand-up', resource: 6 },
{ start: '2026-11-05T14:00', end: '2026-11-05T16:00', title: 'Call', resource: 6 },
{ start: '2026-11-06T09:00', end: '2026-11-06T11:00', title: 'Update', resource: 6 },
{ start: '2026-11-07T16:00', end: '2026-11-07T18:00', title: 'Strategy', resource: 6 },
];
var myEvents = [
{ start: '2026-11-05T09:00', end: '2026-11-05T11:00', title: 'Review' },
{ start: '2026-11-06T10:00', end: '2026-11-06T12:00', title: 'Demo' },
{ start: '2026-11-07T08:00', end: '2026-11-07T10:00', title: 'Kickoff' },
{ start: '2026-11-07T14:00', end: '2026-11-07T16:00', title: 'Strategy' },
{ start: '2026-11-08T09:00', end: '2026-11-08T11:00', title: 'Stand-up' },
{ start: '2026-11-08T13:00', end: '2026-11-08T15:00', title: 'Integration' },
{ start: '2026-11-09T10:00', end: '2026-11-09T12:00', title: 'Review' },
{ start: '2026-11-10T12:00', end: '2026-11-10T14:00', title: 'Planning' },
{ start: '2026-11-11T11:00', end: '2026-11-11T13:00', title: 'Review' },
{ start: '2026-11-12T15:00', end: '2026-11-12T17:00', title: 'Sync' },
{ start: '2026-11-12T10:00', end: '2026-11-12T12:00', title: 'Retro' },
{ start: '2026-11-13T10:00', end: '2026-11-13T12:00', title: 'Stand-up' },
{ start: '2026-11-14T14:00', end: '2026-11-14T16:00', title: 'Collab' },
{ start: '2026-11-15T08:00', end: '2026-11-15T10:00', title: 'Kickoff' },
{ start: '2026-11-16T09:00', end: '2026-11-16T11:00', title: 'Meeting' },
{ start: '2026-11-17T10:00', end: '2026-11-17T12:00', title: 'Retro' },
{ start: '2026-11-18T15:00', end: '2026-11-18T17:00', title: 'Review' },
{ start: '2026-11-03T10:00', end: '2026-11-03T12:00', title: 'Planning' },
{ start: '2026-11-02T15:00', end: '2026-11-02T17:00', title: 'Talk' },
{ start: '2026-11-01T09:00', end: '2026-11-01T11:00', title: 'Stand-up' },
{ start: '2026-10-31T14:00', end: '2026-10-31T16:00', title: 'Retrospective' },
{ start: '2026-10-30T08:00', end: '2026-10-30T10:00', title: 'Kickoff' },
{ start: '2026-10-29T15:00', end: '2026-10-29T17:00', title: 'Review' },
{ start: '2026-10-28T13:00', end: '2026-10-28T15:00', title: 'Collab' },
{ start: '2026-10-27T09:00', end: '2026-10-27T11:00', title: 'Retro' },
{ start: '2026-10-26T16:00', end: '2026-10-26T18:00', title: 'Discussion' },
{ start: '2026-10-25T14:00', end: '2026-10-25T16:00', title: 'Update' },
{ start: '2026-10-24T10:00', end: '2026-10-24T12:00', title: 'Sprint' },
{ start: '2026-10-23T13:00', end: '2026-10-23T15:00', title: 'Onboarding' },
{ start: '2026-10-22T09:00', end: '2026-10-22T11:00', title: 'Strategy' },
{ start: '2026-10-21T08:00', end: '2026-10-21T10:00', title: 'Meeting' },
];
var myView = {
scheduler: { type: 'month', startTime: '08:00', endTime: '20:00', allDay: false },
};
var myCalendar = mobiscroll.eventcalendar('#demo-customize-scheduler-column-width', {
cssClass: 'mds-col-width-small',
data: myResEvents,
groupBy: 'date',
resources: myResources,
view: myView,
});
document.querySelectorAll('input[name="mds-custom-width-options"]').forEach(function (input) {
input.addEventListener('change', function () {
myCalendar.setOptions({ cssClass: 'mds-col-width-' + this.value });
myCalendar.navigate(new Date());
});
});
document.querySelectorAll('input[name="mds-custom-width-resources-toggle"]').forEach(function (input) {
input.addEventListener('change', function () {
myCalendar.setOptions({
resources: this.value === 'on' ? myResources : [],
data: this.value === 'on' ? myResEvents : myEvents,
});
myCalendar.navigate(new Date());
});
});
<div mbsc-page class="mds-full-height">
<div class="mbsc-flex-col mds-full-height">
<div mbsc-segmented-group class="mbsc-flex-none">
<label>
<input type="radio" mbsc-segmented name="mds-custom-width-options" value="small" checked>
50px
</label>
<label>
<input type="radio" mbsc-segmented name="mds-custom-width-options" value="medium">
100px
</label>
<label>
<input type="radio" mbsc-segmented name="mds-custom-width-options" value="large">
150px
</label>
</div>
<div mbsc-segmented-group class="mbsc-flex-none">
<label>
<input type="radio" mbsc-segmented name="mds-custom-width-resources-toggle" value="on" checked>
With resources
</label>
<label>
<input type="radio" mbsc-segmented name="mds-custom-width-resources-toggle" value="off">
Without resources
</label>
</div>
<div id="demo-customize-scheduler-column-width"></div>
</div>
</div>
.mds-full-height {
height: 100%;
}
.mds-col-width-small .mbsc-schedule-col-width {
width: 50px;
}
.mds-col-width-medium .mbsc-schedule-col-width {
width: 100px;
}
.mds-col-width-large .mbsc-schedule-col-width {
width: 150px;
}