dhtmlxScheduler Timeline Customization .

I am using dhtmlxScheduler timeline.

By default in dhx_cal_header division there is top :60px and dhc_cal_data division top 101 px.
I want to make this top values to be 0 .
When i try to change this value in dhtmlxscheduler.js file Every x axis and y axis in Grid values are changing.

What is the right way to do and which file location i need to do this.

sizes of navigation and scale sections can be changed using scheduler.xy settings, no need to modify sources for this
docs.dhtmlx.com/scheduler/api__s … other.html
This setting should remove navigation bar above the calendar: scheduler.xy.nav_height = 0;
Make sure to disable it’s display via css as well. Otherwise some elements might be visible.dhx_cal_navline { display:none; }

I have attached a screen shot… Between Address bar url and timeline scheduler there is a space.I have mention that top value -60 in navline and -101 in caldata. i don’t want this space . When i try to modify top value then drag and drop mouse XY axis is changing…

The answer from Aliaksandr was absolutely right, it also works for me while i was testing it for you.

  1. Put the following line BEFORE the scheduler.init:
  1. Change the Scheduler-HTML from
<div class="dhx_cal_navline">


<div class="dhx_cal_navline" style="display: none;">

This should work like a charme, doesn’t it?

yes it works well… one more customization i want to do…

Displaying Hours i want to customize with my own css code exactly as attached Image… how can i do this…

You can style your x_scale! Check the class-names over here:
docs.dhtmlx.com/scheduler/timeli … lates.html

Furthermore the basic initalisation could fit your needs i think, just edit it with your needs, all parameters are over here:
docs.dhtmlx.com/scheduler/api__s … eview.html

I tried. It’s difficult to convert to my design… Give Some Quick Solution.
In dhtmlx i can view my similar design with custom_hour_scale example. But i couldn’t change in horizontal …

there is no ready solution for your design. Inside the scale header template you can inspect the cell date value and return appropriate html, e.g.scheduler.templates.timeline_scale_date = function(date){ if(!date.getMinutes()){ return "<span style='font-size: large;font-weight:bold;'>"+date.getHours()+"</b>" }else{ return "<span style='font-size: smaller;'>"+date.getMinutes()+"</span>" } };
Probably you’ll need to apply some margin in order to align numbers above the vertical lines that separates the columns
docs.dhtmlx.com/scheduler/api__s … plate.html

Yes. I got same design what i wanted. .

I want to set prev and next navigation button just near to dhx cal header . I have attached my expected design.

There is no easy way to change layout in the necessary way.
If this requirement is critical for your app - you can contact sales department about customization ( sales@dhtmlx.com )