Template in EJ2 JavaScript Timeline control

26 Feb 202511 minutes to read
The Timeline control allows you to customize the appearance of each item by using the template property. This enables modification of dot items, templated contents, progress bar styling, and more.
The template context provides the following information:
Type	Purpose
`item`	Indicates the current data of the Timeline item.
`itemIndex`	Indicates the current index of the Timeline item.
index.js
index.html
styles.css
var projectMilestones = [
  { content: 'Kickoff meeting' },
  { content: 'Content approved' },
  { content: 'Design approved' },
  { content: 'Product delivered' }
];

// Initializes the Timeline control
var timeline = new ej.layouts.Timeline({
  items: projectMilestones,
  orientation: 'horizontal',
  template: '#timeline-template',
  cssClass: 'custom-timeline'
});

// 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/30.1.37/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-layouts/styles/material.css" rel="stylesheet">

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

    <script src="https://cdn.syncfusion.com/ej2/30.1.37/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: 150px; width: 600px;">
        <!--Element to render the Timeline control-->
        <div id="timeline"></div>
    </div>
    <script id="timeline-template" type="text/x-jsrender">
        <div class='template-container item-${itemIndex}'>
            <div class="content-container">
                <div class="timeline-content"> ${item.content} </div>
            </div>
            <div class="content-connector"></div>
            <div class="progress-line">
                <span class="indicator"></span>
            </div>
        </div>
    </script>
    <style>
        .custom-timeline .e-timeline-item.e-item-template {
            align-items: flex-end;
        }

        .custom-timeline .e-timeline-items {
            justify-content: center;
        }

        .template-container .content-connector {
            position: absolute;
            left: 88%;
            width: 3px;
            height: 28px;
        }

        .template-container .content-container {
            padding: 8px;
            border-width: 1px;
            border-style: solid;
        }

        .content-container .timeline-content {
            font-size: 14px;
        }

        /* Color customizations - Progress line, connector line, dot border */
        .item-0 .progress-line,
        .item-0 .content-connector {
            background-color: rgb(233, 93, 93);
        }

        .item-1 .progress-line,
        .item-1 .content-connector {
            background-color: rgba(247, 179, 22, 0.907);
        }

        .item-2 .progress-line,
        .item-2 .content-connector {
            background-color: rgb(60, 184, 60);
        }

        .item-3 .progress-line,
        .item-3 .content-connector {
            background-color: rgb(153, 29, 230);
        }

        .item-0 .progress-line .indicator,
        .item-0 .content-container {
            border-color: rgb(233, 93, 93);
        }

        .item-1 .progress-line .indicator,
        .item-1 .content-container {
            border-color: rgba(247, 179, 22, 0.907);
        }

        .item-2 .progress-line .indicator,
        .item-2 .content-container {
            border-color: rgb(60, 184, 60);
        }

        .item-3 .progress-line .indicator,
        .item-3 .content-container {
            border-color: rgb(153, 29, 230);
        }

        .item-0 .content-container {
            box-shadow: 2px 2px 8px rgb(233, 93, 93);
        }

        .item-1 .content-container {
            box-shadow: 2px 2px 8px rgba(247, 179, 22, 0.907);
        }

        .item-2 .content-container {
            box-shadow: 2px 2px 8px rgb(60, 184, 60);
        }

        .item-3 .content-container {
            box-shadow: 2px 2px 8px rgb(153, 29, 230);
        }

        /* START --- Customizing Dot and progress line */
        .custom-timeline .template-container .indicator {
            position: absolute;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background-color: #fff;
            border-width: 6px;
            border-style: solid;
            left: 88%;
            transform: translate(-50%, -40%);
            cursor: pointer;
        }

        .progress-line {
            position: absolute;
            height: 10px;
            width: 100%;
            left: 0;
            top: 50%;
        }

        /* END --- Customizing Icon and progress line */
    </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: 50px auto;
    padding: 30px;
}

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