How to customize the Scheduler Toolbar
This knowledge base explains the way to customize scheduler toolbar items.
Step 1: Bind the actionBegin event to rearrange the default toolbar items as shown in the following code example.
onActionBegin(args: ActionEventArgs): void {
if (args.requestType === 'toolbarItemRendering') {
const arg = args as any;
const item0 = arg.items[0];
const item1 = arg.items[1];
item1.align = 'right';
// Getting date range text
let item2 = arg.items[2];
const dateRangeText = {
align: 'center',
text: item2.text,
cssClass: 'e-custom'
};
item2 = dateRangeText;
// Rearranging the toolbar items
arg.items[0] = item0;
arg.items[1] = item2;
arg.items[2] = item1;
}
}
actionBegin : https://ej2.syncfusion.com/angular/documentation/api/schedule/#actionbegin
Step 2: Bind the dataBinding event to change the date range text on initial loading as shown in the following code example.
onDataBinding(): void {
if (this.flag) {
this.dateRangetext();
this.flag = false;
}
}
dataBinding: https://ej2.syncfusion.com/angular/documentation/api/schedule/#databinding
Step 3: Bind the actionComplete event to change the date range text on navigation as shown in the following code example.
onActionComplete(args: ActionEventArgs): void {
if (args.requestType === 'dateNavigate') {
this.dateRangetext();
}
}
actionComplete: https://ej2.syncfusion.com/angular/documentation/api/schedule/#actioncomplete
Step 4: Add the method and its code as follows.
public dateRangetext(): void {
const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
let startDate = (this.scheduleObj.getCurrentViewDates()[0] as Date);
let endDate = this.scheduleObj.getCurrentViewDates()[this.scheduleObj.getCurrentViewDates().length - 1] as Date;
let startYear = startDate.getFullYear() === endDate.getFullYear() ? '' : ', ' + startDate.getFullYear();
let startTxt = '' + monthNames[startDate.getMonth()] + ' ' + startDate.getDate() + '' + startYear + ' -';
let endTxt = ' ' + monthNames[endDate.getMonth()] + ' ' + endDate.getDate() + ', ' + endDate.getFullYear();
(document.querySelector('.e-toolbar-item.e-custom') as HTMLElement).innerText = startTxt + endTxt;
}
Step 5: Run the sample, the date range text will be centre aligned in the toolbar as shown below. 
Figure 1: Customized Scheduler Toolbar
Refer to the example from the following GitHub link.
Example – Scheduler with customized toolbar
