Our pure JavaScript Scheduler component


Post 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} />
    </>

Post 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.

Attachments
Screenshot 2023-05-30 at 18.09.26.png
Screenshot 2023-05-30 at 18.09.26.png (535.06 KiB) Viewed 233 times

Best regards,
Márcio


Post 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.


Post by marcio »

I suggest you use a listener like https://bryntum.com/products/schedulerpro/docs/api/Scheduler/view/SchedulerBase#event-renderRows inside the first scheduler configuration to add a filter to the resourceStore https://bryntum.com/products/schedulerpro/docs/api/Scheduler/data/ResourceStore#function-addFilter

And on the second one, you would remove the filter from the store (as you're sharing the same resourceStore from the same project).

Regarding the scrolling, we have a partner config just for that https://bryntum.com/products/schedulerpro/docs/api/Scheduler/view/TimelineBase#config-partner

And an example here https://bryntum.com/products/schedulerpro/examples/resourceutilization/

Best regards,
Márcio


Post 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);
    }
  }, []);

Post 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?


Post by calendardeveloper »

I tried it - seems to work. But there are a few issues :-

  1. I lose the weekends and the timeranges - they don't show up anymore.
  2. 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}
      />

Post by alex.l »

Hi, try to rename calendarsData to calendars and timeRangesData to timeRanges to be in same format as resources and events.

All the best,
Alex


Post by calendardeveloper »

That works for timeRanges, but not for calendars.


Post by alex.l »

Please share your runnable app with us, we need to debug it to see what's the problem.

All the best,
Alex


Post Reply