)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to change the localization in Gantt

Platform: jQuery |
Control: ejGantt |
Published Date: July 6, 2017 |
Last Revised Date: May 29, 2019

Gantt can be localized to any specific locale by setting the respective locale code like en-US, fr-FR etc., to the locale property in Gantt. User must also need to refer the culture file specific to the defined locale from the Essential studio installed location to localize the date, time, currency and other formats. Gantt will be displayed with ‘en-US’ localization by default.

The culture file can be referred from the below installed location.

 
C:\{{ES installed location}}\JavaScript\assets\scripts\i18n\ej.culture.fr-FR.min
 

Gantt UI also contains texts in the dialog popup, toolbar and tooltips which needs to be localized. To localize these texts, you need to define the localized texts in the project or by referring the predefined locale text files from the Essential studio installed location.

 

The locale text file can be referred from the below installed location.

 
C:\{{ES installed location}}\JavaScript\assets\scripts \l10n\ej.localetexts.fr-FR.min
 

The localized texts can be defined in Gantt by the following ways,

To Refer the corresponding locale text file from the ES installed location. [OR]

To define the localized texts in the project.

Please refer the below code snippets for more details.

Referring predefined locale text files

<head runat="server">
    <title>Gantt Sample</title>
    <link href="//cdn.syncfusion.com/15.2.0.43/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/15.2.0.43/js/web/responsive-css/ej.responsive.css" rel="stylesheet" />
    <script src="//cdn.syncfusion.com/js/assets/external/jquery-2.1.4.min.js"></script> 
    <script src="//cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
    <script src="//cdn.syncfusion.com/15.2.0.43/js/web/ej.web.all.min.js"></script>    <script src="Scripts/Culture/ej.culture.fr-FR.min.js"></script>
    <script src="Scripts/Culture/ej.localetexts.fr-FR.min.js"></script>
</head><script type="text/javascript">
$(function () {
            $("#GanttContainer").ejGantt({
             //...             
             locale: "fr-FR",
             });
        });

 

Defining the localized texts

<script type="text/javascript">
$(function () {
     $("#GanttContainer").ejGantt({
       //...             
       locale: "fr-FR",
       });
  });
  ej.Gantt.Locale["fr-FR"] = {
  //string to display with dataSource contains 0 objects
  emptyRecord: "Aucun enregistrement à afficher",
    alertTexts: {
        indentAlert: "Il n'y a aucune trace de Gantt est sélectionné pour effectuer le retrait",
        outdentAlert: "Il n'y a aucune trace de Gantt est sélectionné pour effectuer le retrait négatif",
        predecessorEditingValidationAlert: "Cyclique dépendance survenu, S'il vous plaît Consultez le prédécesseur",
        predecessorAddingValidationAlert: "Remplissez toutes les colonnes dans la table prédécesseur",
        idValidationAlert: "Duplicate ID",
        dateValidationAlert: "Invalid Date de fin",
        dialogResourceAlert: "Remplissez toutes les colonnes du tableau des ressources"
    },
   //headerText to be displayed in TreeGrid
    columnHeaderTexts: {
        taskId: "ID",
        taskName: "Nom de la tâche",
        startDate: "Date de début",
        endDate: "Date de fin",
        resourceInfo: "Ressources",
        duration: "Durée",
        status: "Progrès",
        taskMode: "Mode tâche",
        predecessor: "Prédécesseurs",
        type: "Type",
        offset: "Offset",
        baselineStartDate: "Date de début de base",
        baselineEndDate: "Baseline Date de fin",
        WBS: "WBS",
        WBSPredecessor: "WBS prédécesseur",
        dialogCustomFieldName: "Nom de colonne",
        dialogCustomFieldValue: "Valeur",
        notes: "Remarques",
        taskType: "type de tâche",
        work: "Travail",
        unit: "Unité",
        effortDriven: "effort Driven"
    },    //string to display in dialog box
    editDialogTexts: {
        addFormTitle: "Nouvelle tâche",
        editFormTitle: "Modifier la tâche",
        saveButton: "sauvegarder",
        deleteButton: "Effacer",
        cancelButton: "Annuler",
        addPredecessor: "Ajouter un nouveau",
        removePredecessor: "Retirer",
        addButton: "Ajouter"
    },
    columnDialogTexts: {
        field: "Champ",
        headerText: "En-tête",
        editType: "Modifier le type",
        filterEditType: "Modifier le type de filtre",
        allowFiltering: "Autoriser le filtrage",
        allowFilteringBlankContent: "Autoriser le filtrage du contenu Blank",
        allowSorting: "Autoriser tri",
        visible: "Visible",
        width: "Largeur",
        textAlign: "Alignement du texte",
        headerTextAlign: "Alignement du texte en-tête",
        columnsDropdownData: "Colonne Chute de données vers le bas",
        dropdownTableText: "Texte",
        dropdownTableValue: "Valeur",
        addData: "Ajouter",
        deleteData: "Retirer",
        allowCellSelection: "Autoriser la sélection de cellules",
        clipMode: "Mode Clip",
        tooltip: "Info-bulle",
        showInColumnChooser: "Afficher dans le sélecteur de colonne",
        headerTooltip: "Header Tooltip"
    },
    editTypeTexts: {
        string: "Chaîne",
        numeric: "Numérique",
        datePicker: "Sélecteur de date",
        dateTimePicker: "Date Time Picker",
        dropdown: "Menu déroulant",
        boolean: "Boolean"
    },
    textAlignTypes: {
        right: "Droite",
        left: "La gauche",
        center: "centre"
    },
    clipModeTexts: {
        clip: "Agrafe",
        ellipsis: "Ellipse"
    },
    //string to be displayed in Toolbox's tooltip 
    toolboxTooltipTexts: {
        addTool: "Ajouter",
        editTool: "modifier",
        saveTool: "Mettre à jour",
        deleteTool: "Effacer",
        cancelTool: "Annuler",
        searchTool: "Chercher",
        indentTool: "tiret",
        outdentTool: "Retrait négatif",
        expandAllTool: "Développer tout",
        collapseAllTool: "Réduire tout",
        nextTimeSpanTool: "Suivant Timespan",
        prevTimeSpanTool: "Précédent Timespan",
        criticalPathTool: "Chemin critique",
        excelExportTool: "Exportation Excel",
        pdfExportTool: "Exportation PDF"
    },    //string to be displayed in taskbar tooltip for duration unit
    durationUnitTexts: {
        days: "journées",
        hours: "heures",
        minutes: "minutes",
        day: "journée",
        hour: "heure",
        minute: "minute"
    },
    durationUnitEditText: {
        minute: ["m", "min", "minute", "minutes"],
        hour: ["h", "heure", "heure", "heures"],
        day: ["ré", "dy", "journée", "journées"]
    },
    workUnitTexts: {
        days: "journées",
        hours: "heures",
        minutes: "minutes"
    },
    taskTypeTexts: {
        fixedWork: "travail fixe",
        fixedUnit: "Unités fixes",
        fixedDuration: "Durée fixe"
    },
    effortDrivenTexts: {
        yes: "Oui",
        no: "Non"
    },    //string to be displayed in context menu
    contextMenuTexts: {
        taskDetailsText: "Détails de la tâche ...",
        addNewTaskText: "Ajouter une nouvelle tâche",
        indentText: "tiret",
        outdentText: "Retrait négatif",
        deleteText: "Effacer",
        aboveText: "Au dessus de",
        belowText: "Au dessous de"
    },
    //Name to be displayed for New Task while adding  
    newTaskTexts: {
        newTaskName: "Nouvelle tâche"
    },
    //string to be displayed in column menu 
    columnMenuTexts: {
        sortAscendingText: "Trier par ordre croissant",
        sortDescendingText: "Trier par ordre décroissant",
        columnsText: "colonnes",
        insertColumnLeft: "Insérez la colonne de gauche",
        insertColumnRight: "Insérez la colonne de droite",
        deleteColumn: "Supprimer la colonne",
        renameColumn: "Renommer la colonne"
    },
    taskModeTexts: {
        manual: "Manuel",
        auto: "Auto"
    },
    columnDialogTitle: {
        insertColumn: "Insérer une colonne",
        deleteColumn: "Supprimer la colonne",
        renameColumn: "Renommer la colonne"
    },
    deleteColumnText: "Êtes-vous sûr de vouloir supprimer cette colonne?",
    okButtonText: "D'accord",
    cancelButtonText: "Annuler",
    confirmDeleteText: "Confirmation de la suppression",
    //string to be displayed while editing predecessor
    predecessorEditingTexts: {
        fromText: "De",
        toText: "À"
    },
    dialogTabTitleTexts: {
        generalTabText: "Général",
        predecessorsTabText: "Prédécesseurs",
        resourcesTabText: "Ressources",
        customFieldsTabText: "Les champs personnalisés",
        notesTabText: "Remarques"
    },
    predecessorCollectionText: [
            { id: "SS", text: "Démarrer-Démarrer", value: "Démarrer-Démarrer" },
            { id: "SF", text: "Démarrer-terminer", value: "Démarrer-terminer" },
            { id: "FS", text: "terminer-Démarrer", value: "terminer-Démarrer" },
            { id: "FF", text: "terminer-terminer", value: "terminer-terminer" }
        ]
 }
</script>


The following output is displayed for the above code example.

Change localization of gantt control.

Sample link

A sample to localize the Gantt control is available in the following link, Sample

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon