Controlling the gannt column header text and content

Gantt
#1

I am using the gannt, and when i am on days scale i see the date of each day in the column headers.

I would like full controll of that cell content (we want to add weather info for each date)

how can i do that?..

(i’ve managed to add an icon using only css, but i need more controll, since we want to add more data to each ccell)

Screen Shot 2023-01-08 at 14.36.56
Screen Shot 2023-01-08 at 14.36.561018×263 44.5 KB

#2

To have full control over the content of the Gantt chart’s column headers, you can use the header attribute of the columns configuration option. The header attribute should contain a function that returns an object with the text and html properties, which define the content of the column header.

#3

Hi,
You can add any data to the scale cell using the format attribute in the gantt.config.scales configuration object.
For example, I used the weather object:

const weather = [
    { date: "02-04-2023", precipitationType: "fa-solid fa-cloud-sun",           temperature: "15" },
    { date: "03-04-2023", precipitationType: "fa-solid fa-cloud-showers-heavy", temperature: "10" },
    { date: "04-04-2023", precipitationType: "fa-solid fa-cloud-rain",          temperature: "13" },
    { date: "05-04-2023", precipitationType: "fa-solid fa-cloud-meatball",      temperature: "8" },
    { date: "06-04-2023", precipitationType: "fa-solid fa-cloud-bolt",          temperature: "5" },
    { date: "07-04-2023", precipitationType: "fa-solid fa-cloud-sun",           temperature: "15" },
    { date: "08-04-2023", precipitationType: "fa-solid fa-cloud-showers-heavy", temperature: "10" },
    { date: "09-04-2023", precipitationType: "fa-solid fa-cloud-rain",          temperature: "13" },
    { date: "10-04-2023", precipitationType: "fa-solid fa-cloud-meatball",      temperature: "8" },
    { date: "11-04-2023", precipitationType: "fa-solid fa-cloud-bolt",          temperature: "5" },
    { date: "12-04-2023", precipitationType: "fa-solid fa-cloud-sun",           temperature: "15" },
    { date: "13-04-2023", precipitationType: "fa-solid fa-cloud-showers-heavy", temperature: "10" },
]

Scale configuration:

const dateFormat = gantt.date.date_to_str("%d-%m-%Y");
const dateFormatScale = gantt.date.date_to_str("%d %D");

gantt.config.scales = [
    { unit: "day", step:1, format: (date) => {
        const dayForecast = weather.find(item => item.date == dateFormat(date));
        if (dayForecast) {
            return `<i class='${dayForecast.precipitationType}'></i> ${dayForecast.temperature}°C<br/>${dateFormatScale(date)}`;
        }
    }}
]

Styles:

<style>
    body,
    html {
        width: 100%;
        height: 100%;
        margin: unset;
    }

    .gantt_container .gantt_grid_scale .gantt_grid_head_cell {
        line-height: 43px;
    }

    .gantt_container .gantt_scale_cell {
        padding-top: 4px;
        line-height: 17px;
    }
</style>

Icons taken from here:

<script src="https://kit.fontawesome.com/7bc4fb1ca9.js" crossorigin="anonymous"></script>

Please see an example: https://snippet.dhtmlx.com/itjt4qzn

#4

Wow, you really helped me…

I did something ugly by adding a few scales, one for the date, one for the icon and one for the tepertures…
I didn’t know the format attribute can hold html element…

Now i use a single scale and all the data is designed by me in it…

Thanks!!

1 Like