The tree timeline view shows the end time 30 minutes off

Scheduler Javascript
#1

I’m using the tree timeline view but all bars are 30 minutes to short on the endtime. See the screenshot below and the corresponding JSON-result.

Am I doing something wrong or is this a bug in the scheduler? I hope someone can help me with this.

JSON:

[
{“key”:1,“start_date”:“29-12-2011 19:00”,“end_date”:“29-12-2011 19:30”,“text”:“19:00 - 19:30”,“cssClass”:null},
{“key”:2,“start_date”:“29-12-2011 20:00”,“end_date”:“29-12-2011 23:00”,“text”:“20:00 - 23:00”,“cssClass”:null},
{“key”:3,“start_date”:“29-12-2011 19:00”,“end_date”:“29-12-2011 23:00”,“text”:“19:00 - 23:00”,“cssClass”:null},
{“key”:6,“start_date”:“29-12-2011 08:00”,“end_date”:“29-12-2011 09:00”,“text”:“08:00 - 09:00”,“cssClass”:null},
{“key”:6,“start_date”:“29-12-2011 19:00”,“end_date”:“29-12-2011 19:30”,“text”:“19:00 - 19:30”,“cssClass”:null},
{“key”:7,“start_date”:“29-12-2011 08:00”,“end_date”:“29-12-2011 09:00”,“text”:“08:00 - 09:00”,“cssClass”:null},
{“key”:7,“start_date”:“29-12-2011 19:00”,“end_date”:“29-12-2011 19:30”,“text”:“19:00 - 19:30”,“cssClass”:null},
{“key”:9,“start_date”:“29-12-2011 20:00”,“end_date”:“29-12-2011 23:00”,“text”:“20:00 - 23:00”,“cssClass”:null}
]

Picture1.jpg837×238 27.7 KB

#2

Please provide the js code which you are using to init timeline
Also, you can try to remove any external css from the page, to be sure that problem is not the result of css conflict.

#3

I use this code to init the scheduler:

    scheduler.init('scheduler_here');
    scheduler.config.readonly = true;
    scheduler.createTimelineView({
        name: "timeline",
        x_unit: "hour",
        x_date: "%H:%i",
        x_step: 1,
        x_size: 24,
        y_unit: [],
        y_property: "key",
        section_autoheight: false,
        dy: 20,
        render: "tree"
    });
    scheduler.setCurrentView(new Date(), 'timeline');

Excluding all other css-files is not possible, since then my project won’t work anymore. If my initialization is ok, is the another way to find a css-conflict?

#4

Configuration is valid

Check in your css rules which affects all tags on page - such as TD, DIV, especially padding and margins, they may affect bars inside the scheduler and result in the incorrect view.

#5

I did check this and you are right. I do have a CSS-conflict. This is not a bug in Scheduler.

I’m using your product in combination with ExtJs 4.0.7 and this library contains a CSS-class like .x-border-box *{box-sizing:border-box;}

Since I use the Scheduler within a DIV containing x-border-box class, this is also applied to the scheduler. I figured out that the scheduler works correct with: box-sizing: content-box.

Unfortunately, I cannot change the CSS. Is there a way to override this setting in the Scheduler-control?

I know that this is not really an issue with your product but any help would be appreciated!

#6

Try to add something like

.x-border-box .dhx_cal_container * {
box-sizing: content-box;
}

It must change css styles in scheduler back to default ones.

#7

Absolutly perfect! That solved my problem.

Thanks!

#8

Great! just had this exact same problem, thanks both of you for asking and responding with an effective solution.
(btw, I’m using dhtmlxScheduler_v37_std_130220 and Ext JS 4.1.1).