Manual refresh in React Schedule component
30 Aug 202324 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
import { useRef } from 'react';
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 } from '@syncfusion/ej2-base';
import { webinarData } from './datasource';
const App = () => {
const scheduleObj = useRef(null);
const eventSettings = { dataSource: webinarData };
const group = { resources: ['Doctors'] }
const instance = new Internationalization();
const 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' }
];
const getTimeString = (value) => {
return instance.formatDate(value, { skeleton: 'hm' });
}
const eventTemplate = (props) => {
return (<div className="app-template-wrap" style=>
<div className="subject" style=>{props.Subject}</div>
<div className="time" style=>
Time: {getTimeString(props.StartTime)} - {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=></div></div>);
}
const getDoctorImage = (value) => {
return getDoctorName(value).replace(' ', '-').toLowerCase();
}
const getDoctorName = (value) => {
return ((value.resourceData) ?
value.resourceData[value.resource.textField] :
value.resourceName);
}
const getDoctorLevel = (value) => {
let resourceName = getDoctorName(value);
return (resourceName === 'Will Smith') ? 'Cardiologist' : (resourceName === 'Alice') ? 'Neurologist' : 'Orthopedic Surgeon';
}
const getDateHeaderText = (value) => {
return instance.formatDate(value, { skeleton: 'Ed' });
}
const 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;
}
}
const dateHeaderTemplate = (props) => {
return (<div><div>{getDateHeaderText(props.date)}</div><div className="date-text" dangerouslySetInnerHTML=></div></div>);
}
const resourceHeaderTemplate = (props) => {
return (<div className="res-template-wrap"><div className={"resource-image " + getDoctorImage(props)}></div>
<div className="resource-detail"><div className="resource-name">{getDoctorName(props)}</div>
<div className="resource-designation">{getDoctorLevel(props)}</div></div></div>);
}
const 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 '';
}
const getWorkCellText = (date) => {
let weekEnds = [0, 6];
if (weekEnds.indexOf(date.getDay()) >= 0) {
return "<span class='caption'>Weekend</span>";
}
return '';
}
const cellTemplate = (props) => {
if (props.type === "workCells") {
return (<div className="cell-template-wrap" dangerouslySetInnerHTML=></div>);
}
if (props.type === "monthCells") {
return (<div className="cell-template-wrap" dangerouslySetInnerHTML=></div>);
}
return (<div></div>);
}
const refreshCellTemplate = () => {
scheduleObj.current.refreshTemplates("cellTemplate");
}
const refreshDateHeaderTemplate = () => {
scheduleObj.current.refreshTemplates("dateHeaderTemplate");
}
const refreshEventTemplate = () => {
scheduleObj.current.refreshTemplates("eventTemplate");
}
const refreshResHeaderTemplate = () => {
scheduleObj.current.refreshTemplates("resourceHeaderTemplate");
}
const refreshAllTemplate = () => {
scheduleObj.current.refreshTemplates();
}
return (<div className='schedule-control-section'>
<div className='control-section'>
<div className='control-wrapper'>
<div style=display>
<div style=>
<ButtonComponent cssClass='e-info' onClick={refreshCellTemplate}>Refresh cellTemplate</ButtonComponent>
</div>
<div style=>
<ButtonComponent cssClass='e-info' onClick={refreshDateHeaderTemplate}>Refresh dateHeaderTemplate</ButtonComponent>
</div>
<div style=>
<ButtonComponent cssClass='e-info' onClick={refreshEventTemplate}>Refresh eventTemplate</ButtonComponent>
</div>
<div style=>
<ButtonComponent cssClass='e-info' onClick={refreshResHeaderTemplate}>Refresh resourceHeaderTemplate</ButtonComponent>
</div>
<div style=>
<ButtonComponent cssClass='e-info' onClick={refreshAllTemplate}>Refresh All Templates</ButtonComponent>
</div>
</div>
<ScheduleComponent width='100%' height='650px' cssClass='schedule-date-header-template' ref={scheduleObj} selectedDate={new Date(2021, 1, 15)} readonly={true} eventSettings={eventSettings} dateHeaderTemplate={dateHeaderTemplate} resourceHeaderTemplate={resourceHeaderTemplate} cellTemplate={cellTemplate} group={group}>
<ResourcesDirective>
<ResourceDirective field='DoctorId' title='Doctor Name' name='Doctors' dataSource={resourceData} textField='text' idField='id' groupIDField='groupId' colorField='color' workDaysField='workDays' startHourField='startHour' endHourField='endHour'>
</ResourceDirective>
</ResourcesDirective>
<ViewsDirective>
<ViewDirective option='Week' eventTemplate={eventTemplate} />
<ViewDirective option='Month' />
<ViewDirective option='TimelineMonth' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month, TimelineMonth, Resize, DragAndDrop]} />
</ScheduleComponent>
</div>
</div>
</div>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import { useRef } from 'react';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, TimelineMonth,
Inject, Resize, DragAndDrop, ResourcesDirective, GroupModel, ResourceDirective, ResourceDetails, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { Internationalization } from '@syncfusion/ej2-base';
import { webinarData } from './datasource';
const App = () => {
const scheduleObj = useRef<ScheduleComponent>(null);
const eventSettings: EventSettingsModel = { dataSource: webinarData };
const group: GroupModel = { resources: ['Doctors'] }
const instance: Internationalization = new Internationalization();
const 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' }
];
const getTimeString = (value: Date) => {
return instance.formatDate(value, { skeleton: 'hm' });
}
const eventTemplate = (props): JSX.Element => {
return (<div className="app-template-wrap" style=>
<div className="subject" style=>{props.Subject}</div>
<div className="time" style=>
Time: {getTimeString(props.StartTime)} - {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=></div></div>
);
}
const getDoctorImage = (value: ResourceDetails): string => {
return getDoctorName(value).replace(' ', '-').toLowerCase();
}
const getDoctorName = (value: ResourceDetails): string => {
return (((value as ResourceDetails).resourceData) ?
(value as ResourceDetails).resourceData[(value as ResourceDetails).resource.textField] :
value.resourceName) as string;
}
const getDoctorLevel = (value: ResourceDetails): string => {
let resourceName: string = getDoctorName(value);
return (resourceName === 'Will Smith') ? 'Cardiologist' : (resourceName === 'Alice') ? 'Neurologist' : 'Orthopedic Surgeon';
}
const getDateHeaderText = (value: Date): string => {
return instance.formatDate(value, { skeleton: 'Ed' });
}
const 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;
}
}
const dateHeaderTemplate = (props): JSX.Element => {
return (<div><div>{getDateHeaderText(props.date)}</div><div className="date-text"
dangerouslySetInnerHTML=></div></div>);
}
const resourceHeaderTemplate = (props): JSX.Element => {
return (<div className="res-template-wrap"><div className={"resource-image " + getDoctorImage(props)}></div>
<div className="resource-detail"><div className="resource-name">{getDoctorName(props)}</div>
<div className="resource-designation">{getDoctorLevel(props)}</div></div></div>);
}
const 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 '';
}
const getWorkCellText = (date: Date): string => {
let weekEnds: number[] = [0, 6];
if (weekEnds.indexOf(date.getDay()) >= 0) {
return "<span class='caption'>Weekend</span>";
}
return '';
}
const cellTemplate = (props) => {
if (props.type === "workCells") {
return (<div className="cell-template-wrap" dangerouslySetInnerHTML=></div>);
}
if (props.type === "monthCells") {
return (<div className="cell-template-wrap" dangerouslySetInnerHTML=></div>);
}
return (<div></div>);
}
const refreshCellTemplate = (): void => {
scheduleObj.current.refreshTemplates("cellTemplate");
}
const refreshDateHeaderTemplate = (): void => {
scheduleObj.current.refreshTemplates("dateHeaderTemplate");
}
const refreshEventTemplate = (): void => {
scheduleObj.current.refreshTemplates("eventTemplate");
}
const refreshResHeaderTemplate = (): void => {
scheduleObj.current.refreshTemplates("resourceHeaderTemplate");
}
const refreshAllTemplate = (): void => {
scheduleObj.current.refreshTemplates();
}
return (
<div className='schedule-control-section'>
<div className='control-section'>
<div className='control-wrapper'>
<div style=display>
<div style=>
<ButtonComponent cssClass='e-info' onClick={refreshCellTemplate}>Refresh cellTemplate</ButtonComponent>
</div>
<div style=>
<ButtonComponent cssClass='e-info' onClick={refreshDateHeaderTemplate}>Refresh dateHeaderTemplate</ButtonComponent>
</div>
<div style=>
<ButtonComponent cssClass='e-info' onClick={refreshEventTemplate}>Refresh eventTemplate</ButtonComponent>
</div>
<div style=>
<ButtonComponent cssClass='e-info' onClick={refreshResHeaderTemplate}>Refresh resourceHeaderTemplate</ButtonComponent>
</div>
<div style=>
<ButtonComponent cssClass='e-info' onClick={refreshAllTemplate}>Refresh All Templates</ButtonComponent>
</div>
</div>
<ScheduleComponent width='100%' height='650px' cssClass='schedule-date-header-template' ref={scheduleObj}
selectedDate={new Date(2021, 1, 15)} readonly={true}
eventSettings={eventSettings} dateHeaderTemplate={dateHeaderTemplate} resourceHeaderTemplate={resourceHeaderTemplate} cellTemplate={cellTemplate}
group={group}>
<ResourcesDirective>
<ResourceDirective field='DoctorId' title='Doctor Name' name='Doctors'
dataSource={resourceData} textField='text' idField='id' groupIDField='groupId' colorField='color'
workDaysField='workDays' startHourField='startHour' endHourField='endHour' >
</ResourceDirective>
</ResourcesDirective>
<ViewsDirective>
<ViewDirective option='Week' eventTemplate={eventTemplate} />
<ViewDirective option='Month' />
<ViewDirective option='TimelineMonth' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month, TimelineMonth, Resize, DragAndDrop]} />
</ScheduleComponent>
</div>
</div>
</div>
);
};
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/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</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.
import { useRef } from 'react';
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';
const App = () => {
const scheduleObj = useRef(null);
const 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
}];
const eventSettings = { dataSource: scheduleData };
const onRefreshLayout = () => {
scheduleObj.current.refreshLayout();
}
return (<div>
<ButtonComponent onClick={onRefreshLayout}>Refresh Layout</ButtonComponent> <ScheduleComponent ref={scheduleObj} width='100%' height='550px' selectedDate={new Date(2021, 10, 15)} eventSettings={eventSettings}>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month]} />
</ScheduleComponent>
</div>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import { useRef } from 'react';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
ScheduleComponent, Day, Week, WorkWeek, Month, Inject,
ViewsDirective, ViewDirective, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
const App = () => {
const scheduleObj = useRef<ScheduleComponent>(null);
const 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
}];
const eventSettings: EventSettingsModel = { dataSource: scheduleData };
const onRefreshLayout = (): void => {
scheduleObj.current.refreshLayout();
}
return (<div>
<ButtonComponent onClick={onRefreshLayout}>Refresh Layout</ButtonComponent> <ScheduleComponent ref={scheduleObj} width='100%' height='550px' selectedDate=
{new Date(2021, 10, 15)} eventSettings={eventSettings}>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month]} />
</ScheduleComponent>
</div>)
};
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/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>