Prioritize resource colors for events in React Schedule component
27 Jan 20238 minutes to read
By default top level resource color will be applied for the events. If user wants to apply specific resource color to events irrespective of its parent resource color, it can be achieved by resourceColorField
field within eventSettings
property as shown below.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { Week, Month, Agenda, ScheduleComponent, ResourcesDirective, ResourceDirective, Inject } from '@syncfusion/ej2-react-schedule';
import { extend } from '@syncfusion/ej2-base';
import { resourceData } from './datasource';
function App() {
const data = extend([], resourceData, null, true);
const roomData = [
{ RoomText: 'ROOM 1', Id: 1, RoomGroupId: 1, RoomColor: '#cb6bb2' },
{ RoomText: 'ROOM 2', Id: 2, RoomGroupId: 2, RoomColor: '#56ca85' }
];
const ownerData = [
{ OwnerText: 'Nancy', Id: 1, OwnerGroupId: 1, OwnerColor: '#ffaa00' },
{ OwnerText: 'Steven', Id: 2, OwnerGroupId: 2, OwnerColor: '#f8a398' },
{ OwnerText: 'Michael', Id: 3, OwnerGroupId: 1, OwnerColor: '#7499e1' }
];
return <ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 3, 1)} eventSettings={{ dataSource: data, resourceColorField: 'Owners' }} group={{ resources: ['Rooms', 'Owners'] }}>
<ResourcesDirective>
<ResourceDirective field='RoomId' title='Room' name='Rooms' allowMultiple={false} dataSource={roomData} textField='RoomText' idField='Id' groupIDField='RoomGroupId' colorField='RoomColor'>
</ResourceDirective>
<ResourceDirective field='OwnerId' title='Owner' name='Owners' allowMultiple={true} dataSource={ownerData} textField='OwnerText' idField='Id' groupIDField='OwnerGroupId' colorField='OwnerColor'>
</ResourceDirective>
</ResourcesDirective>
<Inject services={[Week, Month, Agenda]}/>
</ScheduleComponent>;
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
Week, Month, Agenda, ScheduleComponent, ResourcesDirective,
ResourceDirective, Inject
} from '@syncfusion/ej2-react-schedule';
import { extend } from '@syncfusion/ej2-base';
import { resourceData } from './datasource';
function App() {
const data: Object[] = extend([], resourceData, null, true) as Object[];
const roomData: Object[] = [
{ RoomText: 'ROOM 1', Id: 1, RoomGroupId: 1, RoomColor: '#cb6bb2' },
{ RoomText: 'ROOM 2', Id: 2, RoomGroupId: 2, RoomColor: '#56ca85' }
];
const ownerData: Object[] = [
{ OwnerText: 'Nancy', Id: 1, OwnerGroupId: 1, OwnerColor: '#ffaa00' },
{ OwnerText: 'Steven', Id: 2, OwnerGroupId: 2, OwnerColor: '#f8a398' },
{ OwnerText: 'Michael', Id: 3, OwnerGroupId: 1, OwnerColor: '#7499e1' }
];
return <ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 3, 1)}
eventSettings={{ dataSource: data, resourceColorField: 'Owners' }}
group={{ resources: ['Rooms', 'Owners'] }} >
<ResourcesDirective>
<ResourceDirective field='RoomId' title='Room' name='Rooms'
allowMultiple={false}
dataSource={roomData} textField='RoomText' idField='Id' groupIDField='RoomGroupId' colorField='RoomColor'>
</ResourceDirective>
<ResourceDirective field='OwnerId' title='Owner' name='Owners'
allowMultiple={true}
dataSource={ownerData} textField='OwnerText' idField='Id' groupIDField='OwnerGroupId' colorField='OwnerColor'>
</ResourceDirective>
</ResourcesDirective>
<Inject services={[Week, Month, Agenda]} />
</ScheduleComponent>
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Schedule</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/20.4.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/20.4.48/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/20.4.48/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/20.4.48/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/20.4.48/ej2-react-schedule/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
The
resourceColorField
field value should be as same as thename
field value given with inresources
property.