Our pure JavaScript Scheduler component


Post by mirkor89 »

Hello Bryntum team,

I shoud 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 task 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 by marcio »

Hey Mirko,

You could use a custom event listener https://www.bryntum.com/docs/scheduler/api/Core/widget/Toolbar#function-addListener

And then trigger it inside the onChange method, with that you will be able to access the state outside the config https://www.bryntum.com/docs/scheduler/api/Core/widget/Toolbar#function-trigger

Best regards,
Márcio


Post by mirkor89 »

Hey Marcio,

Thank you so much for your suggestion. I checked the docs that you send me, but I can't apply addListener function and trigger.
Could you please text me a fast example with the code on top. Unfortunately I couldn't get it to work with my different tests.

Thank you for your help,
Mirko


Post by marcio »

Hey Mirko,

I attached an example file with several comments about how to proceed with the custom event.

Attachments
App.js.zip
(1.81 KiB) Downloaded 37 times

Best regards,
Márcio


Post by mirkor89 »

Hi Marcio,

Thank you so much for your example, I really appreciated.
I try to edit my code but the solution doesn't work. I created a use case based on vertical bryntum.
I attach it without node modules.

As you can see from the console log the state inside onChange of tbar doesn't change. I can't understand where is the problem.

Attachments
vertical.zip
(2.54 MiB) Downloaded 31 times

Thank you for your help,
Mirko


Post by marcio »

Hey Mirko,

You need to put the config inside a useState, I added an updated Scheduler.js file, and with that everything should be working just fine.

Attachments
Scheduler.js.zip
(2.86 KiB) Downloaded 35 times

Best regards,
Márcio


Post by mirkor89 »

Hey Marcio,

thank you a lot for your availability. Now it's work well. :D

Thank you for your help,
Mirko


Post Reply