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 |
Methods
The initialized Timeline object can do various operations by using method. It is also possible to execute multiple methods by chaining each method.
$("#myTimeline").timeline({
type : "bar",
range : 5
}).timeline("initialized", function( self, data ){
console.log([ "user's callback", self, data ]);
});| Method | Description | Arguments | Usage |
|---|---|---|---|
| initialized | Called after plugin initialization, just before timeline block is rendered. | Callback Function | $.timeline('initialized', function( self, data ){ alert('initialization complete!'); }); |
| destroy | Destroy the timeline object created by the plugin. | - | $.timeline('destroy'); |
| show | Display hidden timeline objects. | - | $.timeline('show'); |
| hide | Hide the displayed timeline object. | - | $.timeline('hide'); |
| render | Re-render the timeline block. At this time, the event operated by the method is discarded and only the initial event is placed. | - | |
| dateback | Put the timeline back to the past. It is the same as clicking on the left navigation icon. | - | $.timeline('dateback'); |
| dateforth | Go forth the timeline to the future. It is the same as clicking the right navigation icon. | - | $.timeline('dateforth'); |
| alignment | Adjust the center position of the timeline. | - | $.timeline('alignment', 'center'); |
| getOptions | Get all option values for timeline. | - | var tlOptions = $('#myTimeline').timeline('getOptions'); |
| addEvent | Add any events to the timeline. You can also specify a callback function after adding an event. | Array, Callback Function (optional) | $.timeline('addEvent', [ {start:'2017-6-1 00:00',end:'2017-6-1 02:00',row:2,label:'Add Event',content:'test'} ], function( self, data ){ alert('Added Event!'); }); |
| removeEvent | Removes the specified event from the timeline. To specify the event, use the event ID. | Array, Callback Function (optional) | $.timeline('removeEvent', [ 6, 7 ]); |
| updateEvent | Updates the contents of the specified event. It is possible to update multiple events simultaneously. | Array, Callback Function (optional) | $.timeline('updateEvent', [ {eventId:3, start:'2017-5-29 13:00',end:'2017-5-29 15:30', row:1, label:'Updated Event', bgColor:'#aaaab0', color:'#d70035'} ]); |
| openEvent | Called back when an event is clicked. | object |
Notes
For various examples, please see here:
in preparation
License
This plugin is available under the MIT license.