Having trouble getting help?
Contact Support
Contact Support
Manual refresh in EJ2 JavaScript Scheduler control
18 Mar 20254 minutes to read
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.
var data = [
{
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
}
];
var scheduleObj = new ej.schedule.Schedule({
height: '550px',
selectedDate: new Date(2021, 10, 15),
views: ['Day', 'Week', 'WorkWeek', 'Month'],
eventSettings: {
dataSource: data
}
});
scheduleObj.appendTo('#Schedule');
var btn = new ej.buttons.Button({
cssClass: 'e-info'
});
btn.appendTo('#btn1');
btn.element.onclick = function () {
scheduleObj.refreshLayout();
};
<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Schedule Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-schedule/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<button id="btn1">Refresh Layout</button>
<div id="Schedule"></div>
</div>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>