Skip to main content

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: