Search
Serialization
Introduction
General Information
What's New In This Release
Version History
Getting Started
Code Completion With VSDoc IntelliSense
Programming Interface Overview
Tutorials
Calendar View and Settings
Handling Events
CSS Styling
Serialization
Reference
Licensing
Online Resources
Technical Support
MindFusion Products

You can save and load the schedule in two formats – Json and XML. Different calendar elements: Item, Contact, Reminder, Recurrence, Location, Resource, Task also have saveToXml / loadFromXml methods as well toJson and fromJson – check their API. For our sample, we will use the Json data format. We will elaborate our first schedule with two buttons – one for load and one for save from / to json.

### I. Buttons

Declare two buttons in your HTML page, provide them with an id:

JavaScript Copy Code
<button id="saveButton">Save to Json</button><button id="loadButton">Load from Json</button>

### II. Save the Schedule

Add a handler for the click event to the save button:

JavaScript Copy Code
var button = document.getElementById( 'saveButton' ); button.addEventListener( 'click', function() { //event handling code goes here });

In the handler, we call the schedule.toJson() method to get the Json representation of the schedule as it is. Then, we create a link and we set the name of the json file that will be exported. Then, we create a click event that will be raised when the button is pushed.

JavaScript Copy Code
button.addEventListener( 'click', function() { var data = calendar.schedule.toJson(); var blob = new Blob( [ data ], { type: 'application/json' }); url = URL.createObjectURL( blob ); var link = document.createElement( 'a' ); link.setAttribute( 'href', url ); link.setAttribute( 'download', 'first-schedule.json' ); var event = document.createEvent( 'MouseEvents' ); event.initMouseEvent( 'click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null); link.dispatchEvent( event ); });

### III. Load the Schedule

Once we have saved a schedule, let’s load it using schedule.fromJson(). We attach a handler for the click event to the saveButton, the handler calls a single init() method, which we will look later in code:

JavaScript Copy Code
var button1 = document.getElementById( 'loadButton'); button1.addEventListener( 'click', function() { init(); });

Then, we create a callback that will load the file. We place the json file in the same directory as the HTML file and the JavaScript file. If yours is somewhere else – edit the path to it:

JavaScript Copy Code
//a method for reading a Json file function loadJSON(callback) { var xobj = new XMLHttpRequest(); xobj.overrideMimeType("application/json"); xobj.open('GET', 'first-schedule.json', true); // Replace 'first-schedule' with the path to your file xobj.onreadystatechange = function () { if (xobj.readyState == 4 && xobj.status == "200") { // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode callback(xobj.responseText); } }; xobj.send(null); }

Finally, we need to call the load JSON method and load the schedule from the json string that we’ve read:

JavaScript Copy Code
function init() { loadJSON(function(response) { // load the calendar from the Json file calendar.schedule.fromJson(response); }); }

And that’s all. Now we can persist our calendar at any time and load it later on with all appointments, recurrences, contacts etc. Here is the result:

Serializing our first schedule into a Json file.