Having trouble getting help?
Contact Support
Contact Support
State persistence in EJ2 TypeScript Scheduler control
3 Mar 202524 minutes to read
State persistence allowed Scheduler to retain the currentView, selectedDate and Scroll position values in the localStorage for state maintenance even if the browser is refreshed or if you move to the next page within the browser. This action is handled through the enablePersistence property which is set to false by default. When it is set to true, currentView, selectedDate and Scroll position values of the scheduler component will be retained even after refreshing the page.
Note: Scheduler
idis essential to set state persistence.
The following sample demonstrates how to set state persistence of the Scheduler component.
import { Schedule, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '450px',
selectedDate: new Date(2018, 1, 15),
currentView: 'Month',
enablePersistence: true,
views: ["Day", "Week", "WorkWeek", "Month"],
eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');<!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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="Schedule"></div>
</div>
</body>
</html>/**
* Schedule datasource spec
*/
export let roomData: Object[] = [
{
Id: 1,
Subject: 'Board Meeting',
Description: 'Meeting to discuss business goal of 2018.',
StartTime: new Date(2018, 6, 30, 9, 0),
EndTime: new Date(2018, 6, 30, 11, 0),
RoomId: 1
},
{
Id: 2,
Subject: 'Training session on JSP',
Description: 'Knowledge sharing on JSP topics.',
StartTime: new Date(2018, 6, 30, 15, 0),
EndTime: new Date(2018, 6, 30, 17, 0),
RoomId: 5
},
{
Id: 3,
Subject: 'Sprint Planning with Team members',
Description: 'Planning tasks for sprint.',
StartTime: new Date(2018, 6, 30, 9, 30),
EndTime: new Date(2018, 6, 30, 11, 0),
RoomId: 3
},
{
Id: 4,
Subject: 'Meeting with Client',
Description: 'Customer meeting to discuss features.',
StartTime: new Date(2018, 6, 30, 11, 0),
EndTime: new Date(2018, 6, 30, 13, 0),
RoomId: 4
},
{
Id: 5,
Subject: 'Support Meeting with Managers',
Description: 'Meeting to discuss support plan.',
StartTime: new Date(2018, 6, 30, 16, 0),
EndTime: new Date(2018, 6, 30, 17, 30),
RoomId: 5
},
{
Id: 6, Subject: 'Client Meeting',
Description: 'Meeting to discuss client requirements.',
StartTime: new Date(2018, 6, 30, 10, 30),
EndTime: new Date(2018, 6, 30, 13, 0),
RoomId: 6
},
{
Id: 7,
Subject: 'Appraisal Meeting',
Description: 'Meeting to discuss employee appraisals.',
StartTime: new Date(2018, 6, 30, 15, 0),
EndTime: new Date(2018, 6, 30, 16, 30),
RoomId: 7
},
{
Id: 8,
Subject: 'HR Meeting',
Description: 'Meeting to discuss HR plans.',
StartTime: new Date(2018, 6, 30, 8, 0),
EndTime: new Date(2018, 6, 30, 9, 0),
RoomId: 4
},
{
Id: 9,
Subject: 'Customer Meeting',
Description: 'Meeting to discuss customer reported issues.',
StartTime: new Date(2018, 6, 30, 10, 0),
EndTime: new Date(2018, 6, 30, 12, 0),
RoomId: 8
},
{
Id: 10,
Subject: 'Board Meeting',
Description: 'Meeting to discuss business plans.',
StartTime: new Date(2018, 6, 30, 14, 30),
EndTime: new Date(2018, 6, 30, 17, 0),
RoomId: 9
},
{
Id: 11,
Subject: 'Training session on Vue',
Description: 'Knowledge sharing on Vue concepts.',
StartTime: new Date(2018, 6, 30, 9, 0),
EndTime: new Date(2018, 6, 30, 10, 30),
RoomId: 10
},
{
Id: 12,
Subject: 'Meeting with Team members',
Description: 'Meeting to discuss on work report.',
StartTime: new Date(2018, 6, 30, 11, 30),
EndTime: new Date(2018, 6, 30, 12, 0),
RoomId: 5
},
{
Id: 13,
Subject: 'Meeting with General Manager',
Description: 'Meeting to discuss support plan.',
StartTime: new Date(2018, 6, 30, 14, 0),
EndTime: new Date(2018, 6, 30, 16, 0),
RoomId: 5
},
{
Id: 14,
Subject: 'Board Meeting',
Description: 'Meeting to discuss business goal of 2018.',
StartTime: new Date(2018, 6, 31, 9, 0),
EndTime: new Date(2018, 6, 31, 11, 0),
RoomId: 1
},
{
Id: 15,
Subject: 'Training session on JSP',
Description: 'Knowledge sharing on JSP topics.',
StartTime: new Date(2018, 6, 31, 14, 0),
EndTime: new Date(2018, 6, 31, 17, 0),
RoomId: 6
},
{
Id: 16,
Subject: 'Sprint Planning with Team members',
Description: 'Planning tasks for sprint.',
StartTime: new Date(2018, 6, 31, 9, 30),
EndTime: new Date(2018, 6, 31, 11, 0),
RoomId: 2
},
{
Id: 17,
Subject: 'Meeting with Client',
Description: 'Customer meeting to discuss features.',
StartTime: new Date(2018, 6, 31, 11, 0),
EndTime: new Date(2018, 6, 31, 13, 0),
RoomId: 7
},
{
Id: 18,
Subject: 'Support Meeting with Managers',
Description: 'Meeting to discuss support plan.',
StartTime: new Date(2018, 6, 31, 16, 0),
EndTime: new Date(2018, 6, 31, 17, 30),
RoomId: 2
},
{
Id: 19,
Subject: 'Training session on C#',
Description: 'Training session',
StartTime: new Date(2018, 6, 31, 14, 30),
EndTime: new Date(2018, 6, 31, 16, 0),
RoomId: 9
},
{
Id: 20,
Subject: 'Client Meeting - Phase 1',
Description: 'Meeting to discuss client requirements.',
StartTime: new Date(2018, 7, 1, 11, 0),
EndTime: new Date(2018, 7, 1, 13, 30),
RoomId: 3
},
{
Id: 21,
Subject: 'Appraisal Meeting',
Description: 'Meeting to discuss employee appraisals.',
StartTime: new Date(2018, 6, 31, 15, 0),
EndTime: new Date(2018, 6, 31, 16, 30),
RoomId: 3
},
{
Id: 22,
Subject: 'HR Meeting',
Description: 'Meeting to discuss HR plans.',
StartTime: new Date(2018, 6, 31, 8, 0),
EndTime: new Date(2018, 6, 31, 9, 0),
RoomId: 4
},
{
Id: 23,
Subject: 'Customer Meeting',
Description: 'Meeting to discuss customer reported issues.',
StartTime: new Date(2018, 6, 31, 10, 0),
EndTime: new Date(2018, 6, 31, 12, 0),
RoomId: 4
},
{
Id: 24,
Subject: 'Board Meeting',
Description: 'Meeting to discuss business plans.',
StartTime: new Date(2018, 7, 1, 16, 30),
EndTime: new Date(2018, 7, 1, 18, 0),
RoomId: 10
},
{
Id: 25,
Subject: 'Training session on Vue',
Description: 'Knowledge sharing on Vue concepts.',
StartTime: new Date(2018, 6, 31, 9, 0),
EndTime: new Date(2018, 6, 31, 10, 30),
RoomId: 5
},
{
Id: 26,
Subject: 'Meeting with Team members',
Description: 'Meeting to discuss on work report.',
StartTime: new Date(2018, 6, 31, 11, 30),
EndTime: new Date(2018, 6, 31, 12, 0),
RoomId: 5
},
{
Id: 27,
Subject: 'Meeting with General Manager',
Description: 'Meeting to discuss support plan.',
StartTime: new Date(2018, 6, 31, 14, 0),
EndTime: new Date(2018, 6, 31, 16, 0),
RoomId: 10
},
{
Id: 28,
Subject: 'Board Meeting',
Description: 'Meeting to discuss business goal of 2018.',
StartTime: new Date(2018, 7, 1, 9, 0),
EndTime: new Date(2018, 7, 1, 11, 0),
RoomId: 1
},
{
Id: 29,
Subject: 'Training session on JSP',
Description: 'Knowledge sharing on JSP topics.',
StartTime: new Date(2018, 7, 1, 17, 0),
EndTime: new Date(2018, 7, 1, 20, 0),
RoomId: 6
},
{
Id: 30,
Subject: 'Sprint Planning with Team members',
Description: 'Planning tasks for sprint.',
StartTime: new Date(2018, 7, 1, 10, 30),
EndTime: new Date(2018, 7, 1, 12, 0),
RoomId: 2
},
{
Id: 31,
Subject: 'Meeting with Client',
Description: 'Customer meeting to discuss features.',
StartTime: new Date(2018, 7, 1, 18, 0),
EndTime: new Date(2018, 7, 1, 20, 0),
RoomId: 8
},
{
Id: 32,
Subject: 'Support Meeting with Managers',
Description: 'Meeting to discuss support plan.',
StartTime: new Date(2018, 7, 1, 16, 0),
EndTime: new Date(2018, 7, 1, 17, 30),
RoomId: 7
},
{
Id: 33,
Subject: 'Training session on C#',
Description: 'Training session',
StartTime: new Date(2018, 7, 1, 14, 30),
EndTime: new Date(2018, 7, 1, 16, 0),
RoomId: 2
},
{
Id: 34,
Subject: 'Client Meeting - Phase 2',
Description: 'Meeting to discuss client requirements.',
StartTime: new Date(2018, 7, 1, 11, 30),
EndTime: new Date(2018, 7, 1, 14, 0),
RoomId: 3
},
{
Id: 35,
Subject: 'Appraisal Meeting',
Description: 'Meeting to discuss employee appraisals.',
StartTime: new Date(2018, 7, 1, 15, 0),
EndTime: new Date(2018, 7, 1, 16, 30),
RoomId: 8
},
{
Id: 36,
Subject: 'HR Meeting',
Description: 'Meeting to discuss HR plans.',
StartTime: new Date(2018, 7, 1, 9, 30),
EndTime: new Date(2018, 7, 1, 11, 30),
RoomId: 4
},
{
Id: 37,
Subject: 'Customer Meeting',
Description: 'Meeting to discuss customer reported issues.',
StartTime: new Date(2018, 7, 1, 10, 0),
EndTime: new Date(2018, 7, 1, 12, 0),
RoomId: 9
},
{
Id: 38,
Subject: 'Board Meeting',
Description: 'Meeting to discuss business plans.',
StartTime: new Date(2018, 7, 1, 15, 0),
EndTime: new Date(2018, 7, 1, 17, 0),
RoomId: 4
},
{
Id: 39,
Subject: 'Training session on Vue',
Description: 'Knowledge sharing on Vue concepts.',
StartTime: new Date(2018, 7, 1, 9, 0),
EndTime: new Date(2018, 7, 1, 10, 30),
RoomId: 5
},
{
Id: 40,
Subject: 'Meeting with Team members',
Description: 'Meeting to discuss on work report.',
StartTime: new Date(2018, 7, 1, 11, 30),
EndTime: new Date(2018, 7, 1, 12, 30),
RoomId: 5
},
{
Id: 41,
Subject: 'Meeting with General Manager',
Description: 'Meeting to discuss support plan.',
StartTime: new Date(2018, 7, 1, 14, 0),
EndTime: new Date(2018, 7, 1, 16, 0),
RoomId: 10
},
{
Id: 43,
Subject: 'HR Meeting',
Description: 'Meeting to discuss HR plans.',
StartTime: new Date(2018, 7, 1, 18, 0),
EndTime: new Date(2018, 7, 1, 20, 0),
RoomId: 2
},
{
Id: 44,
Subject: 'HR Meeting',
Description: 'Meeting to discuss HR plans.',
StartTime: new Date(2018, 7, 1, 17, 30),
EndTime: new Date(2018, 7, 1, 20, 0),
RoomId: 1
},
{
Id: 45,
Subject: 'Client Meeting - Phase 3',
Description: 'Meeting to discuss client requirements.',
StartTime: new Date(2018, 7, 1, 12, 0),
EndTime: new Date(2018, 7, 1, 14, 30),
RoomId: 3
},
{
Id: 46,
Subject: 'Board Meeting',
Description: 'Meeting to discuss business plans.',
StartTime: new Date(2018, 7, 1, 18, 30),
EndTime: new Date(2018, 7, 1, 20, 0),
RoomId: 4
},
{
Id: 47,
Subject: 'Board Meeting',
Description: 'Meeting to discuss business plans.',
StartTime: new Date(2018, 7, 1, 15, 30),
EndTime: new Date(2018, 7, 1, 18, 0),
RoomId: 5
},
{
Id: 48,
Subject: 'HR Meeting',
Description: 'Meeting to discuss HR plans.',
StartTime: new Date(2018, 7, 1, 18, 30),
EndTime: new Date(2018, 7, 1, 20, 0),
RoomId: 5
},
{
Id: 49,
Subject: 'HR Meeting',
Description: 'Meeting to discuss HR plans.',
StartTime: new Date(2018, 7, 1, 14, 30),
EndTime: new Date(2018, 7, 1, 16, 0),
RoomId: 6
},
{
Id: 50,
Subject: 'Board Meeting',
Description: 'Meeting to discuss business plans.',
StartTime: new Date(2018, 7, 1, 9, 30),
EndTime: new Date(2018, 7, 1, 12, 0),
RoomId: 6
},
{
Id: 51,
Subject: 'Client Meeting',
Description: 'Meeting to discuss client requirements.',
StartTime: new Date(2018, 7, 1, 10, 30),
EndTime: new Date(2018, 7, 1, 12, 0),
RoomId: 7
},
{
Id: 52,
Subject: 'Appraisal Meeting',
Description: 'Meeting to discuss employee appraisals.',
StartTime: new Date(2018, 7, 1, 18, 0),
EndTime: new Date(2018, 7, 1, 19, 30),
RoomId: 7
},
{
Id: 53,
Subject: 'Support Meeting with Managers',
Description: 'Meeting to discuss support plan.',
StartTime: new Date(2018, 7, 1, 15, 30),
EndTime: new Date(2018, 7, 1, 17, 0),
RoomId: 9
},
{
Id: 54,
Subject: 'Support Meeting with Managers',
Description: 'Meeting to discuss support plan.',
StartTime: new Date(2018, 7, 1, 11, 0),
EndTime: new Date(2018, 7, 1, 12, 30),
RoomId: 8
},
{
Id: 55,
Subject: 'Support Meeting with Managers',
Description: 'Meeting to discuss support plan.',
StartTime: new Date(2018, 7, 1, 11, 0),
EndTime: new Date(2018, 7, 1, 12, 30),
RoomId: 10
}
];
export let scheduleData: Object[] = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 1, 13, 9, 30),
EndTime: new Date(2018, 1, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 1, 14, 13, 0),
EndTime: new Date(2018, 1, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 1, 16, 11, 0),
EndTime: new Date(2018, 1, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
StartTime: new Date(2018, 1, 17, 9, 0),
EndTime: new Date(2018, 1, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 1, 19, 11, 0),
EndTime: new Date(2018, 1, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 1, 21, 11, 0),
EndTime: new Date(2018, 1, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 1, 22, 9, 30),
EndTime: new Date(2018, 1, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 1, 9, 10, 0),
EndTime: new Date(2018, 1, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 1, 7, 10, 30),
EndTime: new Date(2018, 1, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 1, 5, 10, 0),
EndTime: new Date(2018, 1, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 23, 11, 0),
EndTime: new Date(2018, 1, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 1, 12, 5, 30),
EndTime: new Date(2018, 1, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#ea7a57'
}
];You can refer to our JavaScript Scheduler feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Scheduler example to knows how to present and manipulate data.