Cannot change default colour of the events in the schedule component

[Andreas]

I have the following code for the schedule component

<ScheduleComponent

height="650px"

allowDragAndDrop={false}

allowResizing={false}

ref={(schedule) => setScheduleObj(schedule)}

cssClass="e-customClass"

readonly={true}

selectedDate={new Date(2021, 0, 10)}

eventSettings={{ dataSource: scheduleData }}

>

<ViewsDirective>

{["Day", "Week", "WorkWeek", "Month", "Agenda"].map((item) => (

<ViewDirective key={item} option={item} />

))}

</ViewsDirective>

<Inject

services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]}

/>

</ScheduleComponent>

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

[Swathi Ravi]

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

[dataSource.json]

{

    "zooEventsData": [

        {

            "Id": 1,

            "Subject": "Story Time for Kids",

            "StartTime": "2021-02-14T04:30:00.000Z",

            "EndTime": "2021-02-14T06:00:00.000Z",

            "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