Angular Syncfusion Scheduler - 为单个事件设置颜色

Question

我正在使用 Angular EJ2 Syncfusion Scheduler，但我无法为每个事件设置单独的颜色，我只能为同一行中的一组事件设置颜色。

示例：在下面的调度程序中，我想为 David 设置蓝色，为 Peter 设置红色。我只能为一行事件设置相同的颜色，但不能为单个事件设置相同的颜色。

https://ej2.syncfusion.com/angular/demos/?_ga=2.228039129.553863759.1586967379-1144123233.1586967379#/material/schedule/external-drag-drop

Answer 1

事件的背景颜色是根据 colorField 设置的。如果我们想为每个事件设置单独的颜色，我们应该删除 colorField 并在事件对象中包含自定义字段以保持颜色。

 {
    Id: 10,
    Name: "David",
    StartTime: new Date(2018, 7, 1, 9, 0),
    EndTime: new Date(2018, 7, 1, 10, 0),
    Description: "Health Checkup",
    DepartmentID: 1,
    ConsultantID: 1,
    DepartmentName: "GENERAL",
    CategoryColor: "Blue"
  }

并且，通过使用如下所示的 eventRendered 事件，在事件呈现时将此颜色字段应用于事件。

oneventRendered(args: EventRenderedArgs): void {
        let categoryColor: string = args.data.CategoryColor as string;
        if (!args.element || !categoryColor) {
            return;
        }
        if (this.scheduleObj.currentView === 'Agenda') {
            (args.element.firstChild as HTMLElement).style.borderLeftColor = categoryColor;
        } else {
            args.element.style.backgroundColor = categoryColor;
        }
    }

如需更多参考，请参考以下演示 link 并回复我们以获得进一步的帮助。

样本：https://stackblitz.com/edit/angular-udwvvf-fbm7mw?file=app.component.ts

UG Link: https://ej2.syncfusion.com/angular/documentation/schedule/appointments/?no-cache=1#using-eventrendered-event

Angular Syncfusion Scheduler - 为单个事件设置颜色

Angular Syncfusion Scheduler - Set color to a single event

scheduler

syncfusion

angular

ejs-schedule

angular-scheduler