How to apply custom text to Angular Schedule toolbar 'Today' item based on view
This knowledge base article explains the way to apply the custom text to the EJ2 Angular Schedule Today item in the header bar based on the selected view.
Apply custom text to the “Today” item based on the selected view
Step 1: Create an Angular Scheduler by referring the following user guide link.
https://ej2.syncfusion.com/angular/documentation/schedule/getting-started/#getting-started
Step 2: Let’s bind the actionComplete event to the Schedule for setting upto add custom text to the Ttoday item in the scheduler header as shown in the below following code.
[app.component.html]
<ejs-schedule #scheduleObj width='100%' height='650px' [selectedDate]="selectedDate" [eventSettings]="eventSettings" [(currentView)]="currentView" (actionComplete)='onActionComplete($event)'> </ejs-schedule>
Step 3: Fetch the Angular Schedule instance with the help ofusing the ViewChild property of the Angular as shown in the below following code.
[app.component.ts]
import { ViewChild } from "@angular/core";
import { ScheduleComponent } from "@syncfusion/ej2-angular-schedule";
export class AppComponent {
@ViewChild("scheduleObj", { static: false })
public scheduleObj: ScheduleComponent;
}
Step 4: Use the code shown below in the actionComplete event to change the Ttoday item text based on the selected view.
[app.component.ts]
public onActionComplete(args: ActionEventArgs): void {
if (args.requestType === "viewNavigate" || args.requestType === "toolBarItemRendered") {
let text = "Current " + this.scheduleObj.currentView;
let todayElement = this.scheduleObj.element.querySelector(".e-schedule .e-schedule-toolbar .e-today .e-tbar-btn-text");
todayElement.innerHTML = text;
}
}
Sample - You can refer to this GitHub sample for this functionality.
