Items in EJ2 JavaScript Timeline control

5 Mar 202620 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

Define the item content using the content property.

String content

Define string content for Timeline items.

index.js
index.html
styles.css
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/33.1.44/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">

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

    <script src="https://cdn.syncfusion.com/ej2/33.1.44/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

Specify template content for items by using a selector for an HTML element.

index.js
index.html
styles.css
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/33.1.44/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">

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

    <script src="https://cdn.syncfusion.com/ej2/33.1.44/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

Add additional information to each Timeline item using the oppositeContent property; this content is positioned opposite the item content. Similar to the content property,users can define string or function as contents for oppositeContent.

index.js
index.html
styles.css
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/33.1.44/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/33.1.44/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

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

Text can be displayed for the Timeline items using the dotCss property, by adding text to the CSS content property.

index.js
index.html
styles.css
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/33.1.44/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/33.1.44/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

The disabled property can be used to disable an item when set to true. By default, the value is false.

index.js
index.html
styles.css
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/33.1.44/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">

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

    <script src="https://cdn.syncfusion.com/ej2/33.1.44/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

Appearance of the Timeline item can be customized by specifying a custom CSS class using the cssClass property.

Search docs

Ask HelpBot