Orientations in EJ2 TypeScript Timeline control

20 Mar 20246 minutes to read

The Timeline control supports the display of items in both horizontal and vertical direction by using the orientation property.

Vertical

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

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

const tripItenerary: TimelineItemModel[] = [
  { 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
let timeline: Timeline = new 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/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'>
        <div id="timeline"></div>
    </div>
    <style>
        #container {
            width: 60%;
            margin: 30px auto;
            padding: 30px;
        }
        #container:has(.e-vertical) {
            height: 350px;
        }
    </style>
</body>
</html>
#container {
    margin-top: 30px;
    padding: 30px;
}

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

Horizontal

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

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

const tripItenerary: TimelineItemModel[] = [
  { 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
let timeline: Timeline = new 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/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'>
        <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%;
}