Skip to main content

​
Overview

JTimeline displays events in chronological order with:
  • Vertical or horizontal orientation
  • Custom icons per event
  • Color-coded indicators
  • Time labels
  • Rich custom content support
  • Automatic connector lines between events

​
Constructor

​
JTimeline()
constructor
Creates a new timeline in vertical orientation by default.

​
Basic Usage

JTimeline timeline = new JTimeline();
timeline.addEvent("Order Placed", "Customer placed order #1234", "2 hours ago");
timeline.addEvent("Payment Confirmed", "Payment received", "1 hour ago");
timeline.addEvent("Shipped", "Package shipped via FedEx", "30 min ago");
timeline.addEvent("Delivered", "Package delivered", "Just now");

​
Orientation

​
setOrientation(orientation)
void
Sets the timeline orientation.
timeline.setOrientation(Orientation.HORIZONTAL);
​
getOrientation()
Orientation
Returns the current orientation.

​
Adding Events

​
addEvent(title, description, time)
void
Adds a simple text event to the timeline.
​
addEvent(event)
void
Adds a fully configured Event object to the timeline.
JTimeline.Event event = new JTimeline.Event(
    "Deployment",
    "Application deployed to production",
    "10:30 AM"
);
event.setColorClass("success");
event.setIcon(new JIcon("check-circle").view());
timeline.addEvent(event);
​
getEvents()
ObservableList<Event>
Returns the observable list of events. Changes to this list automatically update the timeline.

​
Event Class

The JTimeline.Event class represents a single timeline event.

​
Constructor

​
Event(title, description, time)
constructor
Creates a new event.

​
Properties

​
setTitle(title)
void
Sets the event title.
​
getTitle()
String
Returns the event title.
​
setDescription(description)
void
Sets the event description.
​
getDescription()
String
Returns the event description.
​
setTime(time)
void
Sets the time label.
​
getTime()
String
Returns the time label.

​
Customization

​
setIcon(icon)
void
Sets a custom icon for the event indicator.
event.setIcon(new JIcon("check-circle").view());
​
getIcon()
Node
Returns the custom icon, or null if using default circle.
​
setColorClass(colorClass)
void
Sets the color variant for the indicator and connector line.
event.setColorClass("success"); // Green indicator
event.setColorClass("danger");  // Red indicator
​
getColorClass()
String
Returns the color class.
​
setCustomContent(content)
void
Sets custom JavaFX content to display below the description.
// Add a button to the event
JButton viewBtn = new JButton("View Details");
event.setCustomContent(viewBtn);

// Add a complex layout
VBox details = new VBox(
    new JLabel("Location: New York"),
    new JLabel("Status: Completed")
);
event.setCustomContent(details);
​
getCustomContent()
Node
Returns the custom content node.

​
Advanced Example

JTimeline timeline = new JTimeline();

// Event 1: Started (blue)
JTimeline.Event started = new JTimeline.Event(
    "Project Started",
    "Initial planning and requirements gathering",
    "Jan 1, 2024"
);
started.setColorClass("primary");
started.setIcon(new JIcon("play-circle").view());
timeline.addEvent(started);

// Event 2: Development (info)
JTimeline.Event dev = new JTimeline.Event(
    "Development Phase",
    "Sprint 1-4 completed successfully",
    "Jan 15, 2024"
);
dev.setColorClass("info");
dev.setIcon(new JIcon("code").view());

// Add custom content with progress
JProgressBar progress = new JProgressBar(0.75);
progress.setLabel("75% Complete");
dev.setCustomContent(progress);
timeline.addEvent(dev);

// Event 3: Testing (warning)
JTimeline.Event testing = new JTimeline.Event(
    "Testing",
    "QA testing in progress",
    "Feb 1, 2024"
);
testing.setColorClass("warning");
testing.setIcon(new JIcon("bug").view());
timeline.addEvent(testing);

// Event 4: Deployed (success)
JTimeline.Event deployed = new JTimeline.Event(
    "Deployed to Production",
    "Successfully deployed v1.0",
    "Feb 15, 2024"
);
deployed.setColorClass("success");
deployed.setIcon(new JIcon("check-circle").view());
timeline.addEvent(deployed);

// Horizontal orientation for compact view
timeline.setOrientation(Orientation.HORIZONTAL);

​
Visual Behavior

​
Vertical Mode

  • Events stack vertically
  • Time label appears beside title
  • Connector lines run vertically between indicators
  • Content flows downward

​
Horizontal Mode

  • Events arranged horizontally
  • Equal width for each event
  • Time label appears below title
  • Connector lines run horizontally between indicators

​
Connector Lines

  • Automatically drawn between events
  • Last event has no trailing line
  • Inherits color from event’s colorClass
  • Slight padding separates line from indicator

Build docs developers (and LLMs) love

Get started for freeTalk to us