Reverse in EJ2 JavaScript Timeline control

26 Feb 20253 minutes to read

You can display the Timeline items in reverse order for different alignments by using the reverse property. This feature provides adaptability and enhances user interaction.

var careerProgress = [
  { content: 'June 2022', oppositeContent: 'Graduated \n Bachelors in Computer Engineering' },
  { content: 'Aug 2022', oppositeContent: 'Software Engineering Internship \n ABC Software and Technology' },
  { content: 'Feb 2023', oppositeContent: 'Associate Software Engineer \n ABC Software and Technology' },
  { content: 'Mar 2024', oppositeContent: 'Software Level 1 Engineer \n XYZ Solutions' },
];

// Initializes the Timeline control
var timeline = new ej.layouts.Timeline({
  items: careerProgress,
  reverse: true,
  align: 'before'
});

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

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