README.md

jQuery.Timeline

You are able to easily create two types of horizontal timeline with this jQuery plugin.

Browser Support

jQuery.Timeline supports the following browsers:

• Chrome : Recommended latest version as active support
• Firefox : Recommended latest version as active support
• Safari : Not checked the working yet
• Opera : Recommended latest version as active support
• Edge : Recommended latest version as active support
• IE : Not checked the working yet

Dependencies

JQuery.Timeline works normal operation with jQuery version 1.9.0 or later. We recommend that you use the latest version 3.x.

Usage

Use resources in the dist directory in the repository package.

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

HTML:

<!-- Timeline Block -->
<div id="myTimeline">
  <ul class="timeline-events">
    <li data-timeline-node="{ start:'2017-05-26 10:00',end:'2017-05-26 13:00',content:'text text text text ...' }">Event Label</li>
    <li data-timeline-node="{ start:'2017-05-26 23:10',end:'2017-05-27 1:30',content:'<p>In this way, you can include <em>HTML tags</em> in the event body.<br>:<br>:</p>' }">Event Label</li>
  </ul>
</div>

<!-- Timeline Event Detail View Area (optional) -->
<div class="timeline-event-view"></div>

Note: The tag of the event list wrapped in the timeline block is not "ul" fixed. If the class name is a "timeline-events", it can be a "div" tag or the like.

jQuery:

$(function () {
  $("#myTimeline").timeline();
});

Options

You can pass options on plugin initialization. For example:

$("#myTimeline").timeline({
  startDatetime: '2017-05-25',
  rows: 6,
  rangeAlign: 'center'
});

Option	Type	Default	Description
type	String	bar	View type of timeline event is either "bar" or "point"
scale	String	days	Timetable's top level scale is either "years" or "months" or "days"
startDatetime	String	currently	Default set datetime as viewing timetable; format is "^[-+]d{4}(/|-)d{2}(/|-)d{2}\sd{2}:d{2}:d{2}$" or "currently"
datetimePrefix	String		The prefix of the date and time notation displayed in the headline
showHeadline	Boolean	true	Whether to display headline
datetimeFormat	Object	{full:"Y/m/d", year:"Y", month:"n", day:"n/j"}	Available formats are here: fn.date.js
minuteInterval	Integer	30	Recommend more than 5 minutes; only if top scale is "days" (Deprecated)
zerofillYear	Boolean	false	It's outputted at the "0099" if true, the "99" if false
range	Integer	3	The default view range of the timetable starting from the "startDatetime"
rows	Integer	5	Rows of timeline event area
rowHeight	Integer	40	Height of one row
height	Mixed	auto	Fixed height (pixel) of timeline event area; default "auto" is (rows * rowHeight)px
minGridPer	Integer	2	Minimum grid per
minGridSize	Integer	30	Minimum size (pixel) of timeline grid; It needs 5 pixels or more
rangeAlign	String	current	Possible values are "left", "center", "right", "current", "latest" and specific event id
naviIcon	Object	{left:"jqtl-circle-left", right:"jqtl-circle-right"}	Define class name
showPointer	Boolean	true	Whether to display needle pointer on the current datetime
i18n	Object	(omission)	Define translated text for internationalization of datetime format converted by datetime format