Skip to main content

How to start

This clear and comprehensive tutorial will guide your through the steps you need to take in order to get a full-functional Event Calendar on a page.

Step 1. Including source files​

Start from creating an HTML file and call it index.html. Then proceed to include Event Calendar source files into the created file.

There are two necessary files:

  • the JS file of Event Calendar
  • the CSS file of Event Calendar
index.html
<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with Event Calendar</title>
        <script src="./dist/event-calendar.js"></script>   
        <link href="./dist/event-calendar.css" rel="stylesheet">
    </head>
    <body>
        <script>
        // your code will be here
        </script>
    </body>
</html>
info

You can also import Event Calendar into your project using yarn or npm commands. To get the trial version of Event Calendar, run the following commands:

// npm
npm config set @dhx:registry https://npm.dhtmlx.com
npm i @dhx/trial-eventcalendar

// yarn
yarn config set @dhx:registry https://npm.dhtmlx.com
yarn add @dhx/trial-eventcalendar

To get Event Calendar under the proprietary license, refer to Support Center!

tip

If you want to integrate JavaScript Event Calendar into the React, Angular or Vue project, refer to the corresponding Examples on Replit for more information.

Step 2. Creating Event Calendar​

Now you are ready to add Event Calendar to the page. For this you need to take the following steps:

  • specify a DIV container in the index.html file
  • initialize component using the eventCalendar.EventCalendar() constructor

The constructor takes an ID of HTML container where Event Calendar will be placed into and an object with the corresponding configuration properties. See an example below:

index.html
<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with Event Calendar</title>
        <script src="./dist/event-calendar.js"></script>   
        <link href="./dist/event-calendar.css" rel="stylesheet">  
    </head>
    <body>
        <div id="root"></div>
        <script>
            new eventCalendar.EventCalendar("#root", {
                // configuration properties
            });
        </script>
    </body>
</html>

Step 3. Configuring Event Calendar​

Next you can specify the configuration properties you want the Event Calendar component to have when initialized.

new eventCalendar.EventCalendar("#root", {
    calendars,
    colors,
    config,
    date,
    editorShape,
    events,
    locale,
    mode,
    sidebar,
    templates,
    theme
});

What's next​

That's all. Just three simple steps and you have a handy tool for scheduling and managing your daily events. Now you can start working with your tasks or keep exploring the inner world of JavaScript Event Calendar.