Manually Refresh Layout in React Scheduler
Refresh template
In the React Scheduler, you can refresh specific template elements without re-rendering the entire component by using the refreshTemplates public method. You can use this method to refresh specific templates or all templates together. The following template names are accepted as arguments when you want to refresh them individually:
eventTemplatedateHeaderTemplateresourceHeaderTemplatequickInfoTemplateseditorTemplatetooltipTemplateheaderTooltipTemplate
The following code example shows how to use the refreshTemplates method to refresh multiple templates. Here, the following Scheduler templates are used: 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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.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 the Scheduler, you can refresh the layout manually without re-rendering the DOM element by using the refreshLayout public method. The following code example shows 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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.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>