Different colors for same Room in React Schedule TimeLine Resource.

[Serkan Soydam]

Hi, 

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

[Swathi Ravi]

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

[dataSource.json]

{

    "timelineResourceData": [

        {

            "Id": 63,

            "Subject": "Functionality testing",

            "StartTime": "2021-04-04T03:30:00.000Z",

            "EndTime": "2021-04-04T05:00:00.000Z",

            "IsAllDay": false,

            "ProjectId": 1,

            "TaskId": 1,

            "CategoryColor": "#357cd2"

        },

        {

            "Id": 65,

            "Subject": "Test report validation",

            "StartTime": "2021-04-04T09:30:00.000Z",

            "EndTime": "2021-04-04T12:30:00.000Z",

            "IsAllDay": false,

            "ProjectId": 1,

            "TaskId": 2,

            "CategoryColor": "#1aaa55"

        }

    ]

}

[index.js]

function onEventRendered(args) {

    let categoryColor = args.data.CategoryColor;

    args.element.style.backgroundColor = categoryColor;

  }

 

return ( 

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

  );

Regards,

Swathi Ravi

[Serkan Soydam]

Thank you. It was really all i need.

[Ravikumar Venkatesan]

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