Serialization

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

<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

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

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

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

//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

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.