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?
Support Forum
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;
}
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()
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 (144.92 KiB) Viewed 604 times
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
Hello, I created a test case with a runnable app, see attachments
- Attachments
-
- custom-event-editor.rar
- (2.46 MiB) Downloaded 45 times
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