Estoy trabajando en una aplicación angular donde estoy usando el programador syncfusion para mostrar citas en el calendario. Quiero dar color dinámico o clase a los eventos para poder hacer algo de estilo. No estoy seguro de cómo hacerlo. La única forma en que puedo hacerlo es agregando un color de categoría en los eventos.

Quiero lograr diseñar los eventos en el calendario como una imagen pero no con un solo color. Quiero usar diferentes colores. A continuación se muestra mi código

 <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>

componente.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) };

¿Hay alguna manera de que pueda agregar clase a mis eventos o alguna forma de diseñar mis eventos con diferentes colores?