Our pure JavaScript Scheduler component


Post by lucadiba »

Hello, I created a today button in my tbar, it changes the day correctly in the grid, but it doesn't change the datepicker value, how can I modify it?

Attachments
Immagine 2022-05-09 123011.jpg
Immagine 2022-05-09 123011.jpg (72.29 KiB) Viewed 676 times
Immagine 2022-05-09 122942.jpg
Immagine 2022-05-09 122942.jpg (82.53 KiB) Viewed 676 times

Post by mats »

You should listen to https://bryntum.com/docs/scheduler/api/Scheduler/view/TimelineBase#event-dateRangeChange on the Scheduler and update your date field accordingly. You can set a https://bryntum.com/docs/scheduler/api/Core/widget/Widget#config-ref on the datefield config to identify it and access it from the scheduler instance like so:

scheduler.on('dateRangeChange', () => {
    scheduler.widgetMap.yourRef.value = scheduler.startDate;
}

Post by lucadiba »

I set dateRangeChange in mi listeners but it doesn't run when I change the date


Post by mats »

Works for me, go to https://bryntum.com/examples/scheduler/vertical/

In console add.

scheduler.on('dateRangeChange', () => {
    console.log('change')
})

Then type

scheduler.startDate = new Date()

Post by lucadiba »

It works in your example, but how can I apply it to my code? My listeners are passed to the scheduler component as a state (as shown in your examples), so how and where can I add it?

I tried adding it as any other listener (see screenshot) but it does not work.

Attachments
Immagine 2022-05-18 112256.jpg
Immagine 2022-05-18 112256.jpg (144.92 KiB) Viewed 582 times

Post by alex.l »

Please share more context, I only see you defined method but how did you use that?
Better to attach you runnable app here, so we will debug and fix it right away.

If you are talking about how to get field in the listener, then check docs https://bryntum.com/docs/scheduler/api/Scheduler/view/TimelineBase#event-dateRangeChange
there is a source param, which is scheduler in fact. Then do

source.widgetMap.yourRef.value = scheduler.startDate;

All the best,
Alex


Post by lucadiba »

Hello, I created a test case with a runnable app, see attachments

Attachments
custom-event-editor.rar
(2.46 MiB) Downloaded 44 times

Post by alex.l »

Looks like a bug in wrapper, we will have a look, here is a ticket https://github.com/bryntum/support/issues/4649
Here is a code snippet how to fix Today button

        tbar: [
            {
                type: 'date',
                ref : 'startDate', // add reference for widgetMap
                value: 'up.startDate',
                step: '1d',
                format: 'DD/MM/YY',
                onChange({ value }) {
                    const schedulerRef = scheduler.current?.instance;

                    // Preserve time, only changing "day"
                    const diff = DateHelper.diff(
                        DateHelper.clearTime(schedulerRef.startDate),
                        value,
                        'days'
                    );
                    schedulerRef.startDate = DateHelper.add(
                        schedulerRef.startDate,
                        diff,
                        'days'
                    );
                }
            },
            {
                type: 'button',
                text: 'Today',
                icon: 'b-fa-calendar',
                onAction() {
                    const schedulerRef = scheduler.current?.instance;
                    
                    // change value in datefield, it will update startDate of the scheduler 
                    schedulerRef.tbar.widgetMap.startDate.value = getTimeParams().startDate;
                    schedulerRef.endDate = getTimeParams().endDate;
                }
            }
        ]
    }

All the best,
Alex


Post by lucadiba »

Thanks Alex, it works.


Post by lucadiba »

Hello alex, I would like to reopen this topic because I found out that it take me back to the current day but not on the current time, how can I solve this?

Thanks.


Post Reply