1. Home
  2. Forum
  3. Angular - EJ 2
  4. Background color event only changes "Subject" part of the event, not the complete event that is shown in the scheduler

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

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




5 Replies
VM Vengatesh Maniraj Syncfusion Team March 20, 2020 05:24 AM UTC

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 


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

Regards, 
Vengatesh. 


TH Tim Hartog March 20, 2020 02:42 PM UTC

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

VM Vengatesh Maniraj Syncfusion Team March 23, 2020 05:04 AM UTC

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. 


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. 


TH Tim Hartog April 8, 2020 12:06 PM UTC

Hello Vengatesh,

Solved the problem, thanks for the support.

Kind regards,

Bob

VM Vengatesh Maniraj Syncfusion Team April 9, 2020 05:25 AM UTC

Hi BoB, 
 
You are most welcome. 
 
We are happy that your problem has resolved. 
 
Regards, 
Vengatesh   
  


Loader.
Up arrow icon