I am working on angular application where I am using syncfusion scheduler to show appointments on calendar. I want to give dynamic color or class to events so that I can do some styling. I am not sure how to do it. The only way I am able to do is by adding category color on events

I want to achieve to style the events on calendar like image but not with just one color. I want to use different colors. Below is my code

 <ejs-schedule #scheduleObj class="schedule" cssClass='schedule-group-custom-work-days' width='100%' height='650px'
  [selectedDate]="selectedDate" [eventSettings]='eventSettings' [showQuickInfo]='showQuickInfo'
  (cellDoubleClick)='cellDoubleClick($event)' (popupOpen)='onPopupOpen($event)'
  (actionComplete)="onActionComplete($event)" (eventRendered)="onEventRendered($event)" 
  (renderCell)="onRenderCell($event)" [workDays]='workWeekDays'>
</ejs-schedule>

component.ts

@ViewChild('scheduleObj')
  public scheduleObj!: ScheduleComponent;
  public eventSettings: EventSettingsModel = { dataSource: [] };
  public selectedDate: Date = new Date();
  public workWeekDays!: number[];
  events: any[] = [];

getAppointment(){
//api call and got response

const events: any[] = [];

events.push({
            Id: appointment.id.toString(),
            Subject:
            appointment.patientFirstName + ' ' + appointment.patientLastName,
            // BELOW IS THE VARIABLE WHICH I AM USING FOR ADDING BACKGROUND COLOR AS RED
            CategoryColor: "red"
            StartTime: startDate,
            EndTime: endDate
          });
this.events = events;

this.eventSettings = {
     dataSource: <Object[]>extend([], events, null, true)
};

Is there a way I can add class to my events or some way to style my events with different different colors.