Customization in EJ2 TypeScript Timeline control
15 Mar 202423 minutes to read
You can customize the Timeline items dot size, connectors, dot borders, dot outer space and more to personalize its appearance. This section explains the different ways for styling the items.
Connector styling
Common styling
You can define the styles applicable to the all the Timeline item connectors.
import { Timeline, TimelineItemModel } from '@syncfusion/ej2-layouts';
const dailyRoutine: TimelineItemModel[] = [
{ content: 'Eat' },
{ content: 'Code' },
{ content: 'Repeat' }
];
// Initializes the Timeline control
let timeline: Timeline = new Timeline({
items: dailyRoutine,
cssClass: 'custom-connector'
});
// 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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.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>
<style>
.custom-connector .e-timeline-item.e-connector::after {
border-color: #f7c867;
border-width: 1.4px;
}
</style>
</body>
</html>
#container {
visibility: hidden;
margin-top: 30px;
padding: 30px;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
Individual styling
You can also apply unique styles to individual connectors, to differentiate specific items within the Timeline.
import { Timeline, TimelineItemModel } from '@syncfusion/ej2-layouts';
const dailyRoutine: TimelineItemModel[] = [
{ content: 'Eat', cssClass: 'state-initial' },
{ content: 'Code', cssClass: 'state-intermediate' },
{ content: 'Repeat' }
];
// Initializes the Timeline control
let timeline: Timeline = new Timeline({
items: dailyRoutine,
cssClass: 'custom-connector'
});
// 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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.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>
<style>
.custom-connector .state-initial.e-connector::after {
border: 1.5px #f8c050 dashed;
}
.custom-connector .state-intermediate.e-connector::after {
border: 1.5px #4d85f5 dashed;
}
</style>
</body>
</html>
#container {
visibility: hidden;
margin-top: 30px;
padding: 30px;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
Dot styling
Dot color
You can modify the color of the dots to highlight the specific Timeline items.
import { Timeline, TimelineItemModel } from '@syncfusion/ej2-layouts';
const orderStatus: TimelineItemModel[] = [
{ content: 'Ordered', cssClass: 'state-completed' },
{ content: 'Shipped', cssClass: 'state-progress' },
{ content: 'Delivered' }
];
// Initializes the Timeline control
let timeline: Timeline = new Timeline({
items: orderStatus,
cssClass: 'dot-color'
});
// 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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.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>
<style>
.dot-color .state-completed .e-dot {
background: #ff9900 ;
outline: 1px dashed #ff9900;
border-color: #ff9900;
}
.dot-color .state-progress .e-dot {
background: #33cc33;
outline: 1px dashed #33cc33;
border-color: #33cc33;
}
</style>
</body>
</html>
#container {
visibility: hidden;
margin-top: 30px;
padding: 30px;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
Dot size
You can adjust the size of the dot to make it larger or smaller by using the --dot-size
variable.
import { Timeline, TimelineItemModel } from '@syncfusion/ej2-layouts';
const dotSizes: TimelineItemModel[] = [
{ content: 'Extra Small', cssClass: 'x-small' },
{ content: 'Small', cssClass: 'small' },
{ content: 'Medium', cssClass: 'medium' },
{ content: 'Large', cssClass: 'large' }
];
// Initializes the Timeline control
let timeline: Timeline = new Timeline({
items: dotSizes,
cssClass: 'dot-size'
});
// 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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.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>
<style>
.dot-size .e-dot {
background: #33cc33;
}
.dot-size .x-small .e-dot {
--dot-size: 12px;
}
.dot-size .small .e-dot {
--dot-size: 18px;
}
.dot-size .medium .e-dot {
--dot-size: 24px;
}
.dot-size .large .e-dot {
--dot-size: 30px;
}
</style>
</body>
</html>
#container {
visibility: hidden;
margin-top: 30px;
padding: 30px;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
Dot shadow
You can add shadow effects to the Timeline dots to make it feel visually engaging by using the --dot-outer-space
& --dot-border
variables.
import { Timeline, TimelineItemModel } from '@syncfusion/ej2-layouts';
const orderStatus: TimelineItemModel[] = [
{ content: 'Ordered' },
{ content: 'Shipped' },
{ content: 'Delivered' }
];
// Initializes the Timeline control
let timeline: Timeline = new Timeline({
items: orderStatus,
cssClass: 'dot-shadow'
});
// 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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.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>
<style>
.dot-shadow .e-dot {
--dot-outer-space: 3px;
--dot-border: 3px;
--dot-size: 20px;
outline-color: #dee2e6;
border-color: #fff;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5) ,
2px -2px 4px rgba(255, 255, 255, 0.5) inset;
}
</style>
</body>
</html>
#container {
visibility: hidden;
margin-top: 30px;
padding: 30px;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
Dot variant
You can achieve the desired dot variant by customizing the border, outline and background colors of the Timeline dots.
import { Timeline, TimelineItemModel } from '@syncfusion/ej2-layouts';
const dotVariants: TimelineItemModel[] = [
{ content: 'Filled', cssClass: 'dot-filled' },
{ content: 'Flat', cssClass: 'dot-flat' },
{ content: 'Outlined', cssClass: 'dot-outlined' }
];
// Initializes the Timeline control
let timeline: Timeline = new Timeline({
items: dotVariants,
cssClass: 'dot-variant'
});
// 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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.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>
<style>
.dot-variant .dot-filled .e-dot::before { content: 'A'; color: #fff;}
.dot-variant .dot-flat .e-dot::before { content: 'B'; color: #fff;}
.dot-variant .dot-outlined .e-dot::before { content: 'C';}
.dot-variant .dot-filled .e-dot {
background: #33cc33;
--dot-outer-space: 3px;
outline-color: #81ff05;
--dot-size: 25px;
}
.dot-variant .dot-flat .e-dot {
background: #33cc33;
--dot-size: 25px;
--dot-radius: 10%;
}
.dot-variant .dot-outlined .e-dot {
outline-color: #33cc33;
--dot-outer-space: 3px;
background-color: unset;
--dot-size: 25px;
}
</style>
</body>
</html>
#container {
visibility: hidden;
margin-top: 30px;
padding: 30px;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
Dot outline
By adding the e-outline
class to the Timeline cssClass
property, it enables the dots to have an outline state.
<!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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.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%;
}