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

Cannot change default colour of the events in the schedule component

I have the following code for the schedule component

ref={(schedule) => setScheduleObj(schedule)}
selectedDate={new Date(2021, 0, 10)}
eventSettings={{ dataSource: scheduleData }}
{["Day", "Week", "WorkWeek", "Month", "Agenda"].map((item) => (
<ViewDirective key={item} option={item} />
services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]}

And it works well, but it has ​a blue default colour for all events

The data source is in the form of:

Id: 2,
Subject: "Thule Air Crash Report",
Location: "Newyork City",
StartTime: "2021-01-11T06:30:00.000Z",
EndTime: "2021-01-11T08:30:00.000Z",
CategoryColor: "#357cd2",

How can I change the default colour of the events to something like red.

I have tried adding the cssClass="" prop but it seams to do nothing. Is tere a way I can change the default colou

1 Reply

SR Swathi Ravi Syncfusion Team December 1, 2022 10:01 AM UTC

Hi Andreas,

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-pyck3v-aivtd2?file=index.js

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

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



    "zooEventsData": [



            "Subject""Story Time for Kids",








function onEventRendered(args) {

    let categoryColor = args.data.CategoryColor;

    args.element.style.backgroundColor = categoryColor;



return ( 

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



Swathi Ravi

Live Chat Icon For mobile
Up arrow icon