Items in EJ2 JavaScript Timeline control

6 Mar 202520 minutes to read

The Timeline items can be added by using the items property. Each item can be configured with options such as content, oppositeContent, dotCss, disabled and cssClass.

Adding content

You can define the item content using the content property.

String content

You can define string content for the Timeline items.

var orderStatus = [
  { content: 'Shipped' },
  { content: 'Departed' },
  { content: 'Arrived' },
  { content: 'Out for Delivery' }
];

// Initializes the Timeline control
var timeline = new ej.layouts.Timeline({
  items: orderStatus,
});

// Render initialized Timeline.
timeline.appendTo("#timeline");
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - Timeline</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-layouts/styles/material.css" rel="stylesheet">

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet">

    <script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container" style="height: 300px;">
        <!--Element to render the Timeline control-->
        <div id="timeline"></div>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>
#container {
    visibility: hidden;
    margin-top: 30px;
    padding: 30px;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

Templated content

You can specify template content for the items by using a selector for an element in HTML.

var orderStatus = [
  { content: '#content-template' },
  { content: '#content-template' },
  { content: '#content-template' },
  { content: 'Out for Delivery' }
];

// Initializes the Timeline control
var timeline = new ej.layouts.Timeline({
  items: orderStatus,
});

// Render initialized Timeline.
timeline.appendTo("#timeline");
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - Timeline</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-layouts/styles/material.css" rel="stylesheet">

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet">

    <script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container" style="height: 300px;">
        <!--Element to render the Timeline control-->
        <div id="timeline"></div>
    </div>

    <script id="content-template" type="text/x-jsrender">
        <div class="content-container">
            <div class="title">
                ${if(itemIndex==0)} Shipped
                ${else if(itemIndex==1)} Departed
                ${else if(itemIndex==2)} Arrived
                ${/if}
            </div>
            <span class="description">
                ${if(itemIndex==0)} Package details received
                ${else if(itemIndex==1)} In-transit
                ${else if(itemIndex==2)} Package arrived at nearest hub
                ${/if}
            </span>
            <div class="info"> 
                ${if(itemIndex==0)} - Awaiting dispatch
                ${else if(itemIndex==1)} (International warehouse)
                ${else if(itemIndex==2)} (New york - US)
                ${/if}
            </div>
        </div>
    </script>
    <style>
        .content-container {
            position: relative;
            width: 180px;
            padding: 10px;
            margin-left: 5px;
            box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
            background-color: ghostwhite;
        }

        .content-container::before {
            content: '';
            position: absolute;
            left: -8px;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-right: 8px solid silver;
        }

        .content-container .title {
            font-size: 16px;
        }

        .content-container .description {
            color: #999999;
            font-size: 12px;
        }

        .content-container .info {
            color: #999999;
            font-size: 10px;
        }
    </style>
    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>
#container {
    visibility: hidden;
    margin-top: 30px;
    padding: 30px;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

Adding opposite content

You can add additional information to each Timeline item using the oppositeContent property, which is positioned opposite the item content. Similar to the content property, you can define string or function as contents for oppositeContent.

var mealTimes = [
  { content: 'Breakfast', oppositeContent: '8:00 AM' },
  { content: 'Lunch', oppositeContent: '1:00 PM' },
  { content: 'Dinner', oppositeContent: '8:00 PM' },
];

// Initializes the Timeline control
var timeline = new ej.layouts.Timeline({
  items: mealTimes
});

// Render initialized Timeline.
timeline.appendTo("#timeline");
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - Timeline</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-layouts/styles/material.css" rel="stylesheet">

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container" style="height: 250px;">
        <!--Element to render the Timeline control-->
        <div id="timeline"></div>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>
#container {
    visibility: hidden;
    margin-top: 30px;
    padding: 30px;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

Dot item

Define a CSS class to set icons, background colors, or images to personalize the appearance of dots associated with each Timeline item using the dotCss property.

Adding icons

You can define a CSS class to display an icon for each item using the dotCss property.

Adding images

Include images for the Timeline items using the dotCss property by setting the CSS background-image property.

Adding text

You can display text for the Timeline items using the dotCss property, by adding text to the CSS content property.

var dotItems = [
  { content: 'Default' },
  { content: 'Icon', dotCss: 'e-icons e-check' },
  { content: 'Image', dotCss: 'custom-image' },
  { content: 'Text', dotCss: 'custom-text' }
];

// Initializes the Timeline control
var timeline = new ej.layouts.Timeline({
  items: dotItems,
});

// Render initialized Timeline.
timeline.appendTo("#timeline");
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - Timeline</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-layouts/styles/material.css" rel="stylesheet">

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container" style="height: 300px;">
        <!--Element to render the Timeline control-->
        <div id="timeline"></div>
    </div>

    <style>
        .e-dot.custom-image {
            background-image: url('https://helpej2.syncfusion.com/documentation/code-snippet/timeline/items/dot-item/dot-image.png');
        }

        .e-dot.custom-text::before {
            content: 'A';
        }
    </style>
    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>
#container {
    visibility: hidden;
    margin-top: 30px;
    padding: 30px;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

Disabling items

You can use the disabled property to disable an item when set to true. By default, the value is false.

var disabledItem = [
  { content: 'Eat' },
  { content: 'Code' },
  { content: 'Repeat', disabled: true },
];

// Initializes the Timeline control
var timeline = new ej.layouts.Timeline({
  items: disabledItem
});

// Render initialized Timeline.
timeline.appendTo("#timeline");
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - Timeline</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-layouts/styles/material.css" rel="stylesheet">

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet">

    <script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container" style="height: 250px;">
        <!--Element to render the Timeline control-->
        <div id="timeline"></div>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>
#container {
    visibility: hidden;
    margin-top: 30px;
    padding: 30px;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

cssClass

You can customize the appearance of the Timeline item by specifying a custom CSS class using the cssClass property.