计划程序项颜色

我将剑道用于Angular的调度程序小部件,使用以下代码:

import { Component, OnInit } from '@angular/core';
import { SchedulerEvent } from '@progress/kendo-angular-scheduler';
import { ClaimsMapResourcesService } from '../resource-list/resource-list.service';
import { ResourceUnavailabilityService } from './resource-unavailability.service';
import { IResourceItem } from '../resource-list/resource-list.interface';

@Component({
    selector: 'resource-unavailability',
    templateUrl: './resource-unavailability.component.html'
})
export class ResourceUnavailabilityComponent implements OnInit {

    selectedDate = new Date();
    unavailabilities: SchedulerEvent[];
    group = {
        resources: ['Resources'],
        orientation: 'vertical'
    };
    resources = [{
        name: 'Resources',
        data: [
            { label: 'No Resources', value: '1'}
        ],
        field: 'resourceId',
        valueField: 'value',
        textField: 'label'
    }];

    constructor(private resourcesService: ClaimsMapResourcesService,
                private resourceUnavailabilityService: ResourceUnavailabilityService) {}

    ngOnInit() {
        this.unavailabilities = [];
        this.resourcesService.resources.Refresh.subscribe(resourceItems => this.getUnavailabilites(resourceItems));
    }

    private getUnavailabilites(resources: IResourceItem[]): void {
        const resourceIds = resources.map(resource => resource.Id);
        this.resourceUnavailabilityService.getUnavailabilities(resourceIds).subscribe(() => this.updateConfig());
    }

    private updateConfig(): void {
        const groupData = this.resourcesService.resources.RecordsService.records.map(
            unavailability => {
                return {
                    value: unavailability.Id,
                    label: unavailability.ResourceFullName
                };
            }
        );
        this.resources[0].data = groupData;

        this.unavailabilities = this.resourceUnavailabilityService.unavailabilities.records.map(unavailability => (
            {
                id: unavailability.Id,
                start: new Date(unavailability.StartDate),
                end: new Date(unavailability.EndDate),
                title: (unavailability.Type === 'ResourceUnavailability' ? 'Unavailable' : 'Appointment'),
                description: (unavailability.Type === 'ResourceUnavailability' ? 'Unavailable' : 'Appointment'),
                resourceId: unavailability.ResourceId
            } as SchedulerEvent
        ));
    }
}

这是因为调度程序的渲染没有任何问题。我要做的是根据描述设置在调度程序中呈现的项目的颜色。

resources = [{
    name: 'Resources',
    data: [
        { label: 'foo', value: '1', color: 'red' },
        { label: 'bar', value: '2', color: 'green' }
    ],
    field: 'resourceId',
    valueField: 'value',
    textField: 'label',
    colorField: 'color'
}];

但是这会为该资源设置每个项目的颜色,而我正在尝试设置特定项目的颜色。