Custom Column Widths
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-10-21T07:00', end: '2026-10-21T09:00', title: 'Sync', resource: 1 },
{ start: '2026-10-22T08:00', end: '2026-10-22T10:00', title: 'Kickoff', resource: 1 },
{ start: '2026-10-23T09:00', end: '2026-10-23T12:00', title: 'Planning', resource: 1 },
{ start: '2026-10-24T09:00', end: '2026-10-24T12:00', title: 'Meeting', resource: 1 },
{ start: '2026-10-25T09:00', end: '2026-10-25T12:00', title: 'Review', resource: 1 },
{ start: '2026-10-26T08:00', end: '2026-10-26T10:00', title: 'Kickoff', resource: 1 },
{ start: '2026-10-27T10:00', end: '2026-10-27T12:00', title: 'Planning', resource: 1 },
{ start: '2026-10-21T16:00', end: '2026-10-21T18:00', title: 'Check-in', resource: 2 },
{ start: '2026-10-22T15:00', end: '2026-10-22T17:00', title: 'Talk', resource: 2 },
{ start: '2026-10-23T13:00', end: '2026-10-23T15:00', title: 'Discussion', resource: 2 },
{ start: '2026-10-24T11:00', end: '2026-10-24T13:00', title: 'Call', resource: 2 },
{ start: '2026-10-25T11:00', end: '2026-10-25T13:00', title: 'Integration', resource: 2 },
{ start: '2026-10-26T13:00', end: '2026-10-26T15:00', title: 'Demo', resource: 2 },
{ start: '2026-10-27T14:00', end: '2026-10-27T16:00', title: 'Fixing', resource: 2 },
{ start: '2026-10-21T09:00', end: '2026-10-21T11:00', title: 'Planning', resource: 3 },
{ start: '2026-10-22T11:00', end: '2026-10-22T13:00', title: 'Demo', resource: 3 },
{ start: '2026-10-23T10:00', end: '2026-10-23T12:00', title: 'Review', resource: 3 },
{ start: '2026-10-24T14:00', end: '2026-10-24T16:00', title: 'Review', resource: 3 },
{ start: '2026-10-25T15:00', end: '2026-10-25T17:00', title: 'Retrospective', resource: 3 },
{ start: '2026-10-26T11:00', end: '2026-10-26T13:00', title: 'Review', resource: 3 },
{ start: '2026-10-27T08:00', end: '2026-10-27T10:00', title: 'Onboarding', resource: 3 },
{ start: '2026-10-21T12:00', end: '2026-10-21T14:00', title: 'Collab', resource: 4 },
{ start: '2026-10-22T14:00', end: '2026-10-22T16:00', title: 'Retro', resource: 4 },
{ start: '2026-10-23T14:00', end: '2026-10-23T16:00', title: 'Feedback', resource: 4 },
{ start: '2026-10-24T10:00', end: '2026-10-24T13:00', title: 'Session', resource: 4 },
{ start: '2026-10-25T10:00', end: '2026-10-25T12:00', title: 'Testing', resource: 4 },
{ start: '2026-10-26T10:00', end: '2026-10-26T12:00', title: 'Stand-up', resource: 4 },
{ start: '2026-10-27T13:00', end: '2026-10-27T15:00', title: 'Rollout', resource: 4 },
{ start: '2026-10-21T11:00', end: '2026-10-21T13:00', title: 'Stand-up', resource: 5 },
{ start: '2026-10-22T10:00', end: '2026-10-22T12:00', title: 'Review', resource: 5 },
{ start: '2026-10-23T11:00', end: '2026-10-23T13:00', title: 'Design', resource: 5 },
{ start: '2026-10-24T15:00', end: '2026-10-24T17:00', title: 'Sprint', resource: 5 },
{ start: '2026-10-25T16:00', end: '2026-10-25T18:00', title: 'Demo', resource: 5 },
{ start: '2026-10-26T15:00', end: '2026-10-26T17:00', title: 'Retro', resource: 5 },
{ start: '2026-10-27T12:00', end: '2026-10-27T14:00', title: 'Review', resource: 5 },
{ start: '2026-10-21T14:00', end: '2026-10-21T16:00', title: 'Retro', resource: 6 },
{ start: '2026-10-22T13:00', end: '2026-10-22T15:00', title: 'Update', resource: 6 },
{ start: '2026-10-23T09:00', end: '2026-10-23T11:00', title: 'Meeting', resource: 6 },
{ start: '2026-10-24T08:00', end: '2026-10-24T10:00', title: 'Stand-up', resource: 6 },
{ start: '2026-10-25T14:00', end: '2026-10-25T16:00', title: 'Call', resource: 6 },
{ start: '2026-10-26T09:00', end: '2026-10-26T11:00', title: 'Update', resource: 6 },
{ start: '2026-10-27T16:00', end: '2026-10-27T18:00', title: 'Strategy', resource: 6 },
];
var myEvents = [
{ start: '2026-10-25T09:00', end: '2026-10-25T11:00', title: 'Review' },
{ start: '2026-10-26T10:00', end: '2026-10-26T12:00', title: 'Demo' },
{ start: '2026-10-27T08:00', end: '2026-10-27T10:00', title: 'Kickoff' },
{ start: '2026-10-27T14:00', end: '2026-10-27T16:00', title: 'Strategy' },
{ start: '2026-10-28T09:00', end: '2026-10-28T11:00', title: 'Stand-up' },
{ start: '2026-10-28T13:00', end: '2026-10-28T15:00', title: 'Integration' },
{ start: '2026-10-29T10:00', end: '2026-10-29T12:00', title: 'Review' },
{ start: '2026-10-30T12:00', end: '2026-10-30T14:00', title: 'Planning' },
{ start: '2026-10-31T11:00', end: '2026-10-31T13:00', title: 'Review' },
{ start: '2026-11-01T15:00', end: '2026-11-01T17:00', title: 'Sync' },
{ start: '2026-11-01T10:00', end: '2026-11-01T12:00', title: 'Retro' },
{ start: '2026-11-02T10:00', end: '2026-11-02T12:00', title: 'Stand-up' },
{ start: '2026-11-03T14:00', end: '2026-11-03T16:00', title: 'Collab' },
{ start: '2026-11-04T08:00', end: '2026-11-04T10:00', title: 'Kickoff' },
{ start: '2026-11-05T09:00', end: '2026-11-05T11:00', title: 'Meeting' },
{ start: '2026-11-06T10:00', end: '2026-11-06T12:00', title: 'Retro' },
{ start: '2026-11-07T15:00', end: '2026-11-07T17:00', title: 'Review' },
{ start: '2026-10-23T10:00', end: '2026-10-23T12:00', title: 'Planning' },
{ start: '2026-10-22T15:00', end: '2026-10-22T17:00', title: 'Talk' },
{ start: '2026-10-21T09:00', end: '2026-10-21T11:00', title: 'Stand-up' },
{ start: '2026-10-20T14:00', end: '2026-10-20T16:00', title: 'Retrospective' },
{ start: '2026-10-19T08:00', end: '2026-10-19T10:00', title: 'Kickoff' },
{ start: '2026-10-18T15:00', end: '2026-10-18T17:00', title: 'Review' },
{ start: '2026-10-17T13:00', end: '2026-10-17T15:00', title: 'Collab' },
{ start: '2026-10-16T09:00', end: '2026-10-16T11:00', title: 'Retro' },
{ start: '2026-10-15T16:00', end: '2026-10-15T18:00', title: 'Discussion' },
{ start: '2026-10-14T14:00', end: '2026-10-14T16:00', title: 'Update' },
{ start: '2026-10-13T10:00', end: '2026-10-13T12:00', title: 'Sprint' },
{ start: '2026-10-12T13:00', end: '2026-10-12T15:00', title: 'Onboarding' },
{ start: '2026-10-11T09:00', end: '2026-10-11T11:00', title: 'Strategy' },
{ start: '2026-10-10T08:00', end: '2026-10-10T10: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;
}