Create a Horizontal Timeline Using jQuery plugin | timeline.js

1. To use this plugin, you must load the next JavaScript and CSS files into the doc.

<link rel="stylesheet" href="dist/timeline.min.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/timeline.min.js"></script>

2. Add your individual events to the timeline utilizing the data-timeline-node attribute and insert the event group into a traditional HTML listing as these:

<div id="myTimeline">
  <ul class="timeline-events">
    <li data-timeline-node="{ start:'2018-05-28 10:00',end:'2018-05-28 13:00',content:'Event Here' }">Event Label</li>
    <li data-timeline-node="{ start:'2018-05-29 23:10',end:'2018-05-29 1:30',content:'<p>Event Here</p>' }">Event Label</li>
  </ul>
</div>

3. Create an empty container to show the event particulars:

<div class="timeline-event-view"></div>

4. Initialize the plugin to generate a default timeline from the HTML listing.

$("#myTimeline").timeline({
  // options here
});

5. To customize the timeline, simply cross the next choices as an object to the timeline() technique on init.

$("#myTimeline").timeline({
  // "bar" or "point"
  type            : "bar",
  // "years" or "months" or "days"
  scale           : "days", 
  // start <a href="#!">date</a> time
  startDatetime   : "currently",
  // end date time
  endDatetime     : "auto",
  // displays headline
  headline        : {
    display     : true,
    title       : "",
    range       : true,
    locale      : "en-US",
    format      : { hour12: false }
  }, 
  // displays sidebar
  sidebar         : {
    sticky      : false,
    overlay     : false,
    list        : [], //  an array of items
  },
  // displays ruler
  ruler           : {
    top         : {
      lines      : [],
      height     : 30,
      fontSize   : 14,
      color      : "#777777",
      background : "#FFFFFF",
      locale     : "en-US",
      format     : { hour12: false }
    },
  },
  // displays footer
  footer          : {
    display     : true,
    content     : "",
    range       : false,
    locale      : "en-US",
    format      : { hour12: false }
  },
  // displays event meta
  eventMeta       : {
    display     : false,
    scale       : "day",
    locale      : "en-US",
    format      : { hour12: false },
    content     : ""
  },
  // event data
  eventData       : [],
  // enables/disables effects
  effects         : {
    presentTime : true,
    hoverEvent  : true,
    stripedGridRow : true,
    horizontalGridStyle : 'dotted',
    verticalGridStyle : 'solid',
  },
  colorScheme     : { // Added new option since v2.0.0
    event         : {
      text        : "#343A40",
      border      : "#6C757D",
      background  : "#E7E7E7"
    },
    hookEventColors : () => null, // Added instead of merging setColorEvent of PR#37 since v2.0.0
  },
  // default view range
  range           : 3, 
  // numer of timeline rows
  rows            : 5, 
  // height of row
  rowHeight       : 40, 
  // width of timeline
  width           : "auto",
  // height of timeline
  height          : "auto",
  // min size of <a href="#!">grid</a>
  minGridSize     : 30, 
  // margin size
  marginHeight    : 2,
  // "left", "center", "right", "current", "latest" or specific event id
  rangeAlign      : "latest",
  // "default", false and selector
  loader          : "default",
  // loading message
  loadingMessage  : "",
  // hides scrollbar
  hide<a href="#!">Scroll</a>bar   : false,
  // "session" or "local"
  storage         : "session",
  // loads cached events during reloading
  reloadCacheKeep : true,
  // zooms the scale of the timeline by double clicking
  zoom            : false,
  // wraps new scale in the timeline container when zooming
  wrapScale       : true,
  // 0: Sunday, 1: Monday, ... 6: Saturday
  firstDayOfWeek  : 0, 
  // "canvas" or "d3.js"
  engine          : "canvas",
  // debug mode
  debug           : false
});

6. API strategies.

// show
$("#myTimeline").timeline('show');
// hide
$("#myTimeline").timeline('hide');
// destroy
$("#myTimeline").timeline('destroy');
// align the timeline
// position: "left" or "begin", "center", "right" or "end", "latest", "current" or "currently", Event ID
// duration: "fast", "normal", "slow" or milliseconds
$("#myTimeline").timeline('alignment', position, duration);
// add new events
$("#myTimeline").timeline('addEvent', eventdata, CALLBACK, userdata);
// remove events
$("#myTimeline").timeline('removeEvent', condition, CALLBACK, userdata);
// update events
$("#myTimeline").timeline('updateEvent', eventdata, CALLBACK, userdata);
// reload the timeline
$("#myTimeline").timeline('reload', options, CALLBACK, userdata);
// show the loader
$('#myTimeline').Timeline('showLoader');

Easy Horizontal Timeline Generator, jQuery Timeline Plugin/Github

See Demo And Download