Add filter icon to dhx_cal_header first cell


#1

Hi team,

We have a requirement to add some formatted text and filter button on first cell of calender header , just before the date state , is there any custom way to add so? Please find below image

Thank you !


#2

Hi @mani2693 ,

Yes, you can place some HTML into the header of the sections column with the scheduler.locale.labels.timeline_scale_header config, it may look like follows:

var filterBtn = `<button onClick="doFilter()">Filter</button>`
scheduler.locale.labels.timeline_scale_header = filterBtn;
function doFilter(){
	console.log("filtering") 
}

And you can implement filtering for each view as described by the following link:
https://docs.dhtmlx.com/scheduler/filtering.html

Here is a demo:
http://snippet.dhtmlx.com/5/e35291017

Kind regards,


#3

Hey @Siarhei

Thanks for you recommendation, It was okay for us till some extent but we need our own EmberJS component to be loaded in the scale_header , Is there a way we can completely remove that space from scheduler ? So that we will include our own component instead

Thanks again !

Regards,
Mani


#4

Hi @mani2693 ,

You can hide the scale_header with the scale_height config:

scheduler.xy.scale_height = 0;

Demo:
http://snippet.dhtmlx.com/5/67ace7be7

Or you can remain the scale height, but hide default elements with CSS, and place there your own components:

  .dhx_scale_bar{
  	display: none;
  }

Demo:
http://snippet.dhtmlx.com/5/337bf823c