React
Demos
Support
Forum
Download
Search results

Set Different Working Hours on Different Days in React Schedule component

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.

Source
Preview
index.jsx
index.tsx
index.html
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'));
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'));
<!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>
Previous
Next