Orientations in EJ2 JavaScript Timeline control

26 Feb 20256 minutes to read

The Timeline control supports displaying items in both horizontal and vertical directions using the orientation property.

Vertical Orientation

You can display items vertically, one below the other, by setting the orientation property to Vertical. By default, the items are displayed in vertical orientation.

var tripItenerary = [
  { content: 'Day 1, 4:00 PM', oppositeContent: 'Check-in and campsite visit' },
  { content: 'Day 1, 7:00 PM', oppositeContent: 'Dinner with music' },
  { content: 'Day 2, 5:30 AM', oppositeContent: 'Sunrise between mountains' },
  { content: 'Day 2, 8:00 AM', oppositeContent: 'Breakfast and check-out' },
];

// Initializes the Timeline control
var timeline = new ej.layouts.Timeline({
  items: tripItenerary,
  orientation: 'Vertical'
});

// 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">
        <!--Element to render the Timeline control-->
        <div id="timeline"></div>
    </div>

    <style>
        #container {
            width: 60%;
            margin: 20px auto;
            padding: 20px;
        }

        #container:has(.e-vertical) {
            height: 300px;
        }
    </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 {
    margin-top: 30px;
    padding: 30px;
}

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

Horizontal Orientation

In horizontal orientation, items are displayed side-by-side by setting the orientation property to Horizontal.

var tripItenerary = [
  { content: 'Day 1, 4:00 PM', oppositeContent: 'Check-in and campsite visit' },
  { content: 'Day 1, 7:00 PM', oppositeContent: 'Dinner with music' },
  { content: 'Day 2, 5:30 AM', oppositeContent: 'Sunrise between mountains' },
  { content: 'Day 2, 8:00 AM', oppositeContent: 'Breakfast and check-out' },
];

// Initializes the Timeline control
var timeline = new ej.layouts.Timeline({
  items: tripItenerary,
  orientation: 'Horizontal'
});

// 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">
        <!--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%;
}