ka215/jquery.timeline

You can easily create the horizontal timeline with two types by using this jQuery plugin.

  jQuery.Timeline V2

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

Report bug · Request feature · Blog

Table of Contents

• Quick start
• What's included
• Usage
• Supported browsers
• Tutorials
• Documentation
• Example as demonstration
• Contributions
• Creators
• Copyright and license

Quick start

Several quick start options are available:

• npm: npm i jq-timeline
• bower: bower install jq-timeline
• Download the latest release.
• Clone the repository: git clone https://github.com/ka215/jquery.timeline.git
• Load via CDN:

<link href="https://cdn.jsdelivr.net/gh/ka215/jquery.timeline@main/dist/jquery.timeline.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/ka215/jquery.timeline@main/dist/jquery.timeline.min.js"></script>

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing compiled and minified variations. You'll see something like this:

jquery.timeline/
└── dist/
    ├── jquery.timeline.min.css
    └── jquery.timeline.min.js

We provide compiled and minified CSS and JS (jquery.timeline.min.*). When deployed by using task for develop, generated source maps (jquery.timeline.*.map) are available for use with certain browsers' developer tools.

Usage

Include the installed files into your html:

<link rel="stylesheet" src="/path/to/jquery.timeline.min.css">

<script src="/path/to/jquery.timeline.min.js"></script>

Note: You should include the jquery core script before including this plugin javascript file. Also we recommend that would like to add defer attribute into script tag.

Bind this plugin in the scope had imported the jQuery:

$('#myTimeline').Timeline()

Supported browsers

jQuery.Timeline version 2.x supports the following browsers:

PC						Mobile
Ok	Ok	Ok	Non-compliant	Ok	Ok	Ok	Ok

Unfortunately as for the Internet Explorer etc., several methods of this plugin does not work because JavaScript implementation of browser is too immature. Please note that we are not go to support for these legacy browsers in the future.

Tutorials

The tutorial as a detailed usage of jQuery.Timeline is released here.

Documentation

jQuery.Timeline's documentation, included in this repository in the root directory, is built with ESDoc and publicly hosted on GitHub Pages at https://ka215.github.io/jquery.timeline/. The docs may also be run locally.

Documentation for previous releases

• For v2.x: https://ka2.org/jquery-timeline/
• For v2.x(ESDoc): https://ka215.github.io/jquery.timeline/
• For v1.0.x: https://raw.githubusercontent.com/ka215/jquery.timeline/v1/README.md
• For v1.0.x (Japanese): https://ka2.org/jquery-timeline-v1/

Example as demonstration

• CRUD System for jQuery.Timeline
• jQuery.Timeline 2.1.0 via jQuery 3.5.1
• jQuery.Timeline Tester
• Version 2.x Point Type Timeline DEMO
• Version 1.x demo

Contributions

Your donations for plugin development will help us.

Donate URL: https://ka215.github.io/jquery.timeline/donation.html

Creators

ka2 (Katsuhiko Maeno)

• https://ka2.org/

Contributors

• Guillaume Bonnaire www.gbonnaire.fr

Copyright and license

Code and documentation copyright 2011-2020 the ka2. Code released under the MIT License.

jquery.timeline's Issues

decades centuries milleniums

Would like to set date range in decades centuries millenniums

npm: npm i jquery-timeline

Hi dear @ka215, how are you?

I'm trying to use the plugin as a module in my project, but when I execute the command (npm i jquery-timeline), that operation download another plugin, not yours, do you knew about it?

This is the plugin that it command download
https://github.com/d-ashesss/jquery-timeline

Have a nice day,
Regards.

Plugin breaks without dot in html even when others add via javascript

I have an issue where the plugin works fine whether I add data points via html or javascript, but even if I add datapoints via javascript unless my page includes at least one point in the html the plugin breaks and doesn't work correctly. Currently fixed by adding a datapoint outside the time range of the data points I wish to actually display.

Multiple timelines on single page and rangeAlign to eventId

If we use two timelines on a single page the first one renders correctly but the second one renders with the following problems:

• The pointer doesn't show up;
• rangeAlign set to current doesn't work (the timeline defaults to left alignment);
• Previous and next arrows shows in the bottom of the timeline instead of the middle;
  When we try to use rangeAlign to eventId the timeline defaults to current, is there a way to align the timeline to an eventId or to the first timeline element by default?
  Thanks

Can't understand -1 in Line 1109 for calculating the end date of the timeline

In line 1103, you've told me that you want to count the end date of the timeline.

But on the month case(Line 1109), I can't understand that you want to subtract 1 after adding the range.

That cause me a bug as follow, you can see that the events will stop at the end of the September.

The top two events' end date is 2222-12-31(We wanted to make it looks like infinity, so we set that date).

The bottom four events' end date is 2017-10-01, so we expect that the bars will reach the first day of October.

When I delete that '-1' code, it will act what I need. So I'm a little curious about why you wanted to do that.

Sincerely,

OtomeSound

how i can create smaller time scale like (seconds)

i working on an app for tracking small time scales (seconds) and i found your plugin and it is really awesome ,but the problem is my event is overlapped on each others because ( as i imagine time deference between them is seconds)

Donating

Hi,
I cant to donate (from card and from PayPal wallet):
https://i.imgur.com/Z5nK9lR.png

Do you have another methods to pay?

date range with same day not showing

thank you for the plugin firstly

im using your timeline plugins for leave system
https://prnt.sc/o7a6id

<li data-timeline-node='{"row":"1","start":"2019-02-01 00:00","end":"2019-02-01 00:00","bgColor":"#ffc107","color":"#FFFFFF","label":"Annual Leave"}'></li>

because some people only apply a day leave, start date and end date are the same, but it do not showing out, please help.

addEvent causes entire timeline refresh

Hey - just a quick one

I've noticed when trying to add events using addEvent it causes the entire timeline to flash as the timeline is reloaded/refreshed

Is there a nicer or cleaner way to do this?

I'm currently pushing items onto an existing timeline instance like this (with items being an array of bar objects)

$('#timeline').Timeline('addEvent', items);

This causes the timeline to blink as the entire thing is reloaded - I'm looking to push items on as and when they become available so the blinking isn't great from a user perspective (as i may ad an item every few seconds or so)

Any ideas?

Available on npm?

I have seen the package.json but could not find it on npmjs.com
Is there any chance to make this downloadable through npm?

Zoom in ?

Hello,

I'm trying to implement the timeline to monitor events with small time differences.
For exemple, I may have such a sequence.

I tried to modify .css but it doesn't fit.

Thank you,

Vincent / From France

    <li data-timeline-node="{ row:1, start:'2018-01-24 09:00:00',end:'2018-01-24 09:00:00',content:'' }"></li>
    <li data-timeline-node="{ row:1, start:'2018-01-24 09:00:02',end:'2018-01-24 09:00:02',content:'' }"></li>
    <li data-timeline-node="{ row:1, start:'2018-01-24 09:00:46',end:'2018-01-24 09:00:46',content:'' }"></li>
    <li data-timeline-node="{ row:1, start:'2018-01-24 09:00:55',end:'2018-01-24 09:00:55',content:'' }"></li>
    <li data-timeline-node="{ row:1, start:'2018-01-24 09:01:04',end:'2018-01-24 09:01:04',content:'' }"></li>
    <li data-timeline-node="{ row:1, start:'2018-01-24 09:01:23',end:'2018-01-24 09:01:23',content:'' }"></li>
    <li data-timeline-node="{ row:1, start:'2018-01-24 09:01:39',end:'2018-01-24 09:01:39',content:'' }"></li>
    <li data-timeline-node="{ row:1, start:'2018-01-24 09:01:48',end:'2018-01-24 09:01:48',content:'' }"></li>

Hours off by one issue

Using Strings such as

"end" : "2017-06-08 15:30:00+00:00",
"start" : "2017-06-08 10:15:00+00:00"

is displaying events at

"end" : "2017-06-08 16:30:00+00:00",
"start" : "2017-06-08 11:15:00+00:00"

