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?