How to Change the Component width and make it responsive

[NBenzekri]

Hi,

I found this component very helpful in my project, so thanks for that.

I have a problem when I want to make the component width responsive to the page width, as you see in the image when I zoom out the width became smaller and the user find a problem to see all the data even if he open it in a big screen.

So How I can handle the scheduler width? and also the resource Column width, it stills bigger than the content size.

[nielsuit227]

Did you figure out a fix in the end? Very curious.

[NBenzekri]

unfortunately, nop 👎 :(

[mixa9269]

If someone else is looking for this possibility, then it can be helpful

Root of app

import ResizeObserver from 'react-resize-detector';

<ResizeObserver><App /></ResizeObserver>

Scheduler

import { useResizeDetector } from 'react-resize-detector';

const { width, ref } = useResizeDetector();

    if (width) {
      // it's ok to mutate state here
      viewModel.config.schedulerWidth = width;
    }

    return (
      <div ref={ref}>
        <Scheduler
          schedulerData={viewModel}
          ...
        />
      </div>
    );