Click on Scales Functionality

Gantt
#1

Hello :slight_smile:

Depending on which scales are configuratin on the Gantt Chart, is there any possibility of clicking in “Tue” day, and all collumn of that day became highlighted?

Thanks :slight_smile:

#2

Please, I really need to know if it is possible to hightlight a specific day(all collumn) when it is clicked :///

#3

Hi,
you can catch onEmptyClick event, which is fired on click on every non-task element (including scales).
docs.dhtmlx.com/gantt/api__gantt … event.html

There is an error in code sample, the event does not provide the related date value, only browser event.
And currently the public API does not contain method for retrieving date from a browser event. However, you can use a private methods for it (please note that internal API might be changed in future versions, so this code might need corrections in future)

The whole solution might look following:
CSS:.selected_date{ background-color: #FEFFC2; }

JS:[code](function(){
var selected_date = null;
gantt.attachEvent(“onEmptyClick”, function ( e){
var target = e.target || e.srcElement;
if(target.className && target.className.indexOf(“gantt_scale_cell”) >= 0){
var pos = gantt._get_mouse_pos(e);
var date = gantt._date_from_pos(pos.x);

		selected_date = gantt.date.day_start(date);//time scale in days
		gantt.render();
	}
});

function selectedDate(date){
	if(selected_date && date.valueOf() == selected_date.valueOf()){
		return "selected_date";
	}
	return "";
}
gantt.templates.scale_cell_class = selectedDate;
gantt.templates.task_cell_class = function(task, date){
	return selectedDate(date);
};

})();[/code]

#4

Thanks :slight_smile: It really do what I need :slight_smile:

But, it is possible to have this result, having the highlighted weekends as you have on the samples?

gantt.templates.scale_cell_class = function(date){
if(date.getDay()==0||date.getDay()==6){
return “weekend”;
}
};

gantt.templates.task_cell_class = function(item,date){
if(date.getDay()==0||date.getDay()==6){
return “weekend”;
}
};

The function you did have this code

gantt.templates.task_cell_class = function(task, date){
return selectedDate(date);
};

that replaces the code of the highlighted weekends :angry:

Thanks

#5

A template function returns a string that is appended to element’s className property. So templates can return multiple classes, separated by whitespaces

#6

True :slight_smile: It works :slight_smile:

Thanks a lot :slight_smile:

Keep up the good work!

#7

Hello. :smiley:

I am working on coloring weekend and click on scales.
I am not really familiar with Javascript but I somehow getting things done by
looking at other examples and stuff.
So I haven’t understood concept of className property.

I would really appreciate to see the example code of
how coloring weekend and click on scales can be done.

Thank you.

#8

Hi,
since the last reply we’ve added an api event for a click on a scales.
So selecting columns and highlighting weekends can be done by combing methods described in these articles

docs:
docs.dhtmlx.com/gantt/api__gantt … event.html
docs.dhtmlx.com/gantt/desktop__h … slots.html

Examples
docs.dhtmlx.com/gantt/samples/03 … olumn.html
docs.dhtmlx.com/gantt/samples/04 … ekend.html

Combined:
docs.dhtmlx.com/gantt/snippet/9ec7c286