Angular10同步如何为约会事件赋予动态颜色

Question

我正在处理角应用程序，在其中我使用同步调度器来显示日历上的约会。我想给动态颜色或类的事件，以便我可以做一些造型。我不知道该怎么做。我能做的唯一方法就是在事件中添加类别颜色。

​

​

我想实现的方式，在日历上的事件，如图像，但不只是一种颜色。我想用不同的颜色。下面是我的代码

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

有什么方法可以将类添加到我的事件中，还是可以用不同的颜色为我的事件添加样式。

Answer 1

通过使用约会模型中的cssClass字段，可以对事件使用不同的颜色或类。如需更多参考资料，请浏览以下网页。

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