Draggable Horizontal Timeline Plugin - jQuery JST Timeline

File Size: 8.13 KB
Views Total: 6727
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Draggable Horizontal Timeline Plugin - jQuery JST Timeline

JST Timeline is a small, dynamic, draggable jQuery timeline plugin which arranges events with dates and custom icons in a straight line.


  • jQuery
  • Moment.js
  • An iconic font. E.g. Font Awesome.

How to use it:

1. Load the necessary jQuery and moment.js libraries in the document.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/moment.min.js"></script>

2. Load an iconic font of your choice in the document.

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

3. Create a placeholder for the timeline.

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

4. Create an array of events as follows:

const myData = [{ 
      label: "My Event 1", 
      date: "11-02-2012", 
      id: 1, // unique ID
      iconClass: "", // icon class
      iconId: 1, // icon id defined in the option
      customClass: "" // custom class
      label: "My Event 2", 
      date: "11-02-2015", 
      id: 2,
      iconClass: "",
      iconId: 2,
      customClass: "" 
      label: "My Event 3", 
      date: "11-02-2018", 
      id: 3,
      iconClass: "", 
      iconId: 3, 
      customClass: ""
    // more events here

5. Generate a default timeline inside the placeholder element.


6. Determine whether to show the dates with no events. Default: null.

  showEmptyDates: false

7. Define the icon classes in the option.

  iconClasses: {
    0: "fas fa-layer-group",
    1: "fas fa-wrench",
    2: "fas fa-user-plus",
    3: "far fa-paper-plane",
    4: "fas fa-user-minus"

8. Customize the date format.

  momentFormat: 'DD/MM/YYYY',
  dataShowFormat: 'DD/MM/YYYY'

9. Scroll the timeline to a specific date.



v1.0.34 (2019-05-24)

  • Font size of box description changed for 12px


  • Added CSS property to handle text size


  • Bugfix


  • Enabled smooth scroll for goToData method

This awesome jQuery plugin is developed by justapagamentos. For more Advanced Usages, please check the demo page or visit the official website.