State persistence in Angular Schedule component

9 Oct 20252 minutes to read

State persistence allows the Scheduler to retain the currentView, selectedDate and scroll position values in the localStorage for state maintenance even if the browser is refreshed or you navigate to another page. This behavior is enabled through the enablePersistence property, which is disabled by default. When set to true, the Scheduler’s currentView, selectedDate and scroll position values are preserved after a page refresh.

Note: Scheduler id is Essential® to set state persistence.

The following sample demonstrates how to set state persistence of the Scheduler component.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ScheduleModule } from '@syncfusion/ej2-angular-schedule'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService} from '@syncfusion/ej2-angular-schedule'



import { Component } from '@angular/core';
import { EventSettingsModel, TimeScaleModel } from '@syncfusion/ej2-angular-schedule';
import { scheduleData } from './datasource';

@Component({
imports: [
        
        ScheduleModule,
        ButtonModule
    ],

providers: [DayService, 
                WeekService, 
                WorkWeekService, 
                MonthService,
                AgendaService,
                MonthAgendaService],
standalone: true,
  selector: 'app-root',
  // specifies the template string for the Schedule component
  template: `<ejs-schedule id="schedule" width='100%' height='550px' [selectedDate]="selectedDate" [eventSettings]="eventSettings" [enablePersistence]="enablePersistence"> </ejs-schedule>`
})
export class AppComponent {
    public selectedDate: Date = new Date(2018, 1, 15);
    public eventSettings: EventSettingsModel = { dataSource: scheduleData };
    public enablePersistence: Boolean = true;
 }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

You can refer to our Angular Scheduler feature tour page for its groundbreaking feature representations. You can also explore our Angular Scheduler example to know how to present and manipulate data.