Custom Event Styling in React Scheduler

You can use the onBeforeEventRender event handler to customize the events.

A sample implementation could look like this:

onBeforeEventRender: (args) => {
  if(args.data.status === "completed") {
      args.data.backColor = "#008000"; // Green for completed events
  } else if(args.data.status === "in-progress") {
      args.data.backColor = "#0000FF"; // Blue for in-progress events
  } else if(args.data.status === "pending") {
      args.data.backColor = "#FFFF00"; // Yellow for pending events
  }
}

The status field is a custom property that stores the event status. Here it is stored at the top level but if you use multiple custom value it is better to store it under the tag property to avoid name collision with the built-in properties.