react-scheduler
scheduler does not conform to the outside parent div
Checklist
- [X] I've verified that I'm running react-big-schedule version 4.2.0 or higher
Describe the bug
The scheduler does not conform to the outside parent div no matter what I try, the second issue is that when I change the viewType, from day to week or month, the entire scheduler expands outside the div and will not look functional.
Currently the scheduler does not conform to the outside div:
If I change to week:
If I rerender the component it reshapes itself back to a normal size, but its still not conforming to the outside div.
I have tried the
- responsiveByParent route https://github.com/hbatalhaStch/react-big-scheduler/issues/26
- https://github.com/react-scheduler/react-big-schedule/issues/52 Which is running react not in strict mode, my production version has the same identical issues.
- besidesWidth: window.innerWidth <= 1600 ? 100 : 350, // you need to add this
None have worked so far, from my understanding it seems that the resource table have a dynamic width that increases its size dependent on the width rather than the events table.
What could it be and what should I be trying? I would really like this to work in my application.
Reproduction Link/Code
const schedulerParentRef = useRef();
var today = new Date();
var date = today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate();
let schedulerData = new SchedulerData(
date,
ViewType.Day, // Change the status of daily, weekly or monthly
false,
false,
{
eventItemPopoverPlacement: "bottomRightMousePosition",
responsiveByParent: true,
besidesWidth: window.innerWidth <= 1600 ? 100 : 350,
startResizable: false,
endResizable: false,
schedulerContentHeight: "100%",
weekCellWidth: 80,
dayCellWidth: 40,
}
);
schedulerData.setResources([]);
schedulerData.setEvents([]);
useEffect(() => {
dispatch(initialiseViewModel(schedulerData));
return () => dispatch(reInitialiseViewModel());
}, [date, dispatch, initialiseViewModel, reInitialiseViewModel]);
const changeDate = (e) => {
setDateState(e);
};
const getResources = useCallback(() => {
getAuthorization()
.get(`company/get_companyschedule_recources?assigned_to=${DropDownValue}`)
.then((res) => {
setResources(res.data.message ? [] : res.data);
dispatch(setAPIDetailsUser(res.data.message ? [] : res.data));
getEvents(); // Get events after resources have been set
})
.catch((err) => {
console.log("Error in getting schedule", err);
});
}, [dispatch, DropDownValue]);
const getEvents = useCallback(() => {
getAuthorization()
.get(`company/get_companyschedule_events?assigned_to=${DropDownValue}`)
.then((res) => {
setEvents(res.data.message ? [] : res.data);
dispatch(setAPIDetailsUserEvents(res.data.message ? [] : res.data));
setDataLoaded(true); // Set dataLoaded to true after both resources and events are set
})
.catch((err) => {
console.log("Error in getting schedule", err);
});
}, [dispatch, DropDownValue]);
//Set Scheduler Data
useEffect(() => {
if (dataLoaded) {
viewModel.setResources(Resources);
viewModel.setEvents(Events);
dispatch(setViewModel(viewModel));
setDataLoaded(false); // Reset after processing the loaded data
}
}, [dataLoaded, Resources, Events, DropDownValue]);
useEffect(() => {
setDataLoaded(false); // Reset the dataLoaded state before fetching
getResources();
}, [DropDownValue, getResources]);
const prevClick = (schedulerData) => {
schedulerData.prev();
schedulerData.setEvents(Events);
dispatch(setViewModel(schedulerData));
};
const nextClick = (schedulerData) => {
schedulerData.next();
schedulerData.setEvents(Events);
dispatch(setViewModel(schedulerData));
};
const onViewChange = (schedulerData, view) => {
schedulerData.setViewType(view.viewType, view.showAgenda, view.isEventPerspective);
schedulerData.setEvents(Events);
dispatch(setViewModel(schedulerData));
};
const onSelectDate = (schedulerData, date) => {
schedulerData.setDate(date);
schedulerData.setEvents(Events);
dispatch(setViewModel(schedulerData));
};
const eventClicked = (schedulerData, event) => {
setOpen(true);
getAuthorization()
.get(`company/schedule_view/${event.id}/`)
.then((res) => {
setScheduleDetails(res.data);
setDateState([new Date(`${res.data.start_date}`), new Date(`${res.data.end_date}`)]);
})
.catch((err) => {
console.log("Error in getting schedule details", err);
});
};
const ops1 = (schedulerData, event) => {
setOpen(true);
getAuthorization()
.get(`company/schedule_detail/${event.id}/`)
.then((res) => {
setScheduleDetails(res.data);
})
.catch((err) => {
console.log("Error in getting schedule details", err);
});
// alert(
// `You just executed ops1 to event: {id: ${event.id}, title: ${
// event.title
// }}`
// );
};
return (
<div className="w-full" ref={schedulerParentRef}>
{displayTimeline && (
<div className="-mt-4" style={{ marginLeft: "auto" }}>
<Scheduler
parentRef={schedulerParentRef}
schedulerData={viewModel}
prevClick={prevClick}
nextClick={nextClick}
onSelectDate={onSelectDate}
onViewChange={onViewChange}
eventItemClick={eventClicked}
viewEventClick={ops1}
viewEventText="Details"
/>
</div>
)}
Steps to reproduce
- view scheduler and notice that its not the right size
- click on week and it jumps outside of the div
Operating System
windows
Browser
firefox
React version
^18.0.2
react-big-schedule version
^4.2.5
Additional Information
No response
Hi @AsifDaum which package are you using. Its of our or hballtalblhaStch library.
Can you try to create a bug in code sandbox if possible
I was using your library, but the problem was consistent across both. I actually found out what the issue was anyway:
One developer had set global css to the scheduler which caused it not to render properly, by simply removing this I was able to get it to a more manageable state.
/* @media screen and (max-width: 900px) { .scheduler-view{ width: 820px !important; } } */ /* .scheduler-view{ width: 55vw !important; } */ /* table#RBS-Scheduler-root{ width: 100% !important; margin: 0px !important; } */
I commented it out and that caused it to render properly, but the bug that was mentioned by:
https://github.com/react-scheduler/react-big-schedule/issues/52
appeared, where the window had to be resized for it to conform to the layout on first render.
I have bypassed this temporarily by doing the following:
` useEffect(() => {
const triggerResize = () => {
window.dispatchEvent(new Event("resize"));
};
// Initial dispatch to ensure correct rendering
triggerResize();
// Optionally, you may want to set up a small delay before triggering the resize,
// to ensure all rendering processes have completed:
setTimeout(triggerResize, 100);
// Clean up if needed when component is unmounted or relevant dependencies change
// return () => {
// // Any cleanup code here
// };
}, []); // Empty dependency array means this useEffect runs once, similar to componentDidMount
var today = new Date();
var date = today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate();
let schedulerData = new SchedulerData(
date,
ViewType.Day, // Change the status of daily, weekly or monthly
false,
false,
{
eventItemPopoverPlacement: "bottomRightMousePosition",
besidesWidth: window.innerWidth <= appSideBarStatus ? 70 : 360,
startResizable: false,
endResizable: false,
schedulerContentHeight: "100%",
}
);
schedulerData.setResources([]);
schedulerData.setEvents([]);
useEffect(() => {
dispatch(initialiseViewModel(schedulerData));
return () => dispatch(reInitialiseViewModel());
}, [date, dispatch, initialiseViewModel, reInitialiseViewModel]);`
I added a resize event to make it adjust to the layout after its first render.
I had to also use the besidesWidth to ensure it fit the space correctly, its not perfect since I have a toggle-able sidebar but its working fine for now. Once you guys have corrected its layout issues then I think i'll be able to remove that stuff.
We will try to solve the issue but not sure how much time it will take as I am also busy with some work so.