Implementing Syncfusion TypeScript Timeline

When to Use This Skill

Use this skill when you need to:

• Display items in chronological or sequential order
• Visualize timelines, milestones, or event progression
• Show workflow steps or process flows
• Create status tracking displays (order tracking, project milestones, career paths)
• Arrange content in Before, After, Alternate, or Reverse alignments
• Customize timeline appearance with dots, connectors, and styles
• Handle timeline events like lifecycle and rendering callbacks
• Use horizontal or vertical orientations for timeline layout

Timeline Control Overview

The Syncfusion TypeScript Timeline control displays content items in a sequential or chronological layout. It supports:

• Multiple Alignments: Before, After, Alternate, AlternateReverse
• Orientations: Horizontal and Vertical layouts
• Rich Content: String content, templated content, or opposite content
• Customization: Dot styling, connector customization, CSS classes
• Events: Created, beforeItemRender lifecycle events
• Reverse Mode: Display items in reverse order
• Advanced Templates: Full control over item appearance

Quick Start Guide

Basic Timeline Creation

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

// Create timeline items
let timeline: Timeline = new Timeline({
  items: [{}, {}, {}, {}]
});

// Render to DOM element
timeline.appendTo("#timeline");

Timeline with Content

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

const items: TimelineItemModel[] = [
  { content: 'Item 1' },
  { content: 'Item 2' },
  { content: 'Item 3' }
];

let timeline: Timeline = new Timeline({
  items: items,
  orientation: 'Vertical'
});

timeline.appendTo("#timeline");

Core Concepts

Key Properties

• items - Array of TimelineItemModel objects defining timeline items
• orientation - Display direction: Vertical (default) or Horizontal
• align - Content alignment: Before, After, Alternate, AlternateReverse
• reverse - Boolean to display items in reverse order
• template - HTML template selector for custom item rendering
• cssClass - Custom CSS class for styling the timeline container
• created - Event triggered when timeline rendering completes
• beforeItemRender - Event triggered before each item renders

TimelineItemModel Properties

• content - Main content (string or template selector)
• oppositeContent - Opposite-side content (string or template selector)
• dotCss - CSS class for dot customization
• cssClass - CSS class for individual item styling
• disabled - Boolean to disable specific items

Documentation and Navigation Guide

Getting Started & Setup

📄 Read: [references/getting-started.md](references/getting-started.md)

• Package installation and dependencies
• Development environment setup
• CSS style imports and theming
• Basic timeline creation and initialization
• First working example

Items, Content & Opposite Content

📄 Read: [references/items-and-content.md](references/items-and-content.md)

• Adding string content to items
• Using templated content with selectors
• Configuring oppositeContent property
• Disabling specific timeline items
• Custom CSS classes for items
• Dot customization with dotCss property

Alignment & Orientation Modes

📄 Read: [references/alignment-and-orientation.md](references/alignment-and-orientation.md)

• Before alignment (content positioning)
• After alignment (reversed content positioning)
• Alternate alignment (alternating arrangement)
• AlternateReverse alignment (reverse alternating)
• Vertical orientation (default, stacked vertically)
• Horizontal orientation (side-by-side layout)
• Layout combinations and use cases

Customization & Styling

📄 Read: [references/customization-styling.md](references/customization-styling.md)

• Common connector styling (all connectors)
• Individual connector styling (per-item styling)
• Dot color customization
• Dot size adjustment with CSS variables
• Dot border and outline styling
• CSS selector patterns for customization
• Advanced styling techniques

Templating & Custom Rendering

📄 Read: [references/templating.md](references/templating.md)

• Template property and template selectors
• Template context (item, itemIndex)
• Advanced HTML template usage
• Dot customization within templates
• Progress line styling
• Template best practices and patterns

Events & Lifecycle Hooks

📄 Read: [references/events-and-lifecycle.md](references/events-and-lifecycle.md)

• Created event (triggered on render complete)
• beforeItemRender event (triggered before each item renders)
• TimelineRenderingEventArgs for event handling
• Using events for initialization and customization
• Event callback patterns

Reverse Layout Mode

📄 Read: [references/reverse-layout.md](references/reverse-layout.md)

• Reverse property for reverse item ordering
• Use cases for reverse display
• Reverse with different alignments
• Combining reverse with orientations

Complete API Reference

📄 Read: [references/api-reference.md](references/api-reference.md)

• Properties & Defaults - All 9 Timeline properties with types and default values
• Methods - All 7 Timeline methods (addEventListener, appendTo, dataBind, etc.)
• Events & Arguments - beforeItemRender and created events with TimelineRenderingEventArgs
• Item Configuration - All 5 TimelineItemModel properties
• Enumerations - TimelineAlign and TimelineOrientation values
• Quick Setup Example - Complete working configuration

Common Patterns

Status Tracking Timeline

Display sequential status updates with custom styling:

const status = [
  { content: 'Ordered', cssClass: 'state-completed' },
  { content: 'Shipped', cssClass: 'state-progress' },
  { content: 'Delivered' }
];

let timeline: Timeline = new Timeline({
  items: status,
  cssClass: 'status-timeline'
});

Dual-Content Timeline

Show main content with opposite context information:

const events = [
  { content: 'Day 1, 4:00 PM', oppositeContent: 'Check-in' },
  { content: 'Day 1, 7:00 PM', oppositeContent: 'Dinner' }
];

let timeline: Timeline = new Timeline({
  items: events,
  align: 'Alternate',
  orientation: 'Vertical'
});

Horizontal Milestone Timeline

Display project milestones horizontally:

let timeline: Timeline = new Timeline({
  items: milestones,
  orientation: 'Horizontal',
  align: 'Before'
});

Setup Requirements

Dependencies

@syncfusion/ej2-layouts
  └── @syncfusion/ej2-base

CSS Imports

@import "@syncfusion/ej2-base/styles/fluent2.css";
@import "@syncfusion/ej2-layouts/styles/fluent2.css";

HTML Element

<div id="timeline"></div>

Ready to implement? Choose a reference guide above based on your current task, or start with [Getting Started](references/getting-started.md) for setup instructions.