Genuine Week View in Timeline


Is there a way to get a similar week view in the timeline as in the week view?

I have been able to reconfigure the template to make it the right scale however there are a few problems.

The week is not static like the calendar. The current day is always the first on the left, whereas the week view is static and only moves on a week basis.



Another question.

At the moment my events are being scaled to their times in my timeline week view. I don’t want this and would like them to be just displayed in block form on the monthly calendar. Is there a way to achieve this?


Add =;

after you have created your timeline view (where ‘timeline’ in the code above is the name of your view).

Unfortunately, no.
I would suggest using tooltip extension to easier get information about events or using matrix mode where you can redefine scheduler.templates.matrix_cell_value template to display anything you like in a cell.

Best regards,

Unfortunately using matrix mode is not an option here. We need to display these as full width events. I have been looking at the source and I don’t think a hack should be too hard, especially as the scheduler code is in a completely separate .js file and therefore wont conflict with the other views. I just have to get my head around the maths.

If you can help me I would really appreciate it. I am currently trying to integrate this scheduler into a commercial product and will be paying the commercial licence fee if I can successfully integrate it.

So going through the code in (dhtmlxscheduler_timeline.js) and I have an idea.

function E(S, Q, L) { var T = 0; var O = (Q) ? S.end_date : S.start_date; if (O.valueOf() > scheduler._max_date.valueOf()) { O = scheduler._max_date } var U = O - scheduler._min_date_timeline; if (U < 0) { M = 0 } else { var R = Math.round(U / (L * scheduler._cols[0])); if (R > scheduler._cols.length) { R = scheduler._cols.length } for (var P = 0; P < R; P++) { T += scheduler._cols[P] } var N =, scheduler.matrix[scheduler._mode].x_step * R, scheduler.matrix[scheduler._mode].x_unit); U = O - N; var M = Math.floor(U / L) } T += (Q) ? M - 14 : M + 1; return T }
Could we just replace the (time part) in S.start_date with (00:00) and increment end_date by one and replace the time part with (00:00) ?

This would avoid changing any of the complicated maths. If I was better at javascript I would have already tried it.



First, you can use source/ext/ext_matrix.js instead of dhtmlxscheduler_timeline.js , that is uncompressed version, with more readable code.
In it , there is a method
function _getX(ev, isEndPoint, step) {
which get event and return x coordinate for it
Altering its logic is what you need.

function E(S, Q, L) {
That is _getX, after obfuscation :slight_smile:

var O = (Q) ? S.end_date : S.start_date;
can be replaced with

var O = new Date(((Q) ? S.end_date : S.start_date).valueOf()); if (!Q) { O.setHours(0); O.setMinutes(0); } else { O.setHours(23); O.setMinutes(59); }

Probably it will work.


Sorry about not replying earlier.

It works perfectly!

However it would be great if this could be an option on a per view basis.

My scenario is that I have 2 timelines. One is Timeline Day (timeline on a minute basis) the other is Timeline Week (timeline on a daily basis).

On Timeline Day I wish to enable the scaling as this is important for showing when events occur. On Timeline Week I wish to disable scaling as the events become small and look funny.

I have tried adding a property and testing for it (please excuse poor javascript, not my strong point :blush: ) but this doesn’t work.

if (this.scale_times = "no"){ var date = (isEndPoint) ? ev.end_date : ev.start_date; } else { var date = new Date(((isEndPoint) ? ev.end_date : ev.start_date).valueOf()); if (!isEndPoint) { date.setHours(0); date.setMinutes(0); } else { date.setHours(23); date.setMinutes(59); } }

I presume it is because the function _getX is called after the BeforeRender Event?

If you see a possible fix I would really appreciate it.

Tim :smiley:

I think, instead of
if (this.scale_times = “no”){
you need to use
if (scheduler.getState().mode == “timeline”){

Where “timeline” - name related mode


Works perfectly :slight_smile: