[INFO REQ] Cannot get the toolbar buttons to update scheduler

[cubrilo]

Hi,

I am trying to use the toolbar like it is done in your example Timeranges demo,
so my code looks something like this:

this.scheduler = new Scheduler({
                    project: {
                        resourceStore: this.vm.resourceStore,
                        eventStore: this.vm.eventStore,
                        assignmentStore: this.vm.assignmentStore
                    },
                    ...this.vm.calendarOptions,
                    tbar: toolbarConfigurator(this.scheduler)
                })

So I am initializing scheduler after the data is fetched.

schedulerConfigurator is imported and used to define the tbar. It looks something like this:

const toolbarConfigurator = (scheduler: Scheduler): any[] => {
    return [
        {
            type: 'buttongroup',
            items: [
                {
                    type: 'button',
                    icon: 'b-fa-angle-left',
                    tooltip: 'View previous day',
                    onAction() {

                }
            },
            {
                type: 'button',
                ref: 'todayButton',
                text: 'Today',
                tooltip: 'View today, to see the current time line',
                onAction() {
                    const today = DateHelper.clearTime(new Date());
                    today.setHours(5);
                    scheduler.setTimeSpan(today, DateHelper.add(today, 18, 'hour'));
                }
            },
            {
                type: 'button',
                icon: 'b-fa-angle-right',
                tooltip: 'View next day',
                onAction() {
                    scheduler.shiftNext();
                }
            }
        ]
    },
    {
        type: 'datefield',
        //label      : 'View date',
        inputWidth: '8em',
        value: new Date(2017, 1, 7),
        editable: false,
        listeners: {
            change: ({ value }) => scheduler.setTimeSpan(DateHelper.add(value, 8, 'hour'), DateHelper.add(value, 22, 'hour'))
        }
    }
]
}

Loading works fine, but when I try to press the Today button, or change the date, the scheduler instance that is passed to the button action is always undefined. I don't see any major difference in my code, compared to your example, am I missing something?

[alex.l]

Hi cubrilo,

In our example we did not pass this.scheduler as a parameter, we used a global variable.
In your case this.scheduler is basically undefined at the moment when yours toolbarConfigurator has been called.

All the best,
Alex

[cubrilo]

How can I add toolbar after the initialization is done? I've searched but didn't find anything that would work.

[alex.l]

If you need to add tbar items after initialization, you could init it empty:

this.scheduler = new Scheduler({
                    project: {
                        resourceStore: this.vm.resourceStore,
                        eventStore: this.vm.eventStore,
                        assignmentStore: this.vm.assignmentStore
                    },
                    ...this.vm.calendarOptions,
                    tbar: { }
                })

and after that add items using https://bryntum.com/docs/scheduler-pro/#Core/widget/Toolbar#function-add

this.scheduler.tbar.add([
        {
            type: 'buttongroup',
            items: [
                {
                    type: 'button',
                    icon: 'b-fa-angle-left',
                    tooltip: 'View previous day',
                    onAction() {

            }
        },
        {
            type: 'button',
            ref: 'todayButton',
            text: 'Today',
            tooltip: 'View today, to see the current time line',
            onAction() {
                const today = DateHelper.clearTime(new Date());
                today.setHours(5);
                scheduler.setTimeSpan(today, DateHelper.add(today, 18, 'hour'));
            }
        },
        {
            type: 'button',
            icon: 'b-fa-angle-right',
            tooltip: 'View next day',
            onAction() {
                scheduler.shiftNext();
            }
        }
    ]
},
{
    type: 'datefield',
    //label      : 'View date',
    inputWidth: '8em',
    value: new Date(2017, 1, 7),
    editable: false,
    listeners: {
        change: ({ value }) => scheduler.setTimeSpan(DateHelper.add(value, 8, 'hour'), DateHelper.add(value, 22, 'hour'))
    }
}
]);