dastoori supports this item


This author's response time can be up to 5 business days.

20 comments found.

cool work, i wish you all the best for your sales ;)

Thanks ;)

nice, well done. :)

Thank you

Hi! for the timeline can I choose the mode vertical or horizontal set the range of the timeline in months or years? and Can I set more than one event in the timeline?


1. Currently there is just vertical mode. but you can rotate it using css.

2. There is a range option, and can be one of the following: decade, year, month, day, hour and minute.

3. You can have multiple events with different types and look. also, you can have multiple timelines.

There are more examples in the source file that shows you how to use TimelinzJS.

Hi. The examples given in docs are basic and the AJAX one won’t run in Safari 9.

The live preview example on codecanyon is a much more realistic and more useful to learn from as it has info boxes too.

Can I get a copy of the JSON file for the live preview example? I will learn quicker as it is closer to what I want to achieve. Thanks


Local AJAX requests doesn’t work in some browsers. (due to cross domain security issues)

Try to open the AJAX example with a local http server:

  • Open your Terminal app
  • Go to the examples directory
    cd /Users/[username]/TimelinzJS/Document/Examples
  • Run:
    python -m SimpleHTTPServer 8080
  • Open this address in your browser: http://localhost:8080/

You can view the demo source code in your browser.

this is the main javascript file: https://0.s3.envato.com/files/160578894/scripts/main.js

i’ll be adding more demos in the next update…


wonderful tips and help, thank you so much

I might be missing something, but none of the demo files load data/content like the demo page goes, ie, timeline on the right, clicked content on the left.

Any ideas?


it just like “bootstrapPlugins” example, when you click on a timeline point, it change the content of the left side.

