Our pure JavaScript Scheduler component


Post by mirkor89 »

Hi Bryntum team,

I'd like to try to resolve this waring in my application.

BryntumSchedulerComponent development warning!
"tbar" is a static config option for component constructor only. No runtime changes are supported!

I already open a ticket about that and I found a solution of the DOM reload with a useMemo.

Here the code:

const config = {
...
}
 const memoizedConfig = useMemo(() => config, [])

return {
    ...memoizedConfig,
 
    eventTooltipFeature: {
        template: data => {
            let totalTimeSer = 0
            appointments.filter(app => app.appId === data.eventRecord.data.appId).forEach(service => { otalTimeSer += service.MM_TotaliC })
            return `<div class="flex flex-col space-y-1.5">
                    <div class="flex justify-between">
                        <span class="font-bold capitalize mr-2">${data.eventRecord.data.name</span>
                        <span>${totalTimeSer} min</span>
                    </div>
                    ${events.filter(event => event.appId === data.eventRecord.data.appId).map(service => `
                        <div class="flex justify-between gap-x-4 leading-none">
                            <span class="font-light w-full whitespace-nowrap">${service.service}</span>
                            <span class="font-semibold whitespace-nowrap w-full text-right">
                                ${new Date(service.startDate).toLocaleTimeString('it-IT', optionTime)} - ${new Date(service.endDate).toLocaleTimeString('it-IT', optionTime)}
                            </span>
                        </div>
                        `
            ).join('')}
                </div>
                    `
        }
    },
    tbar: {
        items: [
          ...
                    ]
                },
            }
        ]
    }
}
}

The problem is that I need to update the data inside the eventTooltip every time I go with my cursor on a different event on my scheduler.

Actually this is only an example I also have to update the eventStore often.

Could you explain me how can I update the data inside the config file without reload the config every time?

Attachments
Immagine 2022-06-09 103157.png
Immagine 2022-06-09 103157.png (15.11 KiB) Viewed 725 times

Thank you for your help,
Mirko


Post by tasnim »

Hi,
To get rid of this waring, you should use the config from external file or use useState() for tbar config.
Otherwise React will recreate tbar on each rendering cycle and you will receive this warning.

Here is an example code snippet of using the config from external file :

import { schedulerConfig } from './AppConfig';
import './App.scss';

const App = () => {
    return (
        <Fragment>
            <BryntumScheduler {...schedulerConfig} />
        </Fragment>
    );
};

Here is an example code snippet of using the config with useState() :

function App() {
    const [tbar, setTbar] = useState({ /*some config here*/  });

return (
    <>
        <BryntumScheduler
            {...schedulerConfig}
            tbar = {tbar}
        />
    </>
);
}

export default App;

The problem is that I need to update the data inside the eventTooltip every time I go with my cursor on a different event on my scheduler.

Actually this is only an example I also have to update the eventStore often.

Could you Please explain a bit more, that what exactly you want to achieve and why you need to update the eventStore every time the tooltip opens?

Could you explain me how can I update the data inside the config file without reload the config every time?

Please let me know which data you want to update?


Post by mirkor89 »

Hi Tasnim,

Thank you for your help. Save the tbar inside a useState works well, when I show the tooltip the warning is not appear anymore. But in the end I used a useMemo because sometime I need to update the tbar.
For example I need to call a api event every time a week change inside the date picker. And it doesn't work with a useState. Also in this case when I call the api every Monday of the week the warning appear again.

Another example is about the useListeners: I took it from the react-vertical-exemple by Bryntum doc.
Inside that there are a lot of functions to manage my events. But every time I do something I receive the warning about this component.

Warning:

BryntumSchedulerComponent development warning!
"listeners" is a static config option for component constructor only
Anyway I have a lot of this type of warning inside my application related to different part.

That I'd like to understand is how can I fix this waring in the different part of my scheduler. I think they have a common solution.

I attach a simple copy of app. 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

Attachments
vertical.zip
(2.54 MiB) Downloaded 36 times

Thank you for your help,
Mirko


Post by tasnim »

Because of errors, I can not run your application, Could you please provide a test case that I can run the app without any errors and give you the solution right away?


Post by mirkor89 »

Hi Tasnim,

Ok I attach the new test case without node module.
Could you please just check the warning about the useListeners, because it's a test case and I also have others warning that I don't have on my application.

Attachments
vertical.zip
(2.54 MiB) Downloaded 44 times

Thank you for your help,
Mirko


Post by saki »

I couldn't make it working; here are the first errors:

Screen Shot 2022-06-10 at 19.44.12.png
Screen Shot 2022-06-10 at 19.44.12.png (1.59 MiB) Viewed 663 times

Without running the application I can only say generally that warnings you saw must be fixed as they could be symptom of something more serious. The reason is that your React application sets the changed values of the config options at runtime. That is not allowed. Only properties can be set at runtime, not configs.


Post by marcio »

Hey Mirko,

As Saki commented, configs cannot be updated during runtime, to achieve the behavior that you wanted in the useListeners hook, you'll need to use https://bryntum.com/docs/calendar/api/Core/mixin/Events#function-addListener and https://bryntum.com/docs/calendar/api/Core/mixin/Events#function-removeListener

I attached the suggestion useListeners file, with that one you won't have the warning being displayed.

Please let me know if that worked as expected.

Thanks,

Attachments
useListeners.js.zip
(1.68 KiB) Downloaded 54 times

Best regards,
Márcio


Post by mirkor89 »

Hi Marcio,

thank you so much for your suggestion. I understood how I have to use the useEffect inside the useListeners to remove the warning. It's work perfectly!
Thank you so much!

Thank you for your help,
Mirko


Post by mirkor89 »

Hi Bryntum team,

I still have a little problem with the same warning about tbar. As Tasnim said, save the tbar iside a useState works well, but I can't update the data from redux inside the config.
I should conditional an api call on my picker date button inside the tbar config. To do that I use some data from redux. I saw inside the config I didn't receive any update about external constants.
I also need to condition others function in the next tasks and I'd like to use some useState?

const { agendaDate } = useSelector(state => state.settings)

tbar: {
	items: [
            {
                type: 'date',
                value: 'up.startDate',
                ref: 'datePicker',
                step: '1d',
                format: 'DD/MM/YY',
                onChange({ value }) {    
if (agendaDate) { getApointments() // funcions to call api } const scheduler = schedulerRef.current?.instance // Preserve time, only changing "day" const diff = DateHelper.diff( DateHelper.clearTime(scheduler.startDate), value, 'days' ) scheduler.startDate = DateHelper.add( scheduler.startDate, diff, 'days' ) } }, ] }

Is it possibile? How can I access to my state outside the config?

Thank you for your help,
Mirko


Post Reply