Our pure JavaScript Scheduler component
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} />
</>
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.
Attachments
Screenshot 2023-05-30 at 18.09.26.png (535.06 KiB) Viewed 307 times
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.
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);
}
}, []);
Could I just use the 2 schedulers with their own resources/events etc without using the ProjectModel? I guess that would work too?
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}
/>
Hi, try to rename calendarsData
to calendars
and timeRangesData
to timeRanges
to be in same format as resources
and events
.
That works for timeRanges, but not for calendars.
Please share your runnable app with us, we need to debug it to see what's the problem.