September 17, 2022

Create a Horizontal Timeline Using jQuery plugin | timeline.js

jQuery Timeline, you can easily create two types of horizontal timelines with this plugin. Timeline.js helps you display horizontal timelines, browser, responsive bar, and point/line style from dynamic data objects.

How to make use of it:

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

Horizontal-Timeline-Demo


See Demo And Download

Official Website(ka215): Click Here

This superior jQuery/javascript plugin is developed by ka215. For extra Advanced usage, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.