react-scheduler / react-big-schedule

React Big Schedule is a powerful and intuitive scheduler and resource planning solution built with React.
https://react-big-schedule.vercel.app/
MIT License
92 stars 20 forks source link

Scheduler width adjustment #140

Open moreswapnil95 opened 7 months ago

moreswapnil95 commented 7 months ago

Checklist

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

how to adjust scheduler width as per outer div width

moreswapnil95 commented 7 months ago

image

ansulagrawal commented 7 months ago

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 commented 2 months ago

got this one when drag & drop @ansulagrawal image

ansulagrawal commented 2 months ago

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

devpascoe commented 2 months ago

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>)