Multi-Color events in React Scheduler
In the React Scheduler, you can display multiple colors within a single event. This is achieved by using the template option within the eventSettings property. In this example, SubCount is used as an additional field. The SubCount field contains the background color and height values. Based on these values, events are divided into different colors.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, TimelineViews, Inject, Resize, DragAndDrop } from '@syncfusion/ej2-react-schedule';
const App = () => {
const data = [
{
Id: 1,
Subject: 'Environment Day',
Description: 'A day that creates awareness to promote the healthy planet and reduce the air pollution crisis on nature earth.',
StartTime: new Date(2024, 1, 15, 9, 0),
EndTime: new Date(2024, 1, 15, 14, 0),
SubCount: [
{ background: 'darkblue', height: '50%' },
{ background: 'lightblue', height: '50%' },
],
},
{
Id: 2,
Subject: 'Health Day',
Description: 'A day that raises awareness on different health issues. It marks the anniversary of the foundation of WHO.',
StartTime: new Date(2024, 1, 16, 9, 0),
EndTime: new Date(2024, 1, 16, 14, 0),
SubCount: [
{ background: 'yellow', height: '33.3%' },
{ background: 'yellowgreen', height: '33.3%' },
{ background: 'green', height: '33.3%' },
],
},
{
Id: 3,
Subject: 'Cancer Day',
Description: 'A day that raises awareness on cancer and its preventive measures. Early detection saves life.',
StartTime: new Date(2024, 1, 17, 9, 0),
EndTime: new Date(2024, 1, 17, 14, 0),
SubCount: [
{ background: 'pink', height: '50%' },
{ background: 'red', height: '50%' },
],
},
];
const eventTemplate = (props) => {
return (
<div className="template-wrap">
{props.SubCount.map((item, index) => (
<div key={index} style=>
<div className="subject">{props.Subject}</div>
</div>
))}
</div>
);
};
return (
<ScheduleComponent cssClass='event-template' width='100%' height='550px' selectedDate={new Date(2024, 1, 15)} eventSettings=>
<ViewsDirective>
<ViewDirective option={'Week'} eventTemplate={eventTemplate} />
</ViewsDirective>
<Inject services={[Day, Week, TimelineViews, Resize, DragAndDrop]} />
</ScheduleComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, TimelineViews, Inject, Resize, DragAndDrop } from '@syncfusion/ej2-react-schedule';
const App = () => {
const data: Object[] = [
{
Id: 1,
Subject: 'Environment Day',
Description: 'A day that creates awareness to promote the healthy planet and reduce the air pollution crisis on nature earth.',
StartTime: new Date(2024, 1, 15, 9, 0),
EndTime: new Date(2024, 1, 15, 14, 0),
SubCount: [
{ background: 'darkblue', height: '50%' },
{ background: 'lightblue', height: '50%' },
],
},
{
Id: 2,
Subject: 'Health Day',
Description: 'A day that raises awareness on different health issues. It marks the anniversary of the foundation of WHO.',
StartTime: new Date(2024, 1, 16, 9, 0),
EndTime: new Date(2024, 1, 16, 14, 0),
SubCount: [
{ background: 'yellow', height: '33.3%' },
{ background: 'yellowgreen', height: '33.3%' },
{ background: 'green', height: '33.3%' },
],
},
{
Id: 3,
Subject: 'Cancer Day',
Description: 'A day that raises awareness on cancer and its preventive measures. Early detection saves life.',
StartTime: new Date(2024, 1, 17, 9, 0),
EndTime: new Date(2024, 1, 17, 14, 0),
SubCount: [
{ background: 'pink', height: '50%' },
{ background: 'red', height: '50%' },
],
},
];
const eventTemplate = (props: any) => {
return (
<div className="template-wrap">
{props.SubCount.map((item, index) => (
<div key={index} style=>
<div className="subject">{props.Subject}</div>
</div>
))}
</div>
);
};
return (
<ScheduleComponent cssClass='event-template' width='100%' height='550px' selectedDate={new Date(2024, 1, 15)} eventSettings=>
<ViewsDirective>
<ViewDirective option={'Week'} eventTemplate={eventTemplate} />
</ViewsDirective>
<Inject services={[Day, Week, TimelineViews, Resize, DragAndDrop]} />
</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/34.2.2/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/bootstrap5.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>
<link href="index.css" rel="stylesheet" />
<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>