Page 1 of 2
[REACT] Shared CrudManager demo in React?
Posted: Tue May 30, 2023 10:19 pm
by calendardeveloper
I am trying to do this exact thing in my app, but in React.https://bryntum.com/products/scheduler/examples/shared-crudmanager/
My code looks like this. How would I add in a second Scheduler using the same ProjectModel?
<>
<BryntumProjectModel
timeRangesData={timeRanges}
ref={project}
events={events}
resources={resources}
calendarsData={calendars}
calendar={'weekends'}
/>
<BryntumSchedulerPro ref={multiScheduler} project={project} {...schedulerProConfig} />
</>
Re: [REACT] Shared CrudManager demo in React?
Posted: Tue May 30, 2023 11:09 pm
by marcio
Hey calendardeveloper,
You can achieve that with the following
<>
<BryntumProjectModel
timeRangesData={timeRanges}
ref={project}
events={events}
resources={resources}
calendarsData={calendars}
calendar={'weekends'}
/>
<BryntumSchedulerPro
ref={multiScheduler1}
project={project}
{...schedulerProConfig}
/>
<BryntumSchedulerPro
ref={multiScheduler2}
project={project}
{...schedulerProConfig}
/>
</>And even have a different configuration with something like schedulerProConfig2 for example.
Re: [REACT] Shared CrudManager demo in React?
Posted: Tue May 30, 2023 11:10 pm
by calendardeveloper
Thanks, How would I change the resourceStore on the first scheduler to have just one row (the first row) e.g. from the main resourceStore? Also, I think the second one needs to be a partner of the first one, to have synchronised scrolling.
Re: [REACT] Shared CrudManager demo in React?
Posted: Tue May 30, 2023 11:26 pm
by marcio
Re: [REACT] Shared CrudManager demo in React?
Posted: Tue May 30, 2023 11:32 pm
by calendardeveloper
Hi Marcio, would really appreciate some code examples of applying/removing filters.
For the partner, I managed to do it like below. Made the second one a partner of the first one.
useEffect(() => {
if (multiScheduler?.current && userScheduler?.current) {
multiScheduler.current.instance.addPartner(userScheduler.current.instance);
}
}, []);
Re: [REACT] Shared CrudManager demo in React?
Posted: Tue May 30, 2023 11:43 pm
by calendardeveloper
Could I just use the 2 schedulers with their own resources/events etc without using the ProjectModel? I guess that would work too?
Re: [REACT] Shared CrudManager demo in React?
Posted: Wed May 31, 2023 12:04 am
by calendardeveloper
I tried it - seems to work. But there are a few issues :-
I lose the weekends and the timeranges - they don't show up anymore.
The horizontal scroller is too thick - can I just remove that without losing the ability to scroll? Users can scroll via touch.
<BryntumSchedulerPro
ref={userScheduler}
// project={project}
{...schedulerProConfig}
cls={'single-row'}
events={events.filter((e) => e.resourceId === 'myuser')}
resources={resources.filter((r) => r.id === 'myuser')}
calendarsData={calendars}
calendar={'weekends'}
timeRangesData={timeRanges}
/>
<BryntumSchedulerPro
ref={multiScheduler}
// project={project}
{...schedulerProConfig}
hideHeaders={true}
cls={'multi-row'}
events={events}
resources={resources}
calendarsData={calendars}
calendar={'weekends'}
timeRangesData={timeRanges}
/>
Re: [REACT] Shared CrudManager demo in React?
Posted: Wed May 31, 2023 10:54 am
by alex.l
Hi, try to rename calendarsData to calendars and timeRangesData to timeRanges to be in same format as resources and events.
Re: [REACT] Shared CrudManager demo in React?
Posted: Wed May 31, 2023 11:00 am
by calendardeveloper
That works for timeRanges, but not for calendars.
Re: [REACT] Shared CrudManager demo in React?
Posted: Wed May 31, 2023 11:03 am
by alex.l
Please share your runnable app with us, we need to debug it to see what's the problem.