How to change the appointment indicator color on Scheduler year and month agenda views in Angular?

This article explains how to change the appointment indicator color on Scheduler year and month agenda views in Angular.

The following steps used to change the appointment indicator color on Angular Scheduler year and month agenda views.

Step 1: Implement the Scheduler component using our Getting Started documentation.

Step 2: To achieve the event indicator "dot" in the year and month agenda view, utilize the dataBound event of the Schedule.

Step 3: To get the data collection of event using the getEvents method in Schedule component.

[app.component.ts]

public onDataBound(): void {

    //To get appointments

    if(this.scheduleObj.currentView == 'Year') {

      var appointments = document.querySelectorAll('.e-appointment');

    }

    else {

      var appointments = document.querySelectorAll('.e-appointment-indicator');

    }

    for(let i =0; i< appointments.length; i++){

        var date = appointments[i].parentElement.dataset.date;

        var event = this.scheduleObj.getEvents(new Date(+date),null, true); //To get event

        var categorycolor = event[0].CategoryColor;

        (appointments[i] as HTMLElement).style.backgroundColor = categorycolor;

    }

  }

Refer to the working sample for additional details and implementation: [Schedule-YearView-Customization - StackBlitz]

See Also

• Customizing the weekend cells background-color