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
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
$(function () {
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-20T07:00', end: '2026-10-20T09:00', title: 'Sync', resource: 1 },
{ start: '2026-10-21T08:00', end: '2026-10-21T10:00', title: 'Kickoff', resource: 1 },
{ start: '2026-10-22T09:00', end: '2026-10-22T12:00', title: 'Planning', resource: 1 },
{ start: '2026-10-23T09:00', end: '2026-10-23T12:00', title: 'Meeting', resource: 1 },
{ start: '2026-10-24T09:00', end: '2026-10-24T12:00', title: 'Review', resource: 1 },
{ start: '2026-10-25T08:00', end: '2026-10-25T10:00', title: 'Kickoff', resource: 1 },
{ start: '2026-10-26T10:00', end: '2026-10-26T12:00', title: 'Planning', resource: 1 },
{ start: '2026-10-20T16:00', end: '2026-10-20T18:00', title: 'Check-in', resource: 2 },
{ start: '2026-10-21T15:00', end: '2026-10-21T17:00', title: 'Talk', resource: 2 },
{ start: '2026-10-22T13:00', end: '2026-10-22T15:00', title: 'Discussion', resource: 2 },
{ start: '2026-10-23T11:00', end: '2026-10-23T13:00', title: 'Call', resource: 2 },
{ start: '2026-10-24T11:00', end: '2026-10-24T13:00', title: 'Integration', resource: 2 },
{ start: '2026-10-25T13:00', end: '2026-10-25T15:00', title: 'Demo', resource: 2 },
{ start: '2026-10-26T14:00', end: '2026-10-26T16:00', title: 'Fixing', resource: 2 },
{ start: '2026-10-20T09:00', end: '2026-10-20T11:00', title: 'Planning', resource: 3 },
{ start: '2026-10-21T11:00', end: '2026-10-21T13:00', title: 'Demo', resource: 3 },
{ start: '2026-10-22T10:00', end: '2026-10-22T12:00', title: 'Review', resource: 3 },
{ start: '2026-10-23T14:00', end: '2026-10-23T16:00', title: 'Review', resource: 3 },
{ start: '2026-10-24T15:00', end: '2026-10-24T17:00', title: 'Retrospective', resource: 3 },
{ start: '2026-10-25T11:00', end: '2026-10-25T13:00', title: 'Review', resource: 3 },
{ start: '2026-10-26T08:00', end: '2026-10-26T10:00', title: 'Onboarding', resource: 3 },
{ start: '2026-10-20T12:00', end: '2026-10-20T14:00', title: 'Collab', resource: 4 },
{ start: '2026-10-21T14:00', end: '2026-10-21T16:00', title: 'Retro', resource: 4 },
{ start: '2026-10-22T14:00', end: '2026-10-22T16:00', title: 'Feedback', resource: 4 },
{ start: '2026-10-23T10:00', end: '2026-10-23T13:00', title: 'Session', resource: 4 },
{ start: '2026-10-24T10:00', end: '2026-10-24T12:00', title: 'Testing', resource: 4 },
{ start: '2026-10-25T10:00', end: '2026-10-25T12:00', title: 'Stand-up', resource: 4 },
{ start: '2026-10-26T13:00', end: '2026-10-26T15:00', title: 'Rollout', resource: 4 },
{ start: '2026-10-20T11:00', end: '2026-10-20T13:00', title: 'Stand-up', resource: 5 },
{ start: '2026-10-21T10:00', end: '2026-10-21T12:00', title: 'Review', resource: 5 },
{ start: '2026-10-22T11:00', end: '2026-10-22T13:00', title: 'Design', resource: 5 },
{ start: '2026-10-23T15:00', end: '2026-10-23T17:00', title: 'Sprint', resource: 5 },
{ start: '2026-10-24T16:00', end: '2026-10-24T18:00', title: 'Demo', resource: 5 },
{ start: '2026-10-25T15:00', end: '2026-10-25T17:00', title: 'Retro', resource: 5 },
{ start: '2026-10-26T12:00', end: '2026-10-26T14:00', title: 'Review', resource: 5 },
{ start: '2026-10-20T14:00', end: '2026-10-20T16:00', title: 'Retro', resource: 6 },
{ start: '2026-10-21T13:00', end: '2026-10-21T15:00', title: 'Update', resource: 6 },
{ start: '2026-10-22T09:00', end: '2026-10-22T11:00', title: 'Meeting', resource: 6 },
{ start: '2026-10-23T08:00', end: '2026-10-23T10:00', title: 'Stand-up', resource: 6 },
{ start: '2026-10-24T14:00', end: '2026-10-24T16:00', title: 'Call', resource: 6 },
{ start: '2026-10-25T09:00', end: '2026-10-25T11:00', title: 'Update', resource: 6 },
{ start: '2026-10-26T16:00', end: '2026-10-26T18:00', title: 'Strategy', resource: 6 },
];
var myEvents = [
{ start: '2026-10-24T09:00', end: '2026-10-24T11:00', title: 'Review' },
{ start: '2026-10-25T10:00', end: '2026-10-25T12:00', title: 'Demo' },
{ start: '2026-10-26T08:00', end: '2026-10-26T10:00', title: 'Kickoff' },
{ start: '2026-10-26T14:00', end: '2026-10-26T16:00', title: 'Strategy' },
{ start: '2026-10-27T09:00', end: '2026-10-27T11:00', title: 'Stand-up' },
{ start: '2026-10-27T13:00', end: '2026-10-27T15:00', title: 'Integration' },
{ start: '2026-10-28T10:00', end: '2026-10-28T12:00', title: 'Review' },
{ start: '2026-10-29T12:00', end: '2026-10-29T14:00', title: 'Planning' },
{ start: '2026-10-30T11:00', end: '2026-10-30T13:00', title: 'Review' },
{ start: '2026-10-31T15:00', end: '2026-10-31T17:00', title: 'Sync' },
{ start: '2026-10-31T10:00', end: '2026-10-31T12:00', title: 'Retro' },
{ start: '2026-11-01T10:00', end: '2026-11-01T12:00', title: 'Stand-up' },
{ start: '2026-11-02T14:00', end: '2026-11-02T16:00', title: 'Collab' },
{ start: '2026-11-03T08:00', end: '2026-11-03T10:00', title: 'Kickoff' },
{ start: '2026-11-04T09:00', end: '2026-11-04T11:00', title: 'Meeting' },
{ start: '2026-11-05T10:00', end: '2026-11-05T12:00', title: 'Retro' },
{ start: '2026-11-06T15:00', end: '2026-11-06T17:00', title: 'Review' },
{ start: '2026-10-22T10:00', end: '2026-10-22T12:00', title: 'Planning' },
{ start: '2026-10-21T15:00', end: '2026-10-21T17:00', title: 'Talk' },
{ start: '2026-10-20T09:00', end: '2026-10-20T11:00', title: 'Stand-up' },
{ start: '2026-10-19T14:00', end: '2026-10-19T16:00', title: 'Retrospective' },
{ start: '2026-10-18T08:00', end: '2026-10-18T10:00', title: 'Kickoff' },
{ start: '2026-10-17T15:00', end: '2026-10-17T17:00', title: 'Review' },
{ start: '2026-10-16T13:00', end: '2026-10-16T15:00', title: 'Collab' },
{ start: '2026-10-15T09:00', end: '2026-10-15T11:00', title: 'Retro' },
{ start: '2026-10-14T16:00', end: '2026-10-14T18:00', title: 'Discussion' },
{ start: '2026-10-13T14:00', end: '2026-10-13T16:00', title: 'Update' },
{ start: '2026-10-12T10:00', end: '2026-10-12T12:00', title: 'Sprint' },
{ start: '2026-10-11T13:00', end: '2026-10-11T15:00', title: 'Onboarding' },
{ start: '2026-10-10T09:00', end: '2026-10-10T11:00', title: 'Strategy' },
{ start: '2026-10-09T08:00', end: '2026-10-09T10:00', title: 'Meeting' },
];
var myView = {
scheduler: { type: 'month', startTime: '08:00', endTime: '20:00', allDay: false },
};
var myCalendar = $('#demo-customize-scheduler-column-width')
.mobiscroll()
.eventcalendar({
cssClass: 'mds-col-width-small',
data: myResEvents,
groupBy: 'date',
resources: myResources,
view: myView,
})
.mobiscroll('getInst');
$('input[name="mds-custom-width-options"]').on('change', function () {
myCalendar.setOptions({ cssClass: 'mds-col-width-' + $(this).val() });
myCalendar.navigate(new Date());
});
$('input[name="mds-custom-width-resources-toggle"]').on('change', function () {
myCalendar.setOptions({
resources: $(this).val() === 'on' ? myResources : [],
data: $(this).val() === '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;
}