By default, the work hours of the Scheduler is highlighted based on the start and end values provided within the workHours property which remains same for all days. To highlight different work hours range for different days,setWorkHours method can be used as follows.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { Day, Week, WorkWeek, Month, ScheduleComponent, ViewsDirective, ViewDirective, Inject } from '@syncfusion/ej2-react-schedule';
import { extend } from '@syncfusion/ej2-base';
import { scheduleData } from './datasource';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = extend([], scheduleData, null, true);
}
onClick() {
let btnElement = document.querySelector('#btn1');
let btnElement2 = document.querySelector('#btn2');
btnElement.innerText = 'Change the work hours';
btnElement2.style.display = 'none';
let dates = [new Date(2018, 1, 15), new Date(2018, 1, 17)];
this.scheduleObj.setWorkHours(dates, '11:00', '20:00');
}
render() {
return (<div>
<ButtonComponent id='btn1' title='Click to open Editor' onClick={this.onClick.bind(this)}>Click to open Editor</ButtonComponent>
<ButtonComponent id='btn2' title='Click to open Event Editor' onClick={this.onClick.bind(this)}>Click to open Event Editor</ButtonComponent>
<ScheduleComponent ref={t => this.scheduleObj = t} height='550px' selectedDate={new Date(2018, 1, 15)} workHours={{ highlight: true, start: '09:00', end: '11:00' }} eventSettings={{ dataSource: this.data }}>
<ViewsDirective>
<ViewDirective option='Day'/>
<ViewDirective option='Week'/>
<ViewDirective option='WorkWeek'/>
<ViewDirective option='Month'/>
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month]}/>
</ScheduleComponent>
</div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));<!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/20.1.58/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/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>import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
Day, Week, WorkWeek, Month, ScheduleComponent, ResourcesDirective,
ResourceDirective, ViewsDirective, ViewDirective,
Inject
} from '@syncfusion/ej2-react-schedule';
import { extend } from '@syncfusion/ej2-base';
import { scheduleData } from './datasource';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
class App extends React.Component<{}, {}>{
private scheduleObj: ScheduleComponent;
private data: Object[] = extend([], scheduleData, null, true) as Object[];
private onClick(): void{
let btnElement: HTMLElement = document.querySelector('#btn1') as HTMLElement;
let btnElement2: HTMLElement = document.querySelector('#btn2') as HTMLElement;
btnElement.innerText = 'Change the work hours';
btnElement2.style.display='none';
let dates: Date[] = [new Date(2018, 1, 15), new Date(2018, 1, 17)];
this.scheduleObj.setWorkHours(dates, '11:00','20:00');
}
render() {
return ( <div>
<ButtonComponent id='btn1' title='Click to open Editor' onClick={ this.onClick.bind(this) }>Click to open Editor</ButtonComponent>
<ButtonComponent id='btn2' title='Click to open Event Editor' onClick={ this.onClick.bind(this) }>Click to open Event Editor</ButtonComponent>
<ScheduleComponent ref={t => this.scheduleObj = t} height='550px' selectedDate= {new Date(2018, 1, 15)}
workHours= { { highlight: true, start: '09:00', end: '11:00'} }
eventSettings= { { dataSource: this.data } }>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month]} />
</ScheduleComponent>
</div>)
}
};
ReactDOM.render(<App />, document.getElementById('schedule'));