Current Date

Gantt
#1

I am a newbie to dhtmlxGantt. I am wondering if we can show the current date with a vertical line or something similar. It will help to visualize where projects/tasks are with respect to the current date. Please let me know.

Thanks in advance!
-Ravi.

#2

Need something like this as well…

#3

Hi,

I found a mini workaround for “just highlighting the current date text/element” in the header. If anyone is having the same problem, I worked around with the code and a bit of css.

In dhtmlxgantt.js

Added the following snippet towards the end inside “GanttChart.prototype.addDayInPanelTime = function (row)”

//the following code is added to highlight current date.
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth(); //January is 0!
var yyyy = today.getFullYear();
if(dd == date.getDay() && mm == date.getMonth() && yyyy == date.getFullYear(){
newCell.className = “currentDate”;
}
//end of code insert for highlight current date…

Create a class called currentDate in the css file
.currentDate{background-color:#ff0000;}

This is a good place to start and tweak other properties as needed.

Cheers,
Ravi.

#4

Thanks ravitheja, that’s a nice tweek. I had to modify the code a litle in order for it to work properly (maybe difference in gantt version):

//the following code is added to highlight current date. var today = new Date(); var dd = today.getDate(); var mm = today.getMonth(); //January is 0! var yyyy = today.getFullYear(); if(date.toDateString() == today.toDateString()) { newCell.className = "currentday"; } //end of code insert for highlight current date..

Also in the css file, the custom css class .currentday is added behind .dayNumber,.monthName,.weekName,.yearName and at the end of the file.

.dayNumber,.monthName,.weekName,.yearName,[u].currentday[/u] {font-size:9px;font-weight:bold;color:#858585;text-align:center;vertical-align:middle;padding:0;height:20px;position:absolute}
.dayNumber,.weekName {top:20px;border-left:1px solid #f1f3f1;border-top:1px solid #f1f3f1;padding-top:4px;background-color:#fff}
...
.currentday{
	top:20px;
	color: #ff0000;
	padding-top: 4px;
	background-color: #ffAAAA;
}
#5

BenV,

Thanks for pointing it out. There was an error in my code “dd == date.getDay()” should be “dd == date.getDate()”, pasted a testing version of my code. If “toDateString()” method is used, then may be it is more cleaner.

Again in CSS, I had it inserted after other overriding css. May be I was not explicit on my end. Glad it worked out for you.

-Ravi.