Items in EJ2 TypeScript Timeline control

5 Mar 202618 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.ts
index.html
styles.css
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/32.2.3/ej2-base/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/fluent2.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

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

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

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

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

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

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

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

Search docs

Ask HelpBot