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.

Requirements:

• 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.

$("#timeline").loadTimeline(myData);

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

$("#timeline").loadTimeline(myData,{
  showEmptyDates: false
});

7. Define the icon classes in the option.

$("#timeline").loadTimeline(myData,{
  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.

$("#timeline").loadTimeline(myData,{
  momentFormat: 'DD/MM/YYYY',
  dataShowFormat: 'DD/MM/YYYY'
});

9. Scroll the timeline to a specific date.

$("#timeline").goToDate("11/02/2015");

Changelog:

v1.0.34 (2019-05-24)

• Font size of box description changed for 12px

2019-05-23

• Added CSS property to handle text size

2019-05-03

• Bugfix

2019-04-27

• 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.