Angular Планировщик Syncfusion - Установить цвет для одного события - PullRequest
Новая
       71

Angular Планировщик Syncfusion - Установить цвет для одного события

0 голосов
/ 06 мая 2020

Я использую Angular EJ2 Syncfusion Scheduler, но я не могу установить отдельный цвет для каждого события, я могу установить цвет только для группы событий, которые находятся в одной строке.

Пример: В следующем планировщике я хотел бы установить синий цвет для David и красный цвет для Peter . Я могу установить один и тот же цвет только для ряда событий, но не для одного события.

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

1 Ответ

1 голос
/ 12 мая 2020

Цвет фона для событий устанавливается на основе 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

...