Persistence Storage : Demos : Calendar.js

side_navigation

Basic
Basic Calendar
Assign Custom Triggers
Views
Pin-Up Calendar
Widget Calendar
Date-Picker
Usage
Import/Export Events
Plugins
jQuery
Data Binding
Setup
Default First View
Reversed Days
Persistence Storage
Full-Screen
Translations

Persistence Storage

Explore how to use local storage with Calendar.js. This example shows a calendar instance that saves events and settings in the browser, ensuring your data persists across sessions.

Include Files

Make sure you include the following files:

<link rel="stylesheet" href="dist/calendar.js.css">

<script src="dist/calendar.min.js"></script>

Create DOM Element

Add a new DOM element to house the Calendar.js instance:

<div id="calendar"></div>

Create Calendar.js Instance

Run the following JavaScript to create a new Calendar.js instance:

const calendarInstance = new calendarJs( "calendar", {
    useLocalStorageForEvents: true
} );

Result

More Information

Need a different configuration option? Explore the complete Calendar.js documentation here to see every configuration option and learn how to use them in your projects.