React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Prioritize the Resource Color for Events

02 Aug 2021 / 2 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.

Source
Preview
index.jsx
index.tsx
index.html
Copied to clipboard
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';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = extend([], resourceData, null, true);
        this.roomData = [
            { RoomText: 'ROOM 1', Id: 1, RoomGroupId: 1, RoomColor: '#cb6bb2' },
            { RoomText: 'ROOM 2', Id: 2, RoomGroupId: 2, RoomColor: '#56ca85' }
        ];
        this.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' }
        ];
    }
    render() {
        return <ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 3, 1)} eventSettings={{ dataSource: this.data, resourceColorField: 'Owners' }} group={{ resources: ['Rooms', 'Owners'] }}>
        <ResourcesDirective>
                <ResourceDirective field='RoomId' title='Room' name='Rooms' allowMultiple={false} dataSource={this.roomData} textField='RoomText' idField='Id' groupIDField='RoomGroupId' colorField='RoomColor'>
                </ResourceDirective>
                <ResourceDirective field='OwnerId' title='Owner' name='Owners' allowMultiple={true} dataSource={this.ownerData} textField='OwnerText' idField='Id' groupIDField='OwnerGroupId' colorField='OwnerColor'>
                </ResourceDirective>
        </ResourcesDirective>
        <Inject services={[Week, Month, Agenda]}/>
    </ScheduleComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));
Copied to clipboard
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';

class App extends React.Component<{}, {}>{
    private data: Object[] = extend([], resourceData, null, true) as Object[];
    private roomData: Object[] = [
     { RoomText: 'ROOM 1', Id: 1, RoomGroupId: 1, RoomColor: '#cb6bb2' },
     { RoomText: 'ROOM 2', Id: 2, RoomGroupId: 2, RoomColor: '#56ca85' }
  ];
  private 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' }
  ];
  render() {
    return <ScheduleComponent  width= '100%' height='550px' selectedDate= {new Date(2018, 3, 1)}
        eventSettings= { { dataSource: this.data, resourceColorField: 'Owners'  } }
        group={ {  resources: ['Rooms', 'Owners'] } } >
        <ResourcesDirective>
                <ResourceDirective field='RoomId' title='Room' name='Rooms'
                 allowMultiple={false}
                  dataSource={this.roomData} textField='RoomText' idField='Id' groupIDField= 'RoomGroupId' colorField='RoomColor'>
                </ResourceDirective>
                <ResourceDirective field='OwnerId' title='Owner' name='Owners'
                 allowMultiple={true}
                  dataSource={this.ownerData} textField='OwnerText' idField='Id' groupIDField= 'OwnerGroupId' colorField='OwnerColor'>
                </ResourceDirective>
        </ResourcesDirective>
        <Inject services={[Week, Month, Agenda]} />
    </ScheduleComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('schedule'));
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
</head>

<body>
        <div id='schedule'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

The resourceColorField field value should be as same as the name field value given with in resources property.

Previous
Next