var timelinz = new Timelinz(data, {
    onPointClicked: function (e, pointData, timelineData) {
        showLeftContent(pointData, timelineData);

the demo code is here


Thanks for the awesome script. My developer successfully implemented your script into our web app. Would like to check with you how can we fix the error of the script not displaying correctly when the start times of on the various days timelines start at a different time.

For example, Day 1, the first timing starts at 8am and on Day 2, first timing starts on 10am. Causing the timeline display to mess up. Please let me know how to fix this error.



Ok, my developer has uploaded the latest version of this script already but still found the issue of layout messing up when start times are the same.

Pls see my screenshots.

Correct layout without error: http://crm1.businesscatalyst.com.sg/correct.png

Error with layout when start times are different: http://crm1.businesscatalyst.com.sg/error.png

please email me your timeline styles, data and its options. (use email section in my profile)

Ok, just sent to you using your profile’s message section.

Hello, I have just purchased this plugin, it is a nice one. But the reason for purchasing it was the the example that was shown in the live demo. I need it for a conference. Could you please make it available for me. Once again, that was the whole reason for buying this plugin. Your help will be much appreciated.

Here is my purchase code: 85adf860-411d-4614-9d0d-9bb465d526b6


i’ve added the conference demo to the examples folder, please download the new TimelinzJS files.

Thanks, much appreciated.

Hi, I wanted to put the Timeline in a scrollable ‘div’. For example like this: ‘div id=”timeline” style=”overflow:scroll; height:400px; width:500px”’ But horizontally it cuts of timelines. For example I have ten timelines but it only shows three.

In your case, you have to use fixed width for the ”.timelinz”. for example:

.timelinz {
    width: 600px;

To display the text on the left side, use this code:

.timelinz__interval {
    text-align: left;

.timelinz__interval-time {
    text-align: right;

.timelinz__interval:after {
    margin-right: 0;
    margin-left: 60px;

Thanks. But even with the fixed width I have the problem that the lines end half way. Since I have a flexible amount of timelines there is no fix width in my case. (See http://imgur.com/FBIuBZE ). Also is there a way to add some padding between the years on the left side and the first timeline? (See http://imgur.com/fK9sYvS ).

Dynamically calculate width:

var timelinz = new Timelinz(data, {

    onRenderCompleted: function (parent) {
        var $parent = $(parent);
        var $timelines = $parent.find('.timelinz__line-wrap').children();

        // .timelinz__line width + marginBetweenLines option
        var timelineWidth = $timelines.eq(0).width() + 10;

        $parent.find('.timelinz__interval-wrap').width((timelineWidth * $timelines.length) + 60);

Left side interval text:

.timelinz__interval {
    text-align: left;

.timelinz__interval-time {
    text-align: right;

.timelinz__interval:after {
    margin-right: 0;
    margin-left: 60px;

.timelinz__line-wrap {
    left: 55px;
    right: 0;

Is there a way to use this plugin in an AngularJS app?

How would I change the time format, so that its not military time?


use “intervalFormat” option like this:

var timelinz = new Timelinz(data, {
    intervalFormat: function (date) {
        return date.getHours() + ':' + date.getMinutes();

Hi – I’m having trouble figuring out how to render multiple separate timelines on one page. Thanks for the help.


you should make multiple instance of the “Timelinz” class and then render each one in the separate container.

// Create Timelinz 1
var timelinz1 = new Timelinz(data, options);
var container1 = document.getElementById('main1');

// Create Timelinz 2
var timelinz2 = new Timelinz(data, options);
var container2 = document.getElementById('main2');

Is there a trick to getting the vertical alignment right when the day starts and ends on the :30 of the hour? With my first event at 08:30 on each day, the top hour line shows as 08:30, but the events are all offset down by 1/2 hour (so the 8:30 event is halfway between 8:30 and 9:30). All of the events are incorrectly positioned except the last one, which is at 17:30 and shows up on the 17:30 line. Thanks!


Sorry for the delay…

This feature is not supported yet.

Hi, looks interesting. Good luck with sales.

Hello, I’d like to purchase your TimelinzJS which would be used in a booking system dashboard free plugin for wordpress. This timeline would be part of several features of an entire plugin. Would that qualify for use with the extended license?

Hi, Based on regular license terms (Number 5), you can use Regular License as long as it’s used in a single free product. if you want to sell your product, you should use Extended License. if you want to use this item in multiple products, you should buy license for each product.

You can check these links for more info: https://codecanyon.net/licenses/standard https://codecanyon.net/licenses/terms/regular https://codecanyon.net/licenses/terms/extended

Good luck with your plugin ;)

Hi there I was looking at your TimelinzJS and it’s nice.

However I am looking for something different but wanted to use your design plugin. However I think I need more than just your script. Do you do customization?

Basically i’m developing a sort of Scheduling software for businesses like salons, spa etc.. so you can pretty much imagine what i need.

Basically the system will have a list of STAFF which can be assigned with schedules for services that can take minutes, hours, and even days.

This software actually is pretty much the work flow im looking at, subject to improvements of course.


I am actually a Web Applications developer and I have developed already the backend for this. All i need is the front end. You can connect to my php scripts to request schedules, save schedules, check for conflicts, etc.

Im a full stack dev, but my weakness is GUIs and so I’m looking to outsource that small piece of my web app hehe

Do let me know if you are able to do this.


TimelinzJS is just a tiny library for displaying the events in a user friendly way. What you looking for is an advanced calendar, Check this category: https://codecanyon.net/category/javascript/calendars

Hi - I’m trying to replicate the schema of the demo site - the yellow on black color. How do I replicate it?


If i understand you correctly, you want to make something like this:

If that is correct, Add these styles to your css file:

.timelinz__point span {
  width: 12px;
  height: 12px;
  margin: 0 0 1px 2px;
  display: inline-block;
  background-color: #f7ab14;
  border-radius: 6px;
  opacity: 0;
  transition: opacity .2s ease-out;

.timelinz__point:hover span {
  opacity: 1;

You can use the demo styles (Look for this line in css file: /* Timelinz class */)


katw Purchased

Is there a way to insert a carriage return in the timeline point tooltip text?

Using your speaker example. I tried ’\n’, tried ’\r’ and ‘
’. The first two get stripped and as expected the HTML is left visible not actioned.


Your answer is here: https://stackoverflow.com/a/16452853/2976921

Add the following css rule:
.tooltip:after, [data-tooltip]:after {
  white-space: pre;

Then use & #xa; (without any space) instead of \n

NOTE: The tooltip is not part of the Timelinzjs and you can use any other css or javascript tooltip.


katw Purchased

Thank you very much.


katw Purchased

Unfortunately solution didn’t work ( is displayed in the tip message not parsed and applied).

Thanks anyhow.


katw Purchased

Is it possible to access a data key of a timeline point before and after? So you can show both the start and end time in tooltip and message text?

Speaker eg:

‘Lunch 12pm (until ##:##)’

Yes, you can use pointData and timelineData like this:

onPointRendered: function (pointElem, pointData, timelineData) {
  var currentPointIndex = timelineData.points.indexOf(pointData);

  var prevPointData = timelineData.points[currentPointIndex - 1];
  var nextPointData = timelineData.points[currentPointIndex + 1];

  if (prevPointData) {

Are you able to use multiple timelines for one day?

dastoori, what is the expected data source is it JSON or XML, would you have a simple example?


You can use any data structure as long as it can be parsed to a Javascript Object (e.g. JSON, XML, ...)

You can take a look at the demo source; documentation and examples are included in the package.

OK thanks Dastoori

Hi, Is there a way to apply classes to points from the pointData ? Thanks

I have figured it out :-) For instance:

onPointRendered: function (pointElem, pointData, timelineData)
    var $elem = $(pointElem);

    if (pointData.error)