Translate timeline weekdays and tooltip date format

[Fabrício Rennó]

How can I change "day of week" from timeline to something other than English "S, M, T, W, T, F, S" default?

Alos, how can I set the tooltip to "dd/MM/yyyy"?

[Ajithkumar Gopalakrishnan]

Hi Fabricio,

Greetings from Syncfusion Support,

To achieve your requirement, we suggest using the dateFormat and timelineTemplate properties in the Gantt chart. The dateFormat property is used to change the date format, while the timelineTemplate allows you to customize the default weekday labels. Below is the code snippet and sample for your reference.

//index.html

<script type="text/x-jsrender" id="TimelineTemplates">

    ${if(tier == 'bottomTier')}

    <div class="e-header-cell-label" style="width:32px;" tabindex="-1" title=${date}>${weekDay(date)}</div>

    ${/if}

</script>

// index.js

window.weekDay = function (dateString) {

    var parts = dateString.split('/');

    var day = parseInt(parts[0], 10);

    var month = parseInt(parts[1], 10) - 1;  // JavaScript months are 0-based

    var year = parseInt(parts[2], 10);

    // Create a new Date object from the parsed parts

    var date = new Date(year, month, day);

    // Ensure the date is valid

    if (isNaN(date)) {

        return 'Invalid date';

    }

    // Custom labels for days of the week

    var customDays = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];

    // Get the day of the week (0 = Sunday, 1 = Monday, etc.)

    var dayOfWeek = date.getDay();

    // Return the custom day label

    return customDays[dayOfWeek];

};

   

 

var ganttChart = new ej.gantt.Gantt({

    dataSource: window.editingData,

        dateFormat: 'MMM dd, y',

        ...

        timelineTemplate: "#TimelineTemplates",

});

ganttChart.appendTo('#Editing');

You can find a working example on StackBlitz.



For more information, you may refer to the following link:

https://ej2.syncfusion.com/javascript/documentation/gantt/timeline/timeline?cs-save-lang=1&cs-lang=html#timeline-template

If you have any further questions or need additional assistance, please let me know!

Regards,
Ajithkumar G

[Fabrício Rennó]

Ajithkumar, thank you.

Could you please clarify how to set the "Duration" value inside tooltip to "#.##0,0" format?

Therefore, apply "dot" as thousands separator and "comma" as decimal separator.

In the sample, "3.5" would be replaced by "3,5".

Regards

[Ajithkumar Gopalakrishnan]

Hi Fabricio,

To achieve your requirement, we suggest using the taskbarTooltip property in the Gantt chart. This property allows you to customize the taskbar tooltip. In your case, the duration format can be changed and updated accordingly. We have attached a code snippet and sample for reference.

// index.html

<script type="text/x-jsrender" id="taskbarTooltip">

    <div>${TaskName}</div>

    <div>StartDate:${dateFormat(StartDate)}</div>

    <div>EndDate:${dateFormat(EndDate)}</div>

    <div>Duration:${durationFormat(Duration)}</div>

    <div>Progress:${Progress}</div>

</script>

// index.js
var ganttChart = new ej.gantt.Gantt({       

        tooltipSettings: {

            showTooltip: true,

            taskbar: '#taskbarTooltip'

        },

        ...

});

ganttChart.appendTo('#Editing');

window.durationFormat = function(duration)

{

    var durationNumber = parseFloat(duration);

 

    // Format the number (thousands separator as dot and decimal as comma)

    var formattedDuration = new Intl.NumberFormat('de-DE', {

            minimumFractionDigits: 1,

        maximumFractionDigits: 1,

    }).format(durationNumber);

return formattedDuration + ' days';

};

You can find a working example on StackBlitz.



For more information, you may refer to the following link:

https://ej2.syncfusion.com/javascript/documentation/gantt/taskbar?cs-save-lang=1&cs-lang=html#taskbar-tooltip

If you have any further questions or need additional assistance, please let me know!

Regards,
Ajithkumar G