Search results

Manual Refresh in React Schedule component

25 Jan 2022 / 5 minutes to read

Refresh Template

In Scheduler, we can able to refresh the elements of the template alone instead of the entire scheduler by using the refreshTemplates public method. We can provide an additional option to refresh specific templates alone or all templates together by using this method. The following template names are accepted as an argument to refresh it specifically.

  • eventTemplate
  • dateHeaderTemplate
  • resourceHeaderTemplate
  • quickInfoTemplates
  • editorTemplate
  • tooltipTemplate
  • headerTooltipTemplate

In the following code example, you can see how to use the refreshTemplates method to refresh multiple templates. Here, we have added the following scheduler templates such as cellTemplate, dateHeaderTemplate, eventTemplate and resourceHeaderTemplate

Source
Preview
index.jsx
index.tsx
index.html
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, TimelineMonth, Inject, Resize, DragAndDrop, ResourcesDirective, ResourceDirective } from '@syncfusion/ej2-react-schedule';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { Internationalization, extend } from '@syncfusion/ej2-base';
import { webinarData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = extend([], webinarData, null, true);
        this.instance = new Internationalization();
        this.resourceData = [
            { text: 'Will Smith', id: 1, color: '#ea7a57', workDays: [1, 2, 4, 5], startHour: '08:00', endHour: '15:00' },
            { text: 'Alice', id: 2, color: 'rgb(53, 124, 210)', workDays: [1, 3, 5], startHour: '08:00', endHour: '17:00' },
            { text: 'Robson', id: 3, color: '#7fa900', startHour: '08:00', endHour: '16:00' }
        ];
    }
    getTimeString(value) {
        return this.instance.formatDate(value, { skeleton: 'hm' });
    }
    eventTemplate(props) {
        return (<div className="app-template-wrap" style={{ background: props.SecondaryColor }}>
  <div className="subject" style={{ background: props.PrimaryColor }}>{props.Subject}</div>
  <div className="time" style={{ background: props.PrimaryColor }}>
    Time: {this.getTimeString(props.StartTime)} - {this.getTimeString(props.EndTime)}</div>
  <div className="image"><img src={"https://ej2.syncfusion.com/demos/src/schedule/images/" + props.ImageName + ".svg"} alt={props.ImageName}/></div>
  <div className="event-description">{props.Description}</div>
  <div className="footer" style={{ background: props.PrimaryColor }}></div></div>);
    }
    getDoctorImage(value) {
        return this.getDoctorName(value).replace(' ', '-').toLowerCase();
    }
    getDoctorName(value) {
        return ((value.resourceData) ?
            value.resourceData[value.resource.textField] :
            value.resourceName);
    }
    getDoctorLevel(value) {
        let resourceName = this.getDoctorName(value);
        return (resourceName === 'Will Smith') ? 'Cardiologist' : (resourceName === 'Alice') ? 'Neurologist' : 'Orthopedic Surgeon';
    }
    getDateHeaderText(value) {
        return this.instance.formatDate(value, { skeleton: 'Ed' });
    }
    getWeather(value) {
        switch (value.getDay()) {
            case 0:
                return '<img class="weather-image"  src= "https://ej2.syncfusion.com/demos/src/schedule/images/weather-clear.svg" /><div class="weather-text">25°C</div>';
            case 1:
                return '<img class="weather-image" src="https://ej2.syncfusion.com/demos/src/schedule/images/weather-clouds.svg"/><div class="weather-text">18°C</div>';
            case 2:
                return '<img class="weather-image" src="https://ej2.syncfusion.com/demos/src/schedule/images/weather-rain.svg"/><div class="weather-text">10°C</div>';
            case 3:
                return '<img class="weather-image" src="https://ej2.syncfusion.com/demos/src/schedule/images/weather-clouds.svg"/><div class="weather-text">16°C</div>';
            case 4:
                return '<img class="weather-image" src="https://ej2.syncfusion.com/demos/src/schedule/images/weather-rain.svg"/><div class="weather-text">8°C</div>';
            case 5:
                return '<img class="weather-image" src="https://ej2.syncfusion.com/demos/src/schedule/images/weather-clear.svg"/><div class="weather-text">27°C</div>';
            case 6:
                return '<img class="weather-image" src="https://ej2.syncfusion.com/demos/src/schedule/images/weather-clouds.svg"/><div class="weather-text">17°C</div>';
            default:
                return null;
        }
    }
    dateHeaderTemplate(props) {
        return (<div><div>{this.getDateHeaderText(props.date)}</div><div className="date-text" dangerouslySetInnerHTML={{ __html: this.getWeather(props.date) }}></div></div>);
    }
    resourceHeaderTemplate(props) {
        return (<div className="res-template-wrap"><div className={"resource-image " + this.getDoctorImage(props)}></div>
  <div className="resource-detail"><div className="resource-name">{this.getDoctorName(props)}</div>
    <div className="resource-designation">{this.getDoctorLevel(props)}</div></div></div>);
    }
    getMonthCellText(date) {
        if (date.getMonth() === 1 && date.getDate() === 23) {
            return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/birthday.svg" />';
        }
        else if (date.getMonth() === 1 && date.getDate() === 9) {
            return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/get-together.svg" />';
        }
        else if (date.getMonth() === 1 && date.getDate() === 13) {
            return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/birthday.svg" />';
        }
        else if (date.getMonth() === 1 && date.getDate() === 22) {
            return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/thanksgiving-day.svg" />';
        }
        else if (date.getMonth() === 1 && date.getDate() === 14) {
            return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/birthday.svg" />';
        }
        return '';
    }
    getWorkCellText(date) {
        let weekEnds = [0, 6];
        if (weekEnds.indexOf(date.getDay()) >= 0) {
            return "<span class='caption'>Weekend</span>";
        }
        return '';
    }
    cellTemplate(props) {
        if (props.type === "workCells") {
            return (<div className="cell-template-wrap" dangerouslySetInnerHTML={{ __html: this.getWorkCellText(props.date) }}></div>);
        }
        if (props.type === "monthCells") {
            return (<div className="cell-template-wrap" dangerouslySetInnerHTML={{ __html: this.getMonthCellText(props.date) }}></div>);
        }
        return (<div></div>);
    }
    refreshCellTemplate() {
        this.scheduleObj.refreshTemplates("cellTemplate");
    }
    refreshDateHeaderTemplate() {
        this.scheduleObj.refreshTemplates("dateHeaderTemplate");
    }
    refreshEventTemplate() {
        this.scheduleObj.refreshTemplates("eventTemplate");
    }
    refreshResHeaderTemplate() {
        this.scheduleObj.refreshTemplates("resourceHeaderTemplate");
    }
    refreshAllTemplate() {
        this.scheduleObj.refreshTemplates();
    }
    render() {
        return (<div className='schedule-control-section'>
    <div className='control-section'>
      <div className='control-wrapper'>
        <div style={{ "display": 'flex' }}>
          <div style={{ paddingRight: '10px' }}>
            <ButtonComponent cssClass='e-info' onClick={this.refreshCellTemplate.bind(this)}>Refresh cellTemplate</ButtonComponent>
          </div>
          <div style={{ paddingRight: '10px' }}>
            <ButtonComponent cssClass='e-info' onClick={this.refreshDateHeaderTemplate.bind(this)}>Refresh dateHeaderTemplate</ButtonComponent>
          </div>
          <div style={{ paddingRight: '10px' }}>
            <ButtonComponent cssClass='e-info' onClick={this.refreshEventTemplate.bind(this)}>Refresh eventTemplate</ButtonComponent>
          </div>
          <div style={{ paddingRight: '10px' }}>
            <ButtonComponent cssClass='e-info' onClick={this.refreshResHeaderTemplate.bind(this)}>Refresh resourceHeaderTemplate</ButtonComponent>
          </div>
          <div style={{ paddingRight: '10px' }}>
            <ButtonComponent cssClass='e-info' onClick={this.refreshAllTemplate.bind(this)}>Refresh All Templates</ButtonComponent>
          </div>
        </div>
        <ScheduleComponent width='100%' height='650px' cssClass='schedule-date-header-template' ref={t => this.scheduleObj = t} selectedDate={new Date(2021, 1, 15)} readonly={true} eventSettings={{ dataSource: this.data }} dateHeaderTemplate={this.dateHeaderTemplate.bind(this)} resourceHeaderTemplate={this.resourceHeaderTemplate.bind(this)} cellTemplate={this.cellTemplate.bind(this)} group={{ resources: ['Doctors'] }}>
          <ResourcesDirective>
            <ResourceDirective field='DoctorId' title='Doctor Name' name='Doctors' dataSource={this.resourceData} textField='text' idField='id' groupIDField='groupId' colorField='color' workDaysField='workDays' startHourField='startHour' endHourField='endHour'>
            </ResourceDirective>
          </ResourcesDirective>
          <ViewsDirective>
            <ViewDirective option='Week' eventTemplate={this.eventTemplate.bind(this)}/>
            <ViewDirective option='Month'/>
            <ViewDirective option='TimelineMonth'/>
          </ViewsDirective>
          <Inject services={[Day, Week, WorkWeek, Month, TimelineMonth, Resize, DragAndDrop]}/>
        </ScheduleComponent>
      </div>
    </div>
  </div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, TimelineMonth,
  RenderCellEventArgs, EventRenderedArgs, Inject, Resize, DragAndDrop, ResourcesDirective, ResourceDirective, ResourceDetails
} from '@syncfusion/ej2-react-schedule';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { Internationalization, extend } from '@syncfusion/ej2-base';
import { webinarData } from './datasource';

class App extends React.Component<{}, {}>{
  private scheduleObj: ScheduleComponent;
  private data: Record<string, any>[] = extend([], webinarData, null, true) as Record<string, any>[];
  private instance: Internationalization = new Internationalization();

  private resourceData: Record<string, any>[] = [
{ text: 'Will Smith', id: 1, color: '#ea7a57', workDays: [1, 2, 4, 5], startHour: '08:00', endHour: '15:00' },
{ text: 'Alice', id: 2, color: 'rgb(53, 124, 210)', workDays: [1, 3, 5], startHour: '08:00', endHour: '17:00' },
{ text: 'Robson', id: 3, color: '#7fa900', startHour: '08:00', endHour: '16:00' }
  ];

  private getTimeString(value: Date) {
return this.instance.formatDate(value, { skeleton: 'hm' });
  }

  private eventTemplate(props): JSX.Element {
return (<div className="app-template-wrap" style={{ background: props.SecondaryColor }}>
  <div className="subject" style={{ background: props.PrimaryColor }}>{props.Subject}</div>
  <div className="time" style={{ background: props.PrimaryColor }}>
    Time: {this.getTimeString(props.StartTime)} - {this.getTimeString(props.EndTime)}</div>
  <div className="image"><img src={"https://ej2.syncfusion.com/demos/src/schedule/images/" + props.ImageName + ".svg"} alt={props.ImageName} /></div>
  <div className="event-description">{props.Description}</div>
  <div className="footer" style={{ background: props.PrimaryColor }}></div></div>
);
  }

  private getDoctorImage(value: ResourceDetails): string {
return this.getDoctorName(value).replace(' ', '-').toLowerCase();
  }

  private getDoctorName(value: ResourceDetails): string {
return (((value as ResourceDetails).resourceData) ?
  (value as ResourceDetails).resourceData[(value as ResourceDetails).resource.textField] :
  value.resourceName) as string;
  }

  private getDoctorLevel(value: ResourceDetails): string {
let resourceName: string = this.getDoctorName(value);
return (resourceName === 'Will Smith') ? 'Cardiologist' : (resourceName === 'Alice') ? 'Neurologist' : 'Orthopedic Surgeon';
  }

  private getDateHeaderText(value: Date): string {
return this.instance.formatDate(value, { skeleton: 'Ed' });
  }

  private getWeather(value: Date) {
switch (value.getDay()) {
  case 0:
    return '<img class="weather-image"  src= "https://ej2.syncfusion.com/demos/src/schedule/images/weather-clear.svg" /><div class="weather-text">25°C</div>';
  case 1:
    return '<img class="weather-image" src="https://ej2.syncfusion.com/demos/src/schedule/images/weather-clouds.svg"/><div class="weather-text">18°C</div>';
  case 2:
    return '<img class="weather-image" src="https://ej2.syncfusion.com/demos/src/schedule/images/weather-rain.svg"/><div class="weather-text">10°C</div>';
  case 3:
    return '<img class="weather-image" src="https://ej2.syncfusion.com/demos/src/schedule/images/weather-clouds.svg"/><div class="weather-text">16°C</div>';
  case 4:
    return '<img class="weather-image" src="https://ej2.syncfusion.com/demos/src/schedule/images/weather-rain.svg"/><div class="weather-text">8°C</div>';
  case 5:
    return '<img class="weather-image" src="https://ej2.syncfusion.com/demos/src/schedule/images/weather-clear.svg"/><div class="weather-text">27°C</div>';
  case 6:
    return '<img class="weather-image" src="https://ej2.syncfusion.com/demos/src/schedule/images/weather-clouds.svg"/><div class="weather-text">17°C</div>';
  default:
    return null;
}
  }

  private dateHeaderTemplate(props): JSX.Element {
return (<div><div>{this.getDateHeaderText(props.date)}</div><div className="date-text"
  dangerouslySetInnerHTML={{ __html: this.getWeather(props.date) }}></div></div>);
  }

  private resourceHeaderTemplate(props): JSX.Element {
return (<div className="res-template-wrap"><div className={"resource-image " + this.getDoctorImage(props)}></div>
  <div className="resource-detail"><div className="resource-name">{this.getDoctorName(props)}</div>
    <div className="resource-designation">{this.getDoctorLevel(props)}</div></div></div>);
  }

  private getMonthCellText(date: Date): string {
if (date.getMonth() === 1 && date.getDate() === 23) {
  return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/birthday.svg" />';
} else if (date.getMonth() === 1 && date.getDate() === 9) {
  return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/get-together.svg" />';
} else if (date.getMonth() === 1 && date.getDate() === 13) {
  return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/birthday.svg" />';
} else if (date.getMonth() === 1 && date.getDate() === 22) {
  return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/thanksgiving-day.svg" />';
} else if (date.getMonth() === 1 && date.getDate() === 14) {
  return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/birthday.svg" />';
}
return '';
  }
  private getWorkCellText(date: Date): string {
let weekEnds: number[] = [0, 6];
if (weekEnds.indexOf(date.getDay()) >= 0) {
  return "<span class='caption'>Weekend</span>";
}
return '';
  }
  cellTemplate(props) {
if (props.type === "workCells") {
  return (<div className="cell-template-wrap" dangerouslySetInnerHTML={{ __html: this.getWorkCellText(props.date) }}></div>);
}
if (props.type === "monthCells") {
  return (<div className="cell-template-wrap" dangerouslySetInnerHTML={{ __html: this.getMonthCellText(props.date) }}></div>);
}
return (<div></div>);
  }

  refreshCellTemplate(): void {
this.scheduleObj.refreshTemplates("cellTemplate");
  }
  refreshDateHeaderTemplate(): void {
this.scheduleObj.refreshTemplates("dateHeaderTemplate");
  }
  refreshEventTemplate(): void {
this.scheduleObj.refreshTemplates("eventTemplate");
  }
  refreshResHeaderTemplate(): void {
this.scheduleObj.refreshTemplates("resourceHeaderTemplate");
  }
  refreshAllTemplate(): void {
this.scheduleObj.refreshTemplates();
  }

  render() {
return (
  <div className='schedule-control-section'>
    <div className='control-section'>
      <div className='control-wrapper'>
        <div style={{ "display": 'flex' }}>
          <div style={{ paddingRight: '10px' }}>
            <ButtonComponent cssClass='e-info' onClick={this.refreshCellTemplate.bind(this)}>Refresh cellTemplate</ButtonComponent>
          </div>
          <div style={{ paddingRight: '10px' }}>
            <ButtonComponent cssClass='e-info' onClick={this.refreshDateHeaderTemplate.bind(this)}>Refresh dateHeaderTemplate</ButtonComponent>
          </div>
          <div style={{ paddingRight: '10px' }}>
            <ButtonComponent cssClass='e-info' onClick={this.refreshEventTemplate.bind(this)}>Refresh eventTemplate</ButtonComponent>
          </div>
          <div style={{ paddingRight: '10px' }}>
            <ButtonComponent cssClass='e-info' onClick={this.refreshResHeaderTemplate.bind(this)}>Refresh resourceHeaderTemplate</ButtonComponent>
          </div>
          <div style={{ paddingRight: '10px' }}>
            <ButtonComponent cssClass='e-info' onClick={this.refreshAllTemplate.bind(this)}>Refresh All Templates</ButtonComponent>
          </div>
        </div>
        <ScheduleComponent width='100%' height='650px' cssClass='schedule-date-header-template' ref={t => this.scheduleObj = t}
          selectedDate={new Date(2021, 1, 15)} readonly={true}
          eventSettings={{ dataSource: this.data }} dateHeaderTemplate={this.dateHeaderTemplate.bind(this)} resourceHeaderTemplate={this.resourceHeaderTemplate.bind(this)} cellTemplate={this.cellTemplate.bind(this)}
          group={{ resources: ['Doctors'] }}>
          <ResourcesDirective>
            <ResourceDirective field='DoctorId' title='Doctor Name' name='Doctors'
              dataSource={this.resourceData} textField='text' idField='id' groupIDField='groupId' colorField='color'
              workDaysField='workDays' startHourField='startHour' endHourField='endHour' >
            </ResourceDirective>
          </ResourcesDirective>
          <ViewsDirective>
            <ViewDirective option='Week' eventTemplate={this.eventTemplate.bind(this)} />
            <ViewDirective option='Month' />
            <ViewDirective option='TimelineMonth' />
          </ViewsDirective>
          <Inject services={[Day, Week, WorkWeek, Month, TimelineMonth, Resize, DragAndDrop]} />
        </ScheduleComponent>
      </div>
    </div>
  </div>
);
  }
};
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>
        <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>

Refresh Layout

In Scheduler, we can able to refresh the layout manually without re-render the DOM element by using the refreshLayout public method. The following example code explains to know how to use the refreshLayout method.

Source
Preview
index.tsx
index.html
App.jsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  ScheduleComponent, Day, Week, WorkWeek, Month, Inject,
  ViewsDirective, ViewDirective
} from '@syncfusion/ej2-react-schedule';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

class App extends React.Component<{}, {}>{
  private scheduleObj: ScheduleComponent;
  private scheduleData: Object[] = [{
Id: 1,
Subject: 'Testing',
StartTime: new Date(2021, 10, 16, 10, 0),
EndTime: new Date(2021, 10, 16, 12, 0),
IsAllDay: false
  }, {
Id: 2,
Subject: 'Vacation',
StartTime: new Date(2021, 10, 18, 10, 0),
EndTime: new Date(2021, 10, 18, 12, 0),
IsAllDay: false
  }];
  private onRefreshLayout(): void {
this.scheduleObj.refreshLayout();
  }

  render() {
return (<div>
  <ButtonComponent onClick={this.onRefreshLayout.bind(this)}>Refresh Layout</ButtonComponent> <ScheduleComponent ref={t => this.scheduleObj = t} width='100%' height='550px' selectedDate=
    {new Date(2021, 10, 15)} eventSettings={{ dataSource: this.scheduleData }}>
    <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'));
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>
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Inject, ViewsDirective, ViewDirective } from '@syncfusion/ej2-react-schedule';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.scheduleData = [{
                Id: 1,
                Subject: 'Testing',
                StartTime: new Date(2021, 10, 16, 10, 0),
                EndTime: new Date(2021, 10, 16, 12, 0),
                IsAllDay: false
            }, {
                Id: 2,
                Subject: 'Vacation',
                StartTime: new Date(2021, 10, 18, 10, 0),
                EndTime: new Date(2021, 10, 18, 12, 0),
                IsAllDay: false
            }];
    }
    onRefreshLayout() {
        this.scheduleObj.refreshLayout();
    }
    render() {
        return (<div>
  <ButtonComponent onClick={this.onRefreshLayout.bind(this)}>Refresh Layout</ButtonComponent> <ScheduleComponent ref={t => this.scheduleObj = t} width='100%' height='550px' selectedDate={new Date(2021, 10, 15)} eventSettings={{ dataSource: this.scheduleData }}>
    <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'));