时间戳

首页 > 解决方案 > Angular Syncfusion Scheduler - 将颜色设置为单个事件

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

问题描述

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

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

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

标签： angularschedulersyncfusionangular-schedulerejs-schedule

解决方案

事件的背景颜色是根据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;
        }
    }

如需更多参考，请参阅下面的演示链接，并与我们联系以获得进一步的帮助。

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

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

推荐阅读