Timeline mobile version adjusting

Scheduler
#1

I’m trying to adjust the timeline view for responsive devices, but I can’t make the cells fit the whole width of the screen and also the header with the days names

image
image646×904 64.6 KB

Can anybody help me please

And also is there a way to display bigger bottons?

#2

Hello Javiera_Meneses,

I’m trying to adjust the timeline view for responsive devices, but I can’t make the cells fit the whole width of the screen and also the header with the days names

I’ve checked to display the timeline view on different responsive devices in a simple snippet, but it seems to work correctly there. In order for me to determine what is wrong, please send me your code.

And also is there a way to display bigger buttons?

Please, try to change the style of the duttons via CSS. It can be done like in the code:

.day_tab, .week_tab, .month_tab, .timeline_tab {
height: 60px;
display: flex;
justify-content: center;
align-items: center;
}

.dhx_cal_navline {
top: -13px !important;
}
1 Like
#3

Thanks for your answer!

Im just trying to fit the timeline into the screen, so I tried forcing the width of some classes but it doesn’t seem to work either.

This is the css I have for the image I showed above:

  .dhx_timeline_label_wrapper{
    width: 150px!important;
  }
  .dhx_matrix_scell{
    width: 150px!important;
  }
  .dhx_timeline_scale_header{
    width: 150px!important;  
  }
  div.dhx_timeline_data_wrapper{
    width: 150px!important;  
    padding-left: 150px!important; 
  }

I want to fit the width to the full screen. on the mobile version, with the cells and the day name.

#4

Hello @Javiera_Meneses ,

Just to clarify, do you want to hide the “labels” column on mobile devices:

or you meant something different?

As currently, the timeline looks pretty responsive on mobile devices(screen from mobile safari):

In case if you just want to hide the labels column you should set the dx value to 0:
https://docs.dhtmlx.com/scheduler/api__scheduler_createtimelineview.html
and hide scale’s cell with the “dhx_matrix_scell” class.

The code may look like follows:

// CSS
  .dhx_matrix_scell{
    display:none !important;
  }


// JS
var sections=[
	{key:1, label:"James Smith"},
	{key:2, label:"John Williams"},
	{key:3, label:"David Miller"},
	{key:4, label:"Linda Brown"}
];

scheduler.createTimelineView({
	name:	"timeline",
	x_unit:	"minute",
	x_date:	"%H:%i",
	x_step:	30,
	x_size: 24,
	x_start: 16,

  dx:0,

	y_unit:	sections,
	y_property:	"section_id",
	render:"bar"
});

Here is the live demo:
http://snippet.dhtmlx.com/5/faeba57de

If it’s not the thing you need, could you please clarify the requirements(maybe with some screenshot or mockup)?