Scheduler width adjustment

[moreswapnil95]

Checklist

• I've looked through the README
• I've verified that I am running react-big-schedule latest version.
• I've searched the existing issues and discussions for a similar question
• I've provided relevant code snippets or error messages
• I've included steps to reproduce the issue
• I've checked the browser console for any errors
• I've tested the issue with the latest version of react-big-schedule

Please make sure the question is worded well enough to be understood

how to adjust scheduler width as per outer div width

[moreswapnil95]

[ansulagrawal]

Hello @moreswapnil95 this is currently not possible directly but by taking out parent div width by using use ref or something and passing that width to the scheduler config you can do that.

[whoafridi]

got this one when drag & drop @ansulagrawal

[ansulagrawal]

@whoafridi don't add your issue here create a new issue for this

[devpascoe]

I'm kinda proud of this hack.

so added a couple of useRefs

const contentContainerRef = useRef(null);
const scheduleContainerRef = useRef(null);

A useEffect to traverse into the component.

useEffect(() => {
    // hack into the react-big-schedule component and override styles for responsiveness
    const updateWidths = () => {
      if (scheduleContainerRef.current && contentContainerRef.current) {
        const contentWidth = contentContainerRef.current.offsetWidth;

        const schedulerTable = scheduleContainerRef.current.querySelector(
          '.scheduler',
        ) as HTMLElement;
        if (schedulerTable) {
          schedulerTable.style.width = '100%';
        }

        const resourceView = scheduleContainerRef.current.querySelector(
          '.resource-view',
        ) as HTMLElement;
        const resourceViewWidth = resourceView
          ? resourceView.offsetWidth
          : 160;

        const schedulerView = scheduleContainerRef.current.querySelector(
          '.scheduler-view',
        ) as HTMLElement;
        if (schedulerView) {
          schedulerView.style.width = `${
            contentWidth - resourceViewWidth - CONTENT_PADDING * 2
          }px`;
        }
      }
    };

    updateWidths();
    window.addEventListener('resize', updateWidths);

    return () => {
      window.removeEventListener('resize', updateWidths);
    };
  }, []);

And then some wrapping...

return (
    <DndProvider backend={HTML5Backend}>
      <div
        ref={contentContainerRef}
        className="pt-6 w-full"
        style={{
          paddingLeft: `${CONTENT_PADDING}px`,
          paddingRight: `${CONTENT_PADDING}px`,
        }}>
            <div ref={scheduleContainerRef}>
                <Scheduler
                  schedulerData={viewModel}
                  ...
                />
             </div>
        </div>
    </DndProvider>)