I think this might be a timezone issue?

Tooltips are not visible for the first row

When playing with the demo of jQuery.Timeline at https://ka2.org/jqtl-v2/index.php when you toggle to display tooltips then tooltips for the first row are not displayed. Tooltips for any other rows are.

i18n not easy to use in multilanguage project

Hi
i tried and it's work fine

   $("#myTimeline").timeline({
    i18n : {
    month: { "Jan.": "Janvier", "Fév.": "Février", "Mars": "Mars", "Avr.": "Avril", "Mai": "Mai", "Juin": "Juin", "Juillet": "Juillet", "Août.": "Août", "Sept.": "Septembre", "Oct.": "Octobre", "Nov.": "Novembre", "Déc.": "Décembre" },
    day: { "Lu": "Lundi", "Ma": "Mardi", "Me": "Mercredi", "Jeudi": "Jeudi", "Ve": "Vendredi", "Sa": "Samedi", "Di": "Dimanche" },
    ma: [ "vorm.", "nachm." ]
  },

but why not extend the object and use lang files ... with something about like this
!function(a){a.fn. timeline.i18n.de={month:[ .......
or

(function($) {
      timeline.i18n = $.extend(true,  timeline.i18n, {
        'fr_FR': { ..................

this will be more convienient

Dynamically add to Sidebar/rows

Hi,

Is it possible to add & remove items to the sidebar on the fly (with a corresponding row), kind of like filtering the display based on the selection in the sidebar?

I'd like to be able to use jquery to pull new data from a sql db based on what is selected in the sidebar, maybe even only displaying 1 row but have 50 items in the sidebar to select from.

Example of a sidebar items,

Cars
Bikes
Trucks
Vans

Thanks!

BCE/CE Date Ranges

Can you add the ability to use BCE dates?

eg. setting the startDatetime : '-3200' just results in the year 3200 CE and not -3200 BCE.

Also, options to set the height of the bars or an option to match the rowHeight value.

How to decrease width for weeks in ruler

I sometimes find that the width used for displaying weeks are much wider than necessary - causing the scrollbars and the whole view to be rather wide. Is there a way to limit the width for weeks and thereby make a less wide visualization/scrollbar? I know there is a minimum setting, but what about a maximum setting - or som rule for calculating the width?
The example below would display a lot better if the weeks where much smaller.

Highlight weekends on ruler

Hi, I have a timeline and have the scale set as 'day' - I was wondering how I could possibly highlight weekends (Saturday and Sunday) on the ruler? (bold / different background etc)

Or conversely, highlight workdays?

Is there any way to achieve this?

Unable to add new event. Cannot read property 'push' of undefined.

Following the README, I am unable to add events via

`$("#myTimeline).timeline(

    "addEvent",

    [{startDate:..}],

    function(){}
);`

Could you at least show an example for the same?

Scale Milliseconds

Hello,

when I set the scale to milliseconds, I get the following error:
TypeError: Property "grids" cannot set because undefined or invalid variable.

Is there any parameter I have to set in the settings?
I tried a few, but nothing worked.

Thank you!

Can't modify meta date format

I tried to use the datetimeFormat option to change how it appears but it would always default back to what was hardcoded into the en-US.json file, under format.meta. A hard change there finally allow modification of the format.

more than one event with the same date range (only showing one)

Hello, thank you for this amazing plugin firstly.

I have one case where I can have more than one event at the same time range,
Ex.

<li data-timeline-node="{'start':'2012-03-01 00:00','end':'2012-12-31 00:00','row':1,'label':'Element 2','content':'The content of Element 2'}"></li>
<li data-timeline-node="{'start':'2012-03-01 00:00','end':'2012-12-31 00:00','row':1,'label':'Element 3','content':'The content of Element 3'}"></li>
<li data-timeline-node="{'start':'2012-03-01 00:00','end':'2012-12-31 00:00','row':1,'label':'Element 4','content':'The content of Element 4'}"></li>

This way only shows the last element (Element 4), the others must be below of it. I need to know if there is any solution for this, do I have to configure something in the plugin?

My team and I through thinking about a solution, which is to count all the events with the same range time and then add other lines to the list (sidebar). And put these new events on those lines. These new lines will not have a category name.

But we think this is not the best solution.

Before...

After...

Thank you very much!
Have a nice day.

Doesn't work (events are not clickable)

Hello,

I use:

1. Google Chrome
2. Default libraries from examples

But timeline work not correct.

In console have no errors.

Example: https://vvt.maxmg.com/assets/uploads/timeline

Wrong year displayed in header

When displaying the year on the top ruler the value is one year less then the data. The bottom ruler displays the correct year.
By using the browser debugger, you can see that the "year-2018" element has the value "2017".

render

render must be given with an object.

$("#myTimeline").timeline('render', {minGridPer:ab});

please add it to Documentation

Label for each point

Hello,

Is there any way to add labels for each point? Have added a screenshot to show what I am trying to achieve. Is this feasible and if so, what configurations do I need to choose to create it?

Thank you.

Timeline bars overlapping

Currently have the following 4 lines

<li data-timeline-node="{ start:'2018-8-30 03:04', end:'2018-8-31 03:04',content:'adada21123' }"></li>
<li data-timeline-node="{ start:'2018-8-30 03:04', end:'2018-9-2 03:04',content:'adadad' }"></li>
<li data-timeline-node="{ start:'2018-8-30 06:04', end:'2018-8-31 03:04',content:'ddd' }">Event Label</li>
<li data-timeline-node="{ start:'2018-8-30 03:04', end:'2018-9-2 03:04',content:'ddd' }">Something is happening</li>

They are all overlapping the same area, any value i need to set to indicate i want them too stack?

Running inside an ASP.net MVC app.
Thanks!

Default settings for presented timeline

Hello, first of all thank you for all the hard work on the project.

I read all the GH pages, jqueryscripts.net and your blog article on ka2.org but i did not found anything about default configuration and how to get the timeline on screenshot. So i wonder if you could help me out.

Here is what i am talking about:

My timeline looks like this:

Here is the configuration for the li element:

<li data-timeline-node="{ start:'2019-02-18 10:00',end:'2019-02-18 13:00', row:1, bgColor: '#0BB9C6', content:'Event Here' }"> </li>

And for the timeline options:

$("#myTimeline").Timeline({
     // options here
     rows: 6,
     startDatetime: 'currently',
     range: 12,
 });

So I am missing left content with row labels and header with months and years titles.

Thank you very much for the anwer! :)

jQuery.Deferred exception: Property "rulers"

jQuery.Deferred exception: Property "rulers" cannot set because undefined or invalid variable. TypeError: Property "rulers" cannot set because undefined or invalid variable.

Relation lines do not draw correctly if minGridSize is anything other than 30

Specifically, horizontal positioning is incorrect. Line is positioned too far left if minGridSize is less than 30, and too far right if minGridSize is greater than 30.

how to update startDatetime ?

<script> $(function () { $("#myTimeline").timeline({ type: 'point', scale: 'months', startDatetime: '2017-1-2', rows: 5, range:2, rowHeight:60, rangeAlign: 'center' }); $("#myTimeline").timeline({ startDatetime: '2017-2-2', }); //submit(); }); </script>

It's don't work .and give me an error .
jquery-3.2.1.min.js:2 Uncaught TypeError: Cannot read property 'forEach' of undefined
at r (timeline.min.js:219)
at HTMLDivElement. (timeline.min.js:760)
at Function.each (jquery-3.2.1.min.js:2)
at r.fn.init.each (jquery-3.2.1.min.js:2)
at r.fn.init.init (timeline.min.js:737)
at r.fn.init.e.fn.timeline (timeline.min.js:1078)
at HTMLDocument. (index2.html:163)
at j (jquery-3.2.1.min.js:2)
at k (jquery-3.2.1.min.js:2)

Issues in Options: showHeadline & httpLnaguage

showHeadline is always showing the Headline, independently of the option passed.

There's a typo in the options that may create some confusion/issues, regarding language setup: httpLnaguage.

addEvent ID generation

Thanks for the library!

I'm running into an issue using 'addEvent' with custom eventIds. It seems that the library generates its own IDs even if I do supply my own, which makes it difficult to use the relations to connect them.

The code in question

addEvent : function( events, callback ) {
      return this.each(function(){
        var $this       = $(this),
            data        = $this.data('timeline'),
            eventNodes  = ( new Function( 'return ' + data.timeline.text() ) )(),
            incrementId = 1,
            _ids        = [ incrementId ];
        // add events
        if ( events.length > 0 ) {
          $.each(eventNodes, function( i, evt ) {
            _ids.push( Number( evt.eventId ) );
          });
          incrementId = Math.max.apply( null, _ids ) + 1;
          $.each(events, function( i, evt ) {
            evt['eventId'] = incrementId;
            incrementId++;
            eventNodes.push(evt);
          });
          data.timeline.text( JSON.stringify( eventNodes ) );
        }

Note that it runs through all the event IDs, adding them to the _ids variable, and then it uses that list to generate an event ID that is one higher than the maximum.

So if I had two 'addEvents', with custom IDs 1 and 2 respectively, the system would really start the IDs at 3 and 4.

I think there should be some sort of check for a custom event ID before relying on system generation.

Thanks!

event not show in safari

https://ka215.github.io/jquery.timeline/index.html
can not see the event in the timeline ?...
Safari Version 10.1.1 (12603.2.4)

Error when using array in arguments

Hi,

I try to update an event in this way:

$("#myTimeline").timeline({ startDatetime: '2017-05-28', rangeAlign: 'center' }).timeline('updateEvent', [ {eventId:1, row:4, label:'Updated Event', bgColor:'purple', color:'pink'} ]);

But then I get the following error message:

jQuery.Deferred exception: s is undefined updateEvent ...

I think it has to do with the array definition. Any idea?

Thanks for support,
Filburt

Issue with a particular day

With the grid set up with months and days the 27th October is taking 2 days of the grid and pushing a day all the events afterwards.

https://imgur.com/a/lcie3r6

Thanks

Set date-time range

Hi,

Is there a proper way of setting the start and end date-time range on the timeline?
Now I use the combinations of scale, startDatetime, range options but it would be awesome if the start and end dates could be set dynamically in the browser page, where the tool is included.
It's already a great tool and easy to use.

Thanks for your answer in advance,
Gab

cannot change events' height

If options.rowHeight is changed compare to the default value, the height of the events remains unchanged.
It seems that the height of the events is based only on the "Default" options and not on the given options (it is not recalculated). It therefore remains equal to 44 = Default.rowHeight - Default.marginHeight * 2 = 48 - 2*2

jquery.timeline/src/timeline.js

Line 131 in 2e9de82

height : Default.rowHeight - Default.marginHeight * 2,

Click on space on timeline to add new event

Hi,

I want to use the timeline in order to manage a calendar of events. What I would like to do is to be able to click on the empty space on the timeline to add a new event (via a pop up)

Is there any way of hooking up a click (or select/drag) event on the empty timeline which would give the date(s) selected in order to create a new event?

Events not shown when an inline javascript is disabled

When an inline javascript is disabled using the content security policy, events on the timeline are not shown.

In the console, an error message mentioning that the resource is blocked due to the page configuration. Seems that the code below in the plug-in is causing this issue.

jquery.timeline.min.js:10:13215: new Function("return ".concat(t))

My system is needed to be configured to block inline javascript using content security policy for security purpose.

The version I am using is 2.0.0.

Thanks.

Can't set "quarter-hours" as scale

Hi,

I'm trying to set the "scale" option to "quarter-hour" on the widget.
It seems impossible for the widget to handle it. It always writes the following error on the console: "Property "grids" cannot set because undefined or invalid variable."

here are the given parameters :

{"type":"bar","startDatetime":"2020-01-05T00:00:00.000Z","scale":"quarter-hour"}

I also tried to set the "scale" option to "minute", it works well, so I don't think it's a performance issue.
I thought it was because no "endDatetime" was provided, so I tried to set it at "2020-01-05T12:00:00.000Z" it doesn't work neither.

Does anyone have encountered and fixed this issue ?

Thank you very much for the time given to my issue,

Have a nice day,

Relation line is not shown in Chrome

Hi, I found your timeline project today, thanks for sharing this and the easy-understanding document.
So here is my problem, I can display relation lines in IE (version: 11.0.9600.18738), but not in Chrome (version: 60.0.3112.78). Is there something wrong?

Row Labels

This is a great timeline project. Is there a way to add row labels to increase its functionality?

Unable to see BS popover

I don't see the popover in the demo and can't get it to work on my local set up.

Multiple relations between nodes

First, thank you for this great software and visualization for timelines. It works great and looks wonderful!

I'm however wondering (for a project) if it is possible to create multiple relations between the nodes. I can not explicitly find this option in the document. I've also tried just adding it in the config, and played around with various settings without success.

Would it be possible to create multiple connections, so I that you could essentially visualize 'joins' and 'splits' in the timeline? If this is not out of the box possible, I'll be happy to try to add it to your software, but for this it would help if you can point me to the relevant functions for determining and drawing the relations for the nodes (it would save a lot of searching and digging)

zoom in and zoom out in v1

function to create zoom in and zoom out

HTML:
<button id="one" type="button" value="4">zoom in</button> <button id="two" type="button" value="4">zoom out</button>

Script:
$('#one').click(function() { ab+=4; $("#myTimeline").timeline('render', {minGridPer:ab}); }); $('#two').click(function() { ab-=4; $("#myTimeline").timeline('render', {minGridPer:ab}); });

Full documentation

Please, update documentation for version 2.0.

How to use it?

Tnx

TypeError: t.resolve is not a function

I am having problems to incorporate your library into a project made with ionic 3.
I receive the following error: TypeError: t.resolve is not a function.

apparently the problem is with polyfills

r@http://localhost:8000/build/polyfills.js:3:7745 F</l</t.prototype.scheduleTask@http://localhost:8000/build/polyfills.js:3:15480 F</c</r.prototype.scheduleTask@http://localhost:8000/build/polyfills.js:3:11405 F</c</r.prototype.scheduleMicroTask@http://localhost:8000/build/polyfills.js:3:11657 f@http://localhost:8000/build/polyfills.js:3:20198 x</t.prototype.then@http://localhost:8000/build/polyfills.js:3:22554 setDriver@http://localhost:8000/build/vendor.js:239315:44 LocalForage@http://localhost:8000/build/vendor.js:239104:14 [4]<@http://localhost:8000/build/vendor.js:239377:22 s@http://localhost:8000/build/vendor.js:236592:584 e@http://localhost:8000/build/vendor.js:236592:755 @http://localhost:8000/build/vendor.js:236592:773 @http://localhost:8000/build/vendor.js:236592:38 @http://localhost:8000/build/vendor.js:236592:277 @http://localhost:8000/build/vendor.js:239384:30 __webpack_require__@http://localhost:8000/build/vendor.js:55:30 @http://localhost:8000/build/vendor.js:236114:70 __webpack_require__@http://localhost:8000/build/vendor.js:55:30 604@http://localhost:8000/build/main.js:4059:74 __webpack_require__@http://localhost:8000/build/vendor.js:55:30 599@http://localhost:8000/build/main.js:4016:70 __webpack_require__@http://localhost:8000/build/vendor.js:55:30 webpackJsonpCallback@http://localhost:8000/build/vendor.js:26:23 @http://localhost:8000/build/main.js:1:1

Automatically set rows

Hi,

Thanks for the great timeline! One Question: Is it possible that events which are generated from a database are automatically placed in separate rows if they have the same or overlapping dates?

Thanks a lot and regards,
Filburt

Getting syntax error on line 1089

I'm likely doing something wrong but I keep getting a syntax error on line 1089 in timeline.js...

Any suggestions?