Demos

Import/Export Events

Explore how to import and export events in Calendar.js with this example, showing you how to easily transfer calendar data between applications or back it up for later use.

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", {
    exportEventsEnabled: true,
    importEventsEnabled: true
} );

Create Import Script

Create the following JavaScript function to trigger importing of events:

function importEvents() {
    const input = document.createElement( "input" );
    input.type = "file";
    input.accept = ".ical, .ics, .json";
    input.multiple = "multiple";

    input.onchange = function() {
        calendarInstance.import( input.files );
    };

    input.click();
}

Result

Export Events

Import Events