Background color event only changes "Subject" part of the event, not the complete event that is shown in the scheduler

[Tim Hartog]

Hi,

I am struggling with dynamic assignment of the background color of the complete event that is shown in the scheduler.

In the HTML I have the property (eventRendered) assigned to the method that is shown underneath.

oneventRendered(args: EventRenderedArgs): void {
  console.log('Event is rendered: ', args);
  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 events that have a long duration and a short subject only the subject part of the event becomes this color.

I tried to change the code to args.element.firstChild.parentElement but this has no effect.

Is there another way to get the complete event coloured with the value of categoryColor?

Kind regards,

Bob Fiering

[Vengatesh Maniraj]

Hi Bob Fiering, 

Greetings from Syncfusion Support. 

We have checked the shared codes and it could be working fine at our end. Please refer the below image 

  

Code:  

 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; 

        } 

    } 

And for the same, we have prepared the sample which is available in below link 

Sample: https://stackblitz.com/edit/angular-fknfan?file=app.component.ts 

Kindly check the above sample and if you still face the problem please share us more details to serve you better. 

Regards, 

Vengatesh. 

[Tim Hartog]

Hi Vengatesh,

I am not working with the calendar view, but I am working in time-line view with resources.

The color is not based on a resource but based on a status on which the value is stored in the data of the planning-event.

Could there be a difference?

Kind regards,

Bob

[Vengatesh Maniraj]

Hi Bob, 

Thanks for the update. 

Based on your updated details, we have modified the sample with Timeline views and resources and that can be available in below link. 

Sample:  https://stackblitz.com/edit/angular-69nm2a?file=app.component.html 

In the above sample, we have applied the category color of the events based on the status. 

Data.ts 

{ 

        Id: 2, 

        Subject: 'Art & Painting Gallery', 

        StartTime: new Date(2018, 1, 12, 12, 0), 

        EndTime: new Date(2018, 1, 12, 14, 0), 

        EventType: 'public-event', 

        City: 'Costa Rica', 

        CategoryColor: '#357cd2', 

        TaskId: 1 

    }, { 

        Id: 3, 

        Subject: 'Dany Birthday Celebration', 

        StartTime: new Date(2018, 1, 13, 10, 0), 

        EndTime: new Date(2018, 1, 13, 11, 30), 

        EventType: 'family-event', 

        City: 'Kirkland', 

        CategoryColor: '#7fa900', 

        TaskId: 3 

    }, { 

        Id: 4, 

        Subject: 'John Wedding Anniversary', 

        StartTime: new Date(2018, 1, 14, 9, 0), 

        EndTime: new Date(2018, 1, 14, 10, 0), 

        EventType: 'family-event', 

        City: 'Redmond', 

        CategoryColor: '#ea7a57', 

        TaskId: 4 

    }, 

App.component.ts 

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; 

    } 

  } 

Output:  

 

Here the appointment color in not based on the resources but is based on the category color which we already mentioned in the event object. 

Kindly check the above and get back to us if you need any further assistance. 

Regards, 

Vengatesh. 

[Tim Hartog]

Hello Vengatesh,

Solved the problem, thanks for the support.

Kind regards,

Bob

[Vengatesh Maniraj]

Hi BoB, 

 

You are most welcome. 

 

We are happy that your problem has resolved. 

 

Regards, 

Vengatesh