Angular10 Syncfusion how to give dynamic colors to appointment events

Question

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.

Answer 1

You can use the different color or class to the events by making use of the cssClass field in the appointment model. For more references, please visit to the below page.

https://ej2.syncfusion.com/angular/documentation/schedule/appointments/#using-cssclass