Initialization

This guide will give you detailed instructions on how to create Event Calendar on a page to enrich your application with the features of this tool. Take the following steps to get a ready-to-use component:

1. Include the Event Calendar source files on a page
2. Create a container for Event Calendar
3. Initialize Event Calendar with a constructor

Including source files

Download the package and unpack it into a folder of your project.

To create Event Calendar, you need to include 2 source files on your page:

• event-calendar.js
• event-calendar.css

Make sure that you set the correct paths to the source files:

index.html

<script type="text/javascript" src="./dist/event-calendar.js"></script>  
<link rel="stylesheet" href="./dist/event-calendar.css">

Creating container

Add a container for Event Calendar and give it an ID, for example "root":

index.html

<div id="root"></div>

Initializing Event Calendar

Initialize Event Calendar using the eventCalendar.EventCalendar() constructor. It takes two parameters:

• an HTML container (the ID of the HTML container)
• an object with configuration properties

index.html

// create Event Calendar
new eventCalendar.EventCalendar("#root", {
    // configuration properties
});

tip

The full list of the Event Calendar configuration properties can be found here.

Example

In this snippet you can see how to initialize JavaScript Event Calendar with the initial settings: