Items in EJ2 TypeScript Timeline control

6 Mar 202518 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.

import { Timeline, TimelineItemModel } from '@syncfusion/ej2-layouts';

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

// Initializes the Timeline control
let timeline: Timeline = new 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.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-layouts/styles/material.css" rel="stylesheet" />

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

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container' style="height: 300px;">
        <div id="timeline"></div>
    </div>
</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.

import { Timeline, TimelineItemModel } from '@syncfusion/ej2-layouts';

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

// Initializes the Timeline control
let timeline: Timeline = new 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.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-layouts/styles/material.css" rel="stylesheet" />

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

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container' style="height: 300px;">
        <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>
</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.

import { Timeline, TimelineItemModel } from '@syncfusion/ej2-layouts';

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

// Initializes the Timeline control
let timeline: Timeline = new 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.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-layouts/styles/material.css" rel="stylesheet" />

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

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container' style="height: 250px;">
        <div id="timeline"></div>
    </div>
</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.

import { Timeline, TimelineItemModel } from '@syncfusion/ej2-layouts';

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

// Initializes the Timeline control
let timeline: Timeline = new 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.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-layouts/styles/material.css" rel="stylesheet" />

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

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container' style="height: 300px;">
        <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>
</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.

import { Timeline, TimelineItemModel } from '@syncfusion/ej2-layouts';

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

// Initializes the Timeline control
let timeline: Timeline = new 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.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-layouts/styles/material.css" rel="stylesheet" />

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

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container' style="height: 250px;">
        <div id="timeline"></div>
    </div>
</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.