How to apply custom text to Angular Schedule toolbar 'Today' item based on view

This article explains the way to apply 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 to the following user guide link.

https://ej2.syncfusion.com/angular/documentation/schedule/getting-started

Step 2: Let’s bind the actionComplete event to the Schedule for setting up to add custom text to the Today item in the scheduler header as shown in the code below.

[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 of the ViewChild property of Angular as shown in the 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 Today 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.

Conclusion

We hope you enjoyed learning about how to apply custom text to Angular Schedule toolbar 'Today' item based on view.

You can refer to our Angular feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our Angular schedular example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)

How to apply custom text to Angular Schedule toolbar 'Today' item based on view

Conclusion

Access denied