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;
}

JSXTSXCSS
import { Eventcalendar, Page, Segmented, SegmentedGroup, setOptions } from '@mobiscroll/react';
import { useCallback, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [myWidth, setWidth] = useState('small');
const [showResources, setShowResources] = useState(true);
const myResources = useMemo(
() => [
{ 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' },
],
[],
);
const myResEvents = useMemo(
() => [
{ 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 },
],
[],
);
const myEvents = useMemo(
() => [
{ 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' },
],
[],
);
const myView = useMemo(
() => ({
scheduler: { type: 'month', startTime: '08:00', endTime: '20:00', allDay: false },
}),
[],
);
const handleWidthChange = useCallback((ev) => {
setWidth(ev.target.value);
}, []);
const handleResourceChange = useCallback((ev) => {
setShowResources(ev.target.value === 'on');
}, []);
return (
<Page className="mds-full-height">
<div className="mbsc-flex-col mds-full-height">
<SegmentedGroup className="mbsc-flex-none" value={myWidth} onChange={handleWidthChange}>
<Segmented value="small">50px</Segmented>
<Segmented value="medium">100px</Segmented>
<Segmented value="large">150px</Segmented>
</SegmentedGroup>
<SegmentedGroup className="mbsc-flex-none" value={showResources ? 'on' : 'off'} onChange={handleResourceChange}>
<Segmented value="on">With resources</Segmented>
<Segmented value="off">Without resources</Segmented>
</SegmentedGroup>
<Eventcalendar
cssClass={'mds-col-width-' + myWidth}
data={showResources ? myResEvents : myEvents}
resources={showResources ? myResources : []}
groupBy="date"
view={myView}
/>
</div>
</Page>
);
}
export default App;
import {
Eventcalendar,
MbscCalendarEvent,
MbscEventcalendarView,
MbscResource,
Page,
Segmented,
SegmentedGroup,
setOptions ,
} from '@mobiscroll/react';
import { ChangeEvent, FC, useCallback, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => {
const [myWidth, setWidth] = useState('small');
const [showResources, setShowResources] = useState(true);
const myResources = useMemo<MbscResource[]>(
() => [
{ 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' },
],
[],
);
const myResEvents = useMemo<MbscCalendarEvent[]>(
() => [
{ 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 },
],
[],
);
const myEvents = useMemo<MbscCalendarEvent[]>(
() => [
{ 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' },
],
[],
);
const myView = useMemo<MbscEventcalendarView>(
() => ({
scheduler: { type: 'month', startTime: '08:00', endTime: '20:00', allDay: false },
}),
[],
);
const handleWidthChange = useCallback((ev: ChangeEvent<HTMLInputElement>) => {
setWidth(ev.target.value);
}, []);
const handleResourceChange = useCallback((ev: ChangeEvent<HTMLInputElement>) => {
setShowResources(ev.target.value === 'on');
}, []);
return (
<Page className="mds-full-height">
<div className="mbsc-flex-col mds-full-height">
<SegmentedGroup className="mbsc-flex-none" value={myWidth} onChange={handleWidthChange}>
<Segmented value="small">50px</Segmented>
<Segmented value="medium">100px</Segmented>
<Segmented value="large">150px</Segmented>
</SegmentedGroup>
<SegmentedGroup className="mbsc-flex-none" value={showResources ? 'on' : 'off'} onChange={handleResourceChange}>
<Segmented value="on">With resources</Segmented>
<Segmented value="off">Without resources</Segmented>
</SegmentedGroup>
<Eventcalendar
cssClass={'mds-col-width-' + myWidth}
data={showResources ? myResEvents : myEvents}
resources={showResources ? myResources : []}
groupBy="date"
view={myView}
/>
</div>
</Page>
);
};
export default App;
.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;
}