State persistence in Vue Schedule component

18 Nov 20185 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: The Scheduler id is required to enable state persistence.

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

<template>
    <div>
        <div id='app'>
            <div id='container'>
                <ejs-schedule height='550px' width='100%' :selectedDate='selectedDate' :eventSettings='eventSettings'
                    :enablePersistence='enablePersistence'>
                </ejs-schedule>
            </div>
        </div>
    </div>
</template>
<script setup>
import { provide } from "vue";
import { scheduleData } from './datasource.js';
import { ScheduleComponent as EjsSchedule, Day, Week, TimelineViews, Month, Agenda } from '@syncfusion/ej2-vue-schedule';

const selectedDate = new Date(2018, 1, 15);
const views = ['Day', 'Week', 'TimelineWeek', 'Month', 'Agenda'];
const enablePersistence = true;
const eventSettings = { dataSource: scheduleData };

provide('schedule', [Day, Week, TimelineViews, Month, Agenda]);

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";
</style>
<template>
    <div>
        <div id='app'>
            <div id='container'>
                <ejs-schedule height='550px' width='100%' :selectedDate='selectedDate' :eventSettings='eventSettings'
                    :enablePersistence='enablePersistence'>
                </ejs-schedule>
            </div>
        </div>
    </div>
</template>
<script>
import { scheduleData } from './datasource.js';
import { ScheduleComponent, Day, Week, TimelineViews, Month, Agenda } from '@syncfusion/ej2-vue-schedule';

export default {
    name: "App",
    components: {
        "ejs-schedule": ScheduleComponent
    },
    data() {
        return {
            selectedDate: new Date(2018, 1, 15),
            views: ['Day', 'Week', 'TimelineWeek', 'Month', 'Agenda'],
            enablePersistence: true,
            eventSettings: { dataSource: scheduleData }
        }
    },
    provide: {
        schedule: [Day, Week, TimelineViews, Month, Agenda]
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";
</style>

For a complete overview of resource scheduling features, visit the Vue Scheduler feature tour page. Explore live examples at Vue Scheduler example to knows how to present and manipulate data.