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.
