Our pure JavaScript Scheduler component


Post by andreas-sakellariou »

Hello all,

I have put a DateField on a tbar in order to select the visibleDate (not startDate) of the scheduler. My code is as following:

const useSchedulerConfig = () => {
  return {
    tbar: [{
      id: 'picker',
      type: 'date',
      text: 'Date Picker',
      label: 'SELECT DATE',
      step: '7d',
      ref: 'datePickerRef',
      value: 'up.startDate',
      textAlign: 'center',
      editable: true,
      format: 'DD/MM/YY',
      onChange({ value }) {
        const scheduler = this.up('SchedulerPro', true);
        scheduler.scrollToDate(value, { block: 'start' });
      }
    },
    ..................

The above works one-way that is the user is able to select a date which becomes the first (leftmost) visible date of the scheduler.

I would like to know how to update the DateField when the user changes the visibleDate by scrolling or zooming etc. I found the event "visiblerangechanged" but I am unable to reference the instance of the DateField which is located in the tbar.

Your suggestion would be welcome.


Post by Animal »

Use the ref:

myScheduler.widgetMap.datePickerRef`

The infinite scroll example does something similar, take a look at the app source: https://bryntum.com/examples/scheduler/infinite-scroll/


Post by andreas-sakellariou »

Perfect! That's it! Thank you.


Post Reply