Angular Syncfusion Scheduler - Set color to a single event

Question

I am using Angular EJ2 Syncfusion Scheduler, but I am not able to set a separate color for each event, I can only set a color to a group of events which are in the same row.

Example: In the following scheduler I would like to set the blue color for David and red color for Peter. I can only set the same color to a row of events, but not to a single event.

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

score 1 · Accepted Answer · answered May 12 '20 at 07:07

The background color for the events is set based on the colorField. If we want to set the separate color for each event, we should remove the colorField and include the custom field in the event object to maintain the color.

 {
    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"
  }

and, apply this color field for the event while it's rendering by making use of eventRendered event like the below.

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

For more reference, please refer the below demo link and get back to us for further assistance.

Sample: 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

What about this one @vengatesh? https://stackoverflow.com/questions/61796226/drag-and-drop-from-ej2-angular-scheduler-to-a-div — etrupja, May 19 '20 at 16:38
@etrupja I have posted the response in that query. please check and get back to us for further assistance. — Vengatesh, May 21 '20 at 09:46

Angular Syncfusion Scheduler - Set color to a single event

1 Answers1