question about scroll in timeline view

Hello! Because there is no option “scroll” in timeline view, I try to create it (see function _changeUnitsView() in attached test case). And today I tested speed of work function createTimelineView() with

if (ns.jq.browser.mozilla && window.console && window.console.time) { console.time("runtime of createTimelineView in " + counter + "th time"); } scheduler.createTimelineView(timelineObj); if (ns.jq.browser.mozilla && window.console && window.console.timeEnd) { console.timeEnd("runtime of createTimelineView in " + counter++ + "th time"); }
in FF+firebug.
My results:
if a few times call function createTimelineView(), it will run slower and slower. approximately 1 time add 40 ms to work time.
So question is there another way to create scroll without run createTimelineView every time when need scroll or how fix this problem (createTimelineView run slower and slower. approximately 1 time add 40 ms to work time)
i upload test case to
To reproduce bug - download, unpack zip-archive, then run index.html. you will see in top of the page the buttons to scroll timeline view. click it several times, and you will notice that UI bgin to work slower and slower. or you can uncomment

// create delay ~800ms (1 click ~40ms) /* for (var i = 0; i < 5; i++) { this.jq("#nextTimelineButton").click(); } for (i = 0; i < 9; i++) { this.jq("#prevTimelineButton").click(); } for (i = 0; i < 6; i++) { this.jq("#nextTimelineButton").click(); } */
in helper.js
If you’ll do it in Firefox with enabled firebug, you will see all what i mean (run time of createTimelineView will log in console)

Actually you need not create timeline again and again , you can

  • modify collection of units
  • call scheduler.callEvent(“onOptionsLoad”, []);

it will repaint current view with new set of units

“Scroll”, I mean drawing timeline for changing start time and end time within one day. Please, perform the actions described in the previous post, and you’re will understand what is scroll in my term.

You said - new set of units.
I said - new start time and new end time.

You can change any property of current timeline and repaint with new settings, you need not create new view for it.

Use right and left keys in the attached sample to scroll the timeline. (51.9 KB)

Thanks for answer! But in real project I use timelineview with component dhtmlxscheduler_treetimeline. So in left of page we have some tree, and other part of page is scheduler.

How can I change view depending on choosing tree branch?

Simple example - In top of the page there are two buttons “one group” or “group with subgroup”. Click to one of them simulate choosing tree branch, and you can see, view repainted.


All repainting could be done by modifying timeline options settings and then calling onOptionsLoad event.
I’ve checked your sample and I am not quite sure what you were trying to do (except repainting timeline of course).

  1. Attach to the onYScaleClick event your function.
  2. Change timeline view settings in there as shown in the Stanislav’s sample.
  3. Call onOptionsLoad event.

Same logic could be applied to your custom buttons.

Best regards,

Thanks for answer. I mean that I want to repaint timeline with new y_unit without call createTimelineView. now I think I must try something like :

scheduler.matrix[timelineNameMode].y_unit = new_y_unit; call scheduler.callEvent("onOptionsLoad", []);
isn’t it?

Yep, you can access and change any settings of timeline, after which you can repaint timeline by calling onOptionsLoad ( which calls setCurrentView )


Yes, in timeline and units view you can do the following:

scheduler.matrix[timelineNameMode].y_unit = new_y_unit; scheduler.callEvent("onOptionsLoad", []);
Where y_unit is an original array of sections and new_y_unit – new array which should be displayed.
Note that if you are creating your timeline view the following way:

[code] var sections=[
{key:1, label:“James Smith”},
{key:2, label:“John Williams”},
{key:3, label:“David Miller”},
{key:4, label:“Linda Brown”}

		y_unit:	sections,

When you can directly modify sections array and then call onOptionsLoad.

Now for the tree timeline view things are a bit different:
You can use API to add or remove units (check Tree Timeline section).
you can directly modify scheduler.matrix[timelineNameMode].y_unit_original array. Note that in this case we are using y_unit_original array as it stores original tree hierarchy and y_unit is a flat representation of it (used for displaying).

Best regards,

Thanks! This code solved my problem:

scheduler.matrix[timelineNameMode].y_unit_original = new_y_unit;
scheduler.matrix[timelineNameMode].y_unit = scheduler._getArrayToDisplay(scheduler.matrix[timelineNameMode].y_unit_original);
 scheduler.callEvent("onOptionsLoad", []);

this row need to do not draw sections, which are not in new_y_unit (it requires in my case)

scheduler.matrix[timelineNameMode].y_unit = scheduler._getArrayToDisplay(scheduler.matrix[timelineNameMode].y_unit_original);

And I think maybe this functions need to include to timeline API :

// timeline day scroll functions
function scrollPrev(sizeScroll) {
if (scheduler.getState().mode === && scheduler.matrix[].x_start > 0) {
scheduler.matrix[].x_start -= sizeScroll;
if (scheduler.matrix[].x_start < 0) {
scheduler.matrix[].x_start = 0;
scheduler.callEvent(“onOptionsLoad”, []);

function scrollNext(sizeScroll) {
var max = 1440 / x_step - x_size;
if (scheduler.getState().mode === && scheduler.matrix[].x_start < max) {
scheduler.matrix[].x_start += sizeScroll;
if (scheduler.matrix[].x_start > max) {
scheduler.matrix[].x_start = max;
scheduler.callEvent(“onOptionsLoad”, []);

Perhaps they will not be useful. but it’s analog of unitView scroll.

Great thanks for fast and good feedback!

Hello! It’s similar problem in work of createUnitsView function, so I decided to update this theme, not create another one:
I try to change “list” of unitsView without call createUnitsView:

scheduler._props["myUnitMode"]["options"] = newList;
scheduler.callEvent("onOptionsLoad", []);

but it doesn’t work. I think it’s because :

scheduler.createUnitsView = function(name, property, list, size, step) {
scheduler.templates[name + "_scale_date"] = function(date) {
        var index = (scheduler._props[name].position || 0) + Math.floor((scheduler._correct_shift(date.valueOf(), 1) - scheduler._min_date.valueOf()) / (60 * 60 * 24 * 1000));
        if (list[index].css)
            return "<span class='" + list[index].css + "'>" + list[index].label + "</span>";
            return list[index].label;
scheduler._props[name] = {map_to:property, options:list, size:size, step:step, position:0 };

Namely, because of using variable list instead scheduler._props[name].options in function scheduler.templates[name + “_scale_date”]

Maybe, I’m wrong. What is way to change “list” of unitsView without call createUnitsView?


If in your code you define newList variable as some new array then indeed something could go wrong. We need to modify existing array instead of replacing with newly declared.
For example you could do something like that:

var sect=[ {key:2, label:"Section B"}, {key:3, label:"Section C"} ]; scheduler._props["myUnitMode"]["options"].splice(0,scheduler._props["myUnitMode"]["options"].length); scheduler._props["myUnitMode"]["options"].push.apply(scheduler._props["myUnitMode"]["options"],sect); scheduler.callEvent("onOptionsLoad",[]);
This will replace the whole content of the scheduler._props[“myUnitMode”][“options”] with the sect’s content.

Hope this helps.

Best regards,

No, it doesn’t work. see please, click button “load 2 sections (without calling)” with enabled js debugger. how it must be work - click button “load 2 sections”.


I have looked into your sample and have managed to find the culprit. The problem was with the ‘size’ property. To fix it you need to edit your dhtmlxscheduler_units.js file (uncompressed version).

scheduler.attachEvent("onOptionsLoad",function(){ var order = scheduler._props[name].order = {}; for(var i=0; i<list.length;i++) order[list[i].key]=i; if(scheduler._props[name].size > list.length) // new line size = scheduler._props[name].size = 0; // new line if (scheduler._date) scheduler.setCurrentView(scheduler._date, scheduler._mode); });
Similar update will be included in the upcoming version.

Thank you for your feedback :slight_smile:

Best regards,

Thanks! Now it works.

I want to set scroll in hours. Whenever i click next and previous button it should decrease/increase only one hour…
How can i do this

try specifying x_length property of the timeline … eview.html

Now Horizontal scroll is in-built functionality in the Timeline view. Read more in the documentation: