We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Different colors for same Room in React Schedule TimeLine Resource.


I am using React scheduler TimeLine resource view.

I am trying to make my bar color's different for every single bar even though they belong same room or same Owner.  Colors can change with colorField but it change as room or owner. I want them be different even they belon the same room or owner. I could'nt find any way to do this. Is there any way?

Thank you

3 Replies 1 reply marked as answer

SR Swathi Ravi Syncfusion Team December 13, 2022 07:47 AM UTC

Hi Serkan,

To apply the color to the appointment element, you need to provide the color in the appointment field(here, we provided the color in the CategoryColor field of the appointment). So, that we can use the Schedule's eventRendered event to set the color to the respective appointment element, as shown in the snippet below.

Sample: https://stackblitz.com/edit/react-1tinms-p8yrrv?file=index.js

Demo: https://ej2.syncfusion.com/react/demos/#/bootstrap5/schedule/local-data

Api: https://ej2.syncfusion.com/react/documentation/api/schedule/#eventrendered



    "timelineResourceData": [



            "Subject""Functionality testing",










            "Subject""Test report validation",











function onEventRendered(args) {

    let categoryColor = args.data.CategoryColor;

    args.element.style.backgroundColor = categoryColor;



return ( 

 <ScheduleComponent eventRendered={onEventRendered.bind(this)}</ScheduleComponent>



Swathi Ravi

Marked as answer

SS Serkan Soydam December 13, 2022 01:49 PM UTC

Thank you. It was really all i need.

RV Ravikumar Venkatesan Syncfusion Team December 14, 2022 05:33 AM UTC

You're welcome! Please get back to us if you need any other assistance.

Live Chat Icon For mobile
Up arrow icon