---
title: "React Scheduler Custom Column Widths Example | Mobiscroll"
component: "Scheduler"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/scheduler/customize-scheduler-column-width"
---

# Custom Column Widths - React Scheduler demo

Control column widths in a React Scheduler — set fixed or dynamic widths for resource columns or day columns to fit your layout. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/scheduler/customize-scheduler-column-width)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/eventcalendar/scheduler/customize-scheduler-column-width)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/eventcalendar/scheduler/customize-scheduler-column-width)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/scheduler/customize-scheduler-column-width.md), [jQuery](https://demo.mobiscroll.com/jquery/scheduler/customize-scheduler-column-width.md), [Angular](https://demo.mobiscroll.com/angular/scheduler/customize-scheduler-column-width.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/customize-scheduler-column-width.md)

## Description

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 →](https://demo.mobiscroll.com/react/scheduler/dynamic-content-based-resource-width)

## What this demo shows

- A desktop monthly scheduler layout with a fixed month strip, repeated resources for each day, and a scrollable 12-hour time grid for the selected month.
- **Column width switcher**: A segmented control lets users switch between 50px, 100px, and 150px scheduler column widths.
- **Default width**: The 150px column width option is selected by default.
- **Column width behavior**: When resources are shown, the configured width applies to resource columns. When resources are hidden, the same width applies to day columns.
- **Resource toggle**: A second segmented control switches between showing and hiding resources.
- **Default resource mode**: Resources are shown by default.
- **No-resource mode**: Switching to the no-resource option updates the scheduler so resource columns are no longer displayed.
- **Header navigation** The month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between month and jump back to the current day.
- **Month strip**: The fixed strip below the header displays the days of the selected month, with the current date highlighted by a blue circle.
- **Resources**: Each day shows the same resources: Bart, Jake, Carl, Dana, Evan, and Faye.
- **Resource columns**: Each resource has its own column inside the day column when resources are enabled.
- **Time grid**: The scheduler displays time from 8 AM to 8 PM.
- **Scrolling behavior**: The scheduler can be scrolled vertically through the time grid and horizontally across the days of the month and their resource columns.
- **Timed events** Timed events are displayed in the monthly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title.
- **Overlapping events**: Events that overlap are placed side by side so each event remains visible.
- **Current time**: A blue current-time line appears across the time grid.
- **Hover time indicator**: Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event interaction** Hovering over events highlights them and shows drag and resize handles for repositioning or changing duration.
- **Event selection**: Clicking an event highlights the selected event.
- **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event.

## Best for

- **Scheduler column sizing**: Showing how to customize scheduler column width with fixed pixel values.
- **Dense desktop schedules**: Working with month-based scheduler views that need horizontal and vertical scrolling.

## Tutorial

### Set the column width:

- (x) 50px
- ( ) 100px
- ( ) 150px

### Width applies to resources or days when off:

- (x) With resources
- ( ) Without resources

```css
.mbsc-schedule-col-width {
  width: 50px;
}
```

With "100px":

```css
.mbsc-schedule-col-width {
  width: 100px;
}
```

With "150px":

```css
.mbsc-schedule-col-width {
  width: 150px;
}
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-themeVariant) - option
- [`cssClass`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-cssClass) - option
- [`data`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-data) - option
- [`resources`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-resources) - option
- [`groupBy`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-groupBy) - option
- [`view`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-view) - option

## Code

### JSX

```jsx
import { Eventcalendar, Page, Segmented, SegmentedGroup, setOptions } from '@mobiscroll/react';
import { useCallback, useMemo, useState } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

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

### TSX

```tsx
import {
  Eventcalendar,
  MbscCalendarEvent,
  MbscEventcalendarView,
  MbscResource,
  Page,
  Segmented,
  SegmentedGroup,
  setOptions,
} from '@mobiscroll/react';
import { ChangeEvent, FC, useCallback, useMemo, useState } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

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

### CSS

```css
.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;
}
```

## Implementation notes

- Use `view: { scheduler: { type: 'month', startTime: '08:00', endTime: '20:00', allDay: false } }` - a monthly scheduler with a custom visible time range and the all-day row hidden.
- Define 6 resources, each with `id`, `name`, and `color`. Set `groupBy: 'date'` so columns are days and rows are resources.
- Maintain two event datasets using `dyndatetime` offsets: one with `resource` references (for resource mode) and one without (for no-resource mode).
- **Column width**: Set the column width by applying a scoped CSS rule targeting Mobiscroll's internal `.mbsc-schedule-col-width` class. Pass a `cssClass` to the Eventcalendar to scope the rule - swapping the `cssClass` value dynamically switches between width presets. When resources are active, `.mbsc-schedule-col-width` controls resource column width; without resources, it controls day column width.
- The `cssClass` option can be swapped at runtime to switch between column-width presets; for the imperative API, call `inst.setOptions({ cssClass: ... })` followed by `inst.navigate(new Date())` to re-render at the current date.
- Toggling between resource and no-resource modes requires updating both the `resources` and `data` options on the Eventcalendar simultaneously.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-react.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config react
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config react --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/react/getting-started/installation

## Related demos

- Previous: [Responsive Day and Week Views](https://demo.mobiscroll.com/react/scheduler/responsive-day-week-schedule.md) - Build a responsive React Scheduler with daily view on small screens, weekly on larger ones — use named breakpoints to control layout at every screen size.
- Next: [Print and PDF Export](https://demo.mobiscroll.com/react/scheduler/printing-the-view.md) - Add print support to the React Scheduler — use the print add-on to print the scheduler view or export to PDF via the browser print dialog.