function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

2 Dates - how to log on a timeline

Hey there.

I'm trying to determine the best approach to something I'm about to build.

I'm looking to develop out some sort of Gantt chart -  What concerns me the most

is how to plot a start date and an end date against a set calendar (logically).

I could build out the calendar part fine - but any suggestions as to how I could

plot a coloured bar against a date from the start time to the end time:


Similar to the standard salesforce calendar:



I could create the calendar ok - but any suggestions for plotting a coloured bar based on a start date and end date?

Is there some sort of standard approach people adopt to this? This doesn't seem easy...


Thanks & Best regards


If Im using a table with a td

would i dynamically be able to set the td

//Something like <td> <div style="width: {!val}; color: #FF;" /> </td>


width based on a visualforce controller property?


Rajesh ShahRajesh Shah
It should work. For our case, we were displayong the color of the td depending on the data and we used merged field in a similar way and it worked.

Excellent - thank you Rajesh.

Can you post an example if possible?

Rajesh ShahRajesh Shah

We defined 3 style classes as shown below in the VF page:


.colourred{ background-color: #e1a5aa; } .colourgreen{ background-color: #8cb473; } .colourwhite{ background-color: transparent; }


 Then in the controller, based on the data, we would decide the color required and set the class name as shown below:


<td align="center" width="10%" class="{!Refvar.classname}" ... > </td>





Thanks Rajesh - that helps :)

What about setting the width of the coloured div?

Thanks again,

Rajesh ShahRajesh Shah
Though I didn't tried setting the width using the controller, I guess it should work. If it doesn't, you can define the width in your class style sheet (if possible) and use that.

Sounds good!

Thank you very much