Open moreswapnil95 opened 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.
got this one when drag & drop @ansulagrawal
@whoafridi don't add your issue here create a new issue for this
I'm kinda proud of this hack.
so added a couple of useRefs
const contentContainerRef = useRef
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>)
Checklist
Please make sure the question is worded well enough to be understood
how to adjust scheduler width as per outer div width