Our pure JavaScript Scheduler component


Post by mirkor89 »

Hi Bryntum team,

When I try to create a new event the page go back on the current time line, from every position/date that I'm. This happen since when I added to visible date:

visibleDate: {
            date: new Date(),
            block: 'start'
        },

Any solution?

In the video you can understood better.

https://drive.google.com/file/d/1cc_5NB5q4Acmm98iiLsj6GbDhy_4TXxH/view?usp=sharing

Thank you for your help,
Mirko


Post by saki »

Sounds weird. https://bryntum.com/docs/scheduler/api/Scheduler/view/TimelineBase#config-visibleDate says:

A date to bring into view initially on the scrollable timeline.

So the visibleDate is effective only initially, when the scheduler is created. There is only one scenario that could cause it and that is when the scheduler would be create and destroyed over and over, which is very unlikely.

We would need a runnable simple showcase to sort it out. Post please such app please (w/o node_modules).


Post by mirkor89 »

Hi Saky,

I checked if the scheduler gets destroyed and created different times but I couldn't find where and if it happen.
I attach a simple copy of app as you request. Following I text you a list of instruction to use it.

  • Double click on the scheduler to open the modal to chose a customer

  • Click on the arrow near a customer to select it

  • Click on the list of services to select one

  • Click on the scheduler to create an event

The problem is when I try to click anywhere, the app go back on the current timeline.
(You can try also to change a date)

if you comment the part of the code that follow:

visibleDate: {
            date: new Date(),
            block: 'start'
        },

File: useSchedulerConfig, line 40,

you get the application crash if you try to create an event in a future date.

Could you help me to understand what is going on?

Attachments
vertical.zip
(2.54 MiB) Downloaded 44 times

Thank you for your help,
Mirko


Post by alex.l »

When I open a modal, I see this warning in the console:

react_devtools_backend.js:4026 BryntumSchedulerComponent development warning!
"visibleDate" is a static config option for component constructor only. No runtime changes are supported!

This means that React tries to re-apply that config. It may happen because of re-rendering, and because const schedulerConfig is declared inside a component. So React do not understand that nothing changed and on next render it re-creates a const and re-apply the whole config.
To fix that you need to move const declaration our of scope of component function.

    // Scheduler config
    const schedulerConfig = {
       // ...
    }

// Scheduler component
const Scheduler = props => {
    const schedulerRef = useRef(null);
    
return <BryntumScheduler {...schedulerConfig} {...props} ref={schedulerRef} />;

It may need in some refactoring, because you use schedulerRef is some places.
You still can apply all configs what needs in schedulerRef separately, or use useState hook to prevent const re-creating.

All the best,
Alex


Post by mirkor89 »

I Alex,

Thank you so much, I fixed it. In the end I used a useMemo after the schedulerConfig as follow:

const memoizedConfig = useMemo(() => config, [])

I thought is a good solution to do not the refactor the whole code.

Thank you for your help,
Mirko


Post Reply