Different colors for same Room in React Schedule TimeLine Resource.
3 Replies
SIGN IN To post a reply.
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
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
Thank you. It was really all i need.
You're welcome! Please get back to us if you need any other assistance